コハムコハムWebクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。Them記事は上記記事を意訳したものです。※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。JavaScriptは、単純なウェブサイトのインタラクションから複雑なウェブアプリケーションまで、世界で最も広く使用されているプログラミング言語の1つです。JavaScriptは強力である一方で、コードの実行を停止させる可能性のあるエラーを発生させることでも有名です。JavaScriptのエラーのデバッグは、特に意味不明な暗号のようなメッセージに直面したとき、非常に困難な作業となることがあります。ほとんどのエラーは一般的なものであり、原因を理解すれば簡単な解決策があります。この記事では、開発者が遭遇する上位10個のJavaScriptエラーを解説し、デバッグと修正のための詳細な実用的な手順を提供します。JavaScriptの初心者でもベテラン開発者でも、これらの一般的なエラーとその解決方法を理解することで、コーディングの過程で時間と労力を節約することができます。UndefinedJavaScript開発者が最も頻繁に遭遇するエラーの1つが、この有名なTypeErrorです。これは、undefinedまたはnullのオブジェクトのプロパティにアクセスしようとした時に発生します。null;console.log(user.name);この場合、プロパティを持たないnullのnameプロパティにアクセスしようとしているため、JavaScriptはエラーを投げます。プロパティにアクセスする前に、オブジェクトが存在することを常に確認します。console.log('ユーザーがnullまたはundefinedです。DefinedReferenceErrorは、宣言されていない変数にアクセスしようとした時に発生します。このエラーは、変数のスコープやタイプミスを扱う際によく発生します。TokenSyntaxErrorは、JavaScriptが構文規則に従っていないコード行に遭遇した時に発生します。これは、カンマ、括弧、または予期しないキーワードが欠落しているなど、様々な理由で発生する可能性があります。console.log('Hello');}ここでは、trueの後の閉じ括弧が欠落しているため、構文エラーが発生します。ExceededRangeErrorは、終了条件なしで関数が再帰的に何度も呼び出され、コールスタックがオーバーフローした時に発生します。exceededこのコードは無限の再帰を作成し、ブラウザがRangeErrorを投げる原因となります。Functionこのエラーは、関数ではない変数やプロパティを関数として呼び出そうとした時に発生します。functionここでは、JavaScriptがオブジェクトであるuserを関数として扱おうとしています。Inputこのエラーは、JavaScriptがスクリプトまたは関数の終わりに達したが、さらにコードを期待している場合に発生します。欠落していることが原因です。console.log('Hello');この関数は閉じ中括弧が欠落しているため、コードが途中で終わってしまっています。iterableこのエラーは、反復可能でない値に対して反復処理を試みた時に発生します。反復可能なものには、配列、セット、その他の反復をサポートする構造が含まれます。Variableこのエラーは、定数(const)変数に値を再代入しようとした時に発生します。定数として宣言された値は、一度宣言されると変更できません。constは変更されない値に使用すべきです。Identifierこのエラーは、JavaScriptが予期しない場所で識別子(変数名など)に遭遇した時に発生します。多くの場合、演算子、カンマ、またはセミコロンの欠落が原因です。identifierこのエラーは2つのステートメントの間にセミコロンが欠落していることが原因です。Definedこのエラーは、eventオブジェクトを明示的に宣言せずにイベントハンドラで使用した時に発生します。古いブラウザやイベントオブジェクトが暗黙的に渡されない状況で発生します。console.log(event);});JavaScriptエラーの高度なデバッグテクニック一般的な10個のJavaScriptエラーとそのデバッグ方法を説明しましたが、ここではさらに高度なデバッグテクニックを探ってみましょう。これらの方法は、開発プロセスの早い段階でエラーを捉え、開発者としての全体的な効率を改善するのに役立ちます。減らすことができます。ブラウザ開発者ツールの使用モダンなウェブブラウザには、JavaScriptのデバッグをより簡単にする強力な開発者ツールが装備されています。Chrome、Firefox、Edgeなどのほとんどのブラウザには、JavaScriptコンソール、ソースインスペクタ、ネットワークタブが内蔵されており、コードの検査、エラーの追跡、パフォーマンスのボトルネックの理解が可能です。コンソールはすべてのJavaScriptエラーが表示される場所で、何かが壊れた時に最初に確認すべき場所です。console.log()を使用して変数や出力を表示し、プログラムの流れを追跡することもできます。userの変数の値をチェックデバッグ時には、コンソールはより詳細なスタックトレースも表示でき、エラーが発生した正確な場所と関数がどのように呼び出されたかを特定するのに役立ちます。ブレークポイントとソース検査ChromeのデベロッパーツールのSourcesタブ(またはFirefoxのDebugger)では、コードにブレークポイントを設定できます。ブレークポイントは特定の行でコードを一時停止させ、変数の検査、式の監視、1行ずつコードの実行を確認することができます。ブレークポイントを設定したい行番号をクリックすると、その地点でコードが一時停止するその後、変数にカーソルを合わせて現在の値を確認したり、コールスタックを調べたり、コードを1行ずつ実行して正確な動作を確認したりできます。try...catchブロックの活用JavaScriptはtry...catchブロックという強力なエラー処理メカニズムを提供しています。これにより、アプリケーション全体をクラッシュさせることなく、エラーを適切に処理することができます。一部のコードの実行を「try」し、エラーが発生した場合は「catch」して制御された方法で処理するという考え方です。error);}この例では、catchブロックが無効なJSONによってスローされたエラーを捕捉し、アプリケーションのクラッシュを防ぎ、代わりにエラーをコンソールに記録します。debuggerキーワードの使用debuggerキーワードは、ブラウザの開発者ツールが開いている時に自動的にブレークポイントをトリガーするJavaScriptの組み込みツールです。これは、何が問題なのかを調査するために特定の地点でコードを一時停止させたい時に便利です。taxRate);}debuggerステートメントに遭遇すると、ブラウザはその行で実行を一時停止し、変数の検査やコードの残りの部分のステップ実行を可能にします。これは、手動でブレークポイントを設定することなく、コードの特定の部分のバグを素早く見つけるための優れた方法です。多くのJavaScriptアプリケーションは、AJAXやAPIコールを介して取得される外部データに依存しています。エラーは、失敗したネットワークリクエスト、APIから返された不正なデータ、または誤設定されたエンドポイントが原因で発生することがあります。ブラウザの開発者ツールには、ページによって行われたすべてのHTTPリクエストを監視できるNetworkタブが用意されています。非同期コードのデバッグ非同期JavaScript(PromisesやAsync/Awaitを使用)は、特に複雑なイベントシーケンスを扱う場合、デバッグが難しい場合があります。処理されていないPromiseの拒否や失敗した非同期タスクは、サイレントな失敗を引き起こし、エラーの追跡を困難にする可能性があります。Promiseチェーンでエラー処理を忘れると、有用な情報を提供しない未捕捉のエラーが発生する可能性があります。しれませんが、その原因を理解すれば解決は比較的簡単です。TypeError、ReferenceError、SyntaxErrorなどの一般的なエラーを認識し、それらをデバッグする方法を知ることで、問題を素早く効率的に解決できます。エラーメッセージを注意深く読み、タイプミス、スコープの問題、不正なデータ型などの一般的なミスをチェックすることから始めましょう。ブラウザのコンソールで利用可能なデバッグツールを使用し、コーディングプロセスの早い段階でエラーを捕捉するためにリンターやモダンなIDEの機能を活用することを躊躇しないでください。プロアクティブなデバッグ戦略と適切なツールを使用することで、クリーンでエラーのないJavaScriptコードを書く道が開かれます。10:30Webクリエイターのコハムです。地味な事務職からWeb制作会社に転職してフリーランスになりました。キンクマハムスターと2人暮らし。3©コハム引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。