こんにちは、かつコーチです。
前回はsetTimeout・setIntervalでタイマー処理を扱いました。
今回からは少しテーマを変えて、コードを書いていると必ず出会う「エラー」との付き合い方を解説していきます。
コンソールに真っ赤な文字でエラーが表示されると、初心者のうちはそれだけで手が止まってしまいますよね。
でもエラーメッセージは、実は「ここが原因ですよ」と教えてくれる親切なヒントです。
読み方さえ分かれば、怖いものではなくなります。
JavaScriptのエラーメッセージの基本構造
エラーメッセージはどこに出るのか
JavaScriptのエラーは、ブラウザのコンソール（開発者ツールの「Console」タブ）に表示されます。
ChromeならF12キーかCmd + Option + I（Mac）でデベロッパーツールを開き、Consoleタブを見ればエラーの内容を確認できます。
エラーが起きると、その時点でそれ以降の処理が止まってしまうことが多いので、「なぜか動かない」と感じたら、まずコンソールを開くのが鉄則です。
エラーメッセージの3つの要素
エラーメッセージは、だいたい次の3つの情報でできています。
- エラーの種類（例：
TypeError、ReferenceError） - エラーの内容（何が問題なのかの説明文）
- 発生場所（ファイル名と行番号）
例えば、こんなエラーが出たとします。
Uncaught TypeError: Cannot read properties of null (reading 'textContent')
at script.js:5:20
これは「TypeErrorという種類のエラーが、script.jsの5行目20文字目で発生した。原因はnullのtextContentプロパティを読み取ろうとしたことだ」と読み解けます。
慣れないうちは英語の説明文に身構えてしまいますが、まずは種類と行番号の2つさえ押さえれば、原因を探る手がかりとしては十分です。
よく出るエラーの種類と原因
TypeError：型が原因のエラー
TypeErrorは、値の型に対して間違った操作をしたときに出るエラーです。
初心者が最もよく遭遇するのが、次の「存在しない要素を操作しようとするパターン」です。
const heading = document.querySelector('.title');
heading.textContent = 'こんにちは';
もし.titleというクラスの要素がHTML内に存在しなければ、document.querySelectorはnullを返します。
nullに対して.textContentのようなプロパティを読み書きしようとすると、次のエラーになります。
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
「nullのプロパティは設定できません」という意味なので、headingがnullになっている、つまりセレクタが間違っているか、そもそも要素がまだ存在していないタイミングで実行されている、という2つを疑うのが基本です。
ReferenceError：存在しない変数・関数を参照したエラー
ReferenceErrorは、定義されていない変数や関数を呼び出したときに出ます。
console.log(userName);
// Uncaught ReferenceError: userName is not defined
userNameという変数がどこにも定義されていないため、「参照できません」と怒られています。
スペルミスや、変数の定義を別のファイルに書いたつもりが読み込み順が逆だった、というケースでよく見かけます。
SyntaxError：文法そのものが間違っているエラー
SyntaxErrorは、コードの書き方自体がJavaScriptのルールに違反しているときに出ます。
const total = 100 +;
// Uncaught SyntaxError: Unexpected token ';'
括弧の閉じ忘れやカンマの打ち忘れなど、単純なタイプミスが原因であることがほとんどです。
このエラーはコードが実行される前の「解析」の段階で発生するため、該当行より前のコードも含めて全く動かなくなる点に注意しましょう。
つまずきポイント：nullエラーはタイミングの問題であることが多い
かつコーチが実際にハマった話
私が実務でよく引っかかったのが、querySelectorで要素を取得した直後に操作してnullエラーが出るパターンです。
HTMLもJavaScriptも間違っていないはずなのに、コンソールにはCannot read properties of nullとだけ表示されて、原因が全く分かりませんでした。
❌ Before：HTML読み込み完了前にJavaScriptが実行される
<head>
<script src="script.js"></script>
</head>
<body>
<h1 class="title">見出し</h1>
</body>
// script.js
const heading = document.querySelector('.title');
heading.textContent = '書き換え後の見出し';
// Uncaught TypeError: Cannot set properties of null (setting 'textContent')
<head>内で読み込まれたscript.jsは、<body>の中身がブラウザに読み込まれるより先に実行されます。
そのため.titleの<h1>がまだ存在しておらず、querySelectorはnullを返してしまうのです。
原因が分かるまで、私は何度も「HTMLのクラス名を打ち間違えたのか」とスペルばかり疑っていました。
実際にはスペルは合っていて、単に読み込みの順番が問題だったというオチです。
✅ After：defer属性を付けてHTML読み込み後にスクリプトを実行する
<head>
<script src="script.js" defer></script>
</head>
<body>
<h1 class="title">見出し</h1>
</body>
// script.js
const heading = document.querySelector('.title');
heading.textContent = '書き換え後の見出し';
// 正常に書き換わる
defer属性を付けると、HTMLの解析が完了してからスクリプトが実行されるようになるため、<h1>が確実に存在した状態でquerySelectorが動きます。
nullエラーを見たら、「そもそもその要素が今の時点で存在しているか」を疑う癖をつけておくと、原因特定がぐっと早くなります。
エラーの原因を特定する読み方のコツ
スタックトレースを下から読む
エラーメッセージの下に並んでいるat ...という行の並びをスタックトレースと呼びます。
Uncaught TypeError: ...
at updateTitle (script.js:8:3)
at HTMLButtonElement.<anonymous> (script.js:15:22)
これは「どの関数からどの関数が呼ばれて、最終的にエラーが起きたか」という呼び出しの流れを表しています。
一番上が実際にエラーが発生した場所、下にいくほど「そこを呼び出した元」になるので、まずは一番上の行から自分が書いたファイル名を探すのが基本です。
エラーメッセージをそのまま検索する
原因の見当がつかないときは、エラーメッセージをそのまま検索エンジンに貼り付けるのが一番の近道です。
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
このように具体的なメッセージで検索すると、同じ状況で困った人の質問や解説記事が見つかりやすくなります。
変数名やファイル名などの固有名詞だけ検索前に取り除いておくと、よりヒットしやすくなります。
まとめ
この記事のポイント
- エラーメッセージは「種類」「内容」「発生場所（行番号）」の3要素で構成されている
TypeErrorは型、ReferenceErrorは未定義の変数・関数、SyntaxErrorは文法ミスが原因nullのプロパティエラーは、要素がまだ存在しないタイミングで操作していないか疑う- スタックトレースは上から「エラー発生箇所→呼び出し元」の順に読む
- エラーメッセージをそのまま検索すると解決の近道になる
次に読むべき記事
エラーの読み方が分かったところで、次回は初心者が特につまずきやすいundefinedとnullの扱いを詳しく見ていきます。
→ 次の記事：undefined・nullの扱い方でハマらないために