まず結論
JavaScriptのエラー名は、どの種類の問題が起きたかを教えてくれます。
よく見るのは次の3つです。
| エラー | ざっくりした意味 |
|---|---|
| TypeError | 値の種類や中身が想定と違う |
| ReferenceError | 変数や関数が見つからない |
| SyntaxError | 文法として壊れている |
エラー名だけで直せるわけではありませんが、最初の切り分けに役立ちます。
TypeError
TypeErrorは、値の型や中身が想定と違う時に出ます。
例:
const button = document.querySelector("#save");
button.addEventListener("click", () => {});
#save がHTMLに存在しない場合、button は null です。null に addEventListener はないため、エラーになります。
TypeError: Cannot read properties of null
確認すること:
- 変数の中身がnullではないか
- 配列だと思った値が配列か
- オブジェクトのプロパティが存在するか
- APIレスポンスの形が想定通りか
ReferenceError
ReferenceErrorは、参照しようとした名前が存在しない時に出ます。
console.log(userName);
userName が定義されていないと、次のようになります。
ReferenceError: userName is not defined
よくある原因:
- 変数名の打ち間違い
- import忘れ
- スコープの外で使っている
- scriptの読み込み順が違う
TypeErrorは「値はあるが使い方が違う」ことが多く、ReferenceErrorは「名前自体が見つからない」ことが多いです。
SyntaxError
SyntaxErrorは、JavaScriptの文法として読めない時に出ます。
if (count > 0 {
console.log("ok");
}
この例では、) が足りません。
SyntaxError: Unexpected token
よくある原因:
- 括弧の閉じ忘れ
- カンマ不足
- クォートの閉じ忘れ
- JSONではない文字列をJSONとして読んだ
- コードフェンスやテンプレート文字列の崩れ
SyntaxErrorは、実行前に止まることがあります。まず該当行の前後を見ます。
読む順番
Consoleにエラーが出たら、次の順番で見ます。
- エラー名
- メッセージ
- ファイル名
- 行番号
- 該当行の変数
例:
TypeError: Cannot read properties of undefined (reading 'title')
at renderPost (main.js:18:12)
この場合は、renderPost の18行目で、undefined.title のようなことが起きている可能性があります。
console.logで確認する
原因が分からない場合は、直前で値を出します。
console.log(post);
console.log(post?.title);
値が undefined なのか、プロパティ名が違うのかを確認します。
実践メモ: エラー名は入口です。実際には、行番号の直前で「どの値が想定と違うか」を見るのが大事です。
まとめ
TypeErrorは値の使い方、ReferenceErrorは名前の参照、SyntaxErrorは文法の問題です。
Consoleでは、エラー名、メッセージ、ファイル名、行番号を分けて読みます。よく分からない時は、該当行の直前で値を確認します。
