2022年1月29日 JavaScript (JS Primer) エラーとデバッグ
JavaScript開発においてデバッグ中に発生したエラーを理解することは非常に重要です。 エラーが持つ情報を活用することで、ソースコードのどこでどのような例外が投げられたのかを知ることができます。
エラーはすべてErrorオブジェクトを拡張したオブジェクトで宣言されています。 つまり、エラーの名前を表すnameプロパティと内容を表すmessageプロパティを持っています。 この2つのプロパティを確認することで、多くの場面で開発の助けとなるでしょう。
エラーオブジェクトのプロパティを出力してみました。
try { throw new Error("例外が投げられました"); } catch (error) { console.log(error.name); // => "Error" console.log(error.message); // => "例外が投げられました" }
次のコードでは、try...catch文で囲っていない部分で例外が発生しています。
function fn() { // 存在しない変数を参照する x++; } fn();
Google Chromeの検証ツールで出力した結果
エラーログの情報は以下になります。
| メッセージ | 意味 |
|---|---|
| ReferenceError: x is not defined | エラーの種類はReferenceErrorで、xが未定義であること。 |
| error.js:3:5 | 例外がerror.jsの3行目5列目で発生したこと。つまりx++;であること。 |
また、メッセージの後には例外のスタックトレースが表示されています。 スタックトレースとは、プログラムの実行過程を記録した内容で、どの処理によってエラーが発生したかが書かれています。
- スタックトレースの最初の行が実際に例外が発生した場所です。つまり、3行目の x++; で例外が発生しています
- 次の行には、そのコードの呼び出し元が記録されています。つまり、3行目のコードを実行したのは5行目のfn関数の呼び出しです
このように、スタックトレースは上から下へ呼び出し元をたどれるように記録されています。
コンソールに表示されるエラーログには多くの情報が含まれています。 MDNのJavaScriptエラーリファレンスには、ブラウザが投げるビルトインエラーの種類とメッセージが網羅されています。 開発中にビルトインエラーが発生したときには、リファレンスを見て解決方法を探すとよいでしょう。
console.errorとスタックトレース
console.errorメソッドではメッセージと合わせてスタックトレースをコンソールへ出力できます。
以下の例からconsole.logとconsole.errorの違いを見ていきます。
function fn() { console.log("メッセージ"); console.error("エラーメッセージ"); } fn();
console.logはメッセージだけなのに対して、console.errorではメッセージと共にスタックトレースが出力されます。 そのため、エラーが発生した場合のコンソールへのメッセージ出力にconsole.errorを利用することでデバッグがしやすくなります。
また、ほとんどのブラウザにはconsole.logやconsole.errorの出力をフィルターリングできる機能が備わっています。 ただのログ出力にはconsole.logを使い、エラーに関するログ出力にはconsole.errorと使うことで、ログの重要度が区別しやすくなります。
まとめ
この章では、例外処理とエラーオブジェクトについて学びました。
- try...catch構文はtryブロック内で発生した例外を処理できる
- catch節とfinally節は、両方またはどちらか片方を記述する
- throw文は例外を投げることができ、Errorオブジェクトを例外として投げる
- Errorオブジェクトには、ECMAScript仕様や実行環境で定義されたビルトインエラーがある
- Errorオブジェクトには、スタックトレースが記録され、デバッグに役立てられる
