JavaScriptエラーをコンソールで読み解く！デバッグの第一歩｜現場で使える実践テクニック

こんにちは！

今日は「JavaScriptエラーをコンソールで読み解く！デバッグの第一歩」について解説します。

コンソールが怖い理由と向き合い方

僕も初心者の頃、ブラウザのデベロッパーツール（コンソール）を開くのがめっちゃ怖かったんです。
赤いエラーメッセージがずらっと並んでいるのを見ると、「あ、もう終わった」みたいな気持ちになってました。

でも現場で仕事をするようになると、コンソールは「味方」だってことに気づきました。
エラーが出ていない方が、実は危険なんです。
だって、目に見えないバグがどこかで起きているかもしれないから。

コンソールを開く方法は簡単ですよ。

• Windows: F12 または Ctrl + Shift + J
• Mac: Command + Option + J

または、ブラウザ右上のメニューから「デベロッパーツール」を選ぶだけです。
コンソールのタブを選ぶと、エラーメッセージが表示されます。
最初は「何言ってんのこれ」って感じかもしれませんが、慣れるとほんま便利です。

よくあるエラーメッセージの読み方3パターン

コンソールに出るエラーって、実は規則性があるんです。
ここでは、現場で本当によく見る3つのパターンを解説します。

パターン1: Uncaught TypeError

これは「存在しないものを使おうとした」エラーです。
例えばこんなコードですね。

const element = document.querySelector('.container');
element.addEventListener('click', function() { console.log('clicked'); });

もしHTMLに .container というクラスがなかったら、element は null になります。
そのままコードを実行しようとすると、こんなエラーが出ます。
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

読み方としては、「nullのプロパティを読もうとしたけど、nullなので読めないよ」という意味です。
つまり、対象の要素がHTMLに存在していないってことですね。

僕も昔、このエラーで30分悩んだことあります。
原因は、CSSのクラス名を .container としてたのに、JavaScriptでは .containers って複数形で書いてたからなんです。
ほんま初歩的なミス。でも、それが学習なんですよ。

パターン2: ReferenceError: … is not defined

これは「そんな変数、存在しないよ」というエラーです。

console.log(userAge);

もし userAge という変数をどこにも定義していなかったら、

ReferenceError: userAge is not defined

こんなエラーが出ます。
スコープの問題もよくあります。
例えば、関数の中で定義した変数を、関数の外からアクセスしようとするパターンですね。

function getData() {
  const data = 'hello';
}
console.log(data); // ReferenceError!

data は関数の中だけで使える変数です。
外からアクセスできません。

パターン3: SyntaxError: Unexpected token

これは「コードの書き方がおかしい」というエラーです。
括弧の閉じ忘れや、カンマの打ち忘れとか。

const obj = { name: 'Clio', age: 25 // 閉じ括弧忘れ
console.log(obj);

こんな場合、SyntaxError: Unexpected end of input みたいなエラーが出ます。
これはコードエディタでも教えてくれることが多いので、比較的気づきやすいです。

エラーを見つけたら最初にすること

エラーメッセージを読んだら、次のステップに進みましょう。

ステップ1: エラーメッセージをしっかり読む

「何行目でエラーが起きたのか」という情報が必ず書いてあります。
コンソールのエラーメッセージをクリックすると、その行のコードが表示されます。
ここがデバッグの第一歩ですよ。

ステップ2: その行の前後を確認する

エラーが起きている行の直前に、原因があることが多いです。
変数の定義を忘れていないか、スペルは合ってるか、そういうことをチェックします。

ステップ3: console.logで値を確認する

もし分からなくなったら、console.log() を使って値を確認するといいですよ。

const element = document.querySelector('.container');
console.log(element); // nullか、HTMLElementか？
if (element) {
  element.addEventListener('click', function() { console.log('clicked'); });
}

こんな感じで、事前に値をチェックしておくと、エラーを防げます。
これは「防御的プログラミング」って言う考え方で、ほんま大事です。

ステップ4: 必要に応じて調べる

エラーメッセージをそのままGoogle検索にコピペするだけで、大体の答えが見つかります。
「Cannot read properties of null」みたいに、メッセージの重要な部分だけを検索するといいですよ。
StackOverflowとか、MDNのドキュメントで同じエラーを経験した人の解決方法が出てくることがほとんどです。

まとめ

JavaScriptのエラーは、最初は怖く感じるかもしれません。
でも、メッセージの読み方を理解すると、自分で問題を解決できるようになります。

大事なのは、エラーを「敵」だと思わないことです。
むしろ、「今どこが間違ってるのか教えてくれる親切な道案内」くらいに思うといいですよ。

現場でも、エラーメッセージが読める人と読めない人では、デバッグの速度が全然違います。
この記事で解説した3つのパターンを覚えておくだけでも、かなり役立つと思います。

最初は一つずつ丁寧にエラーメッセージを読む習慣をつけてください。
そうするうちに、直感的に「あ、あの変数のあたりやん」みたいに判断できるようになります。
それが経験ですね。