JavaScriptエラーを見落とさない！コンソールの読み方と実践デバッグ術｜現場で使える実践テクニック

こんにちは！
今日は「JavaScriptエラーを見落とさない！コンソールの読み方と実践デバッグ術」について解説します。

これね、ほんまに現場で多いんですよ。
デザインも崩れてるし、動作もおかしい、でもどこが原因か分からない…ってときに、実はコンソールをちゃんと見てなかったっていうことが。
僕も駆け出しの頃、エラーメッセージを無視して何時間も悩んでました。
今日はそんな失敗をしないために、コンソールの見方と読み方をお伝えします。

ブラウザコンソールの開き方と画面構成

まず、コンソールを開く方法からですね。
Windows では F12 キー、Mac では Command + Option + I を押すとブラウザの開発者ツールが開きます。
その中の「コンソール」タブを選ぶと、JavaScriptのエラーログが表示されるんです。

コンソール画面には大きく分けて3つの要素があります。
一つ目は「赤いエラーメッセージ」。
これはJavaScriptの実行に失敗した、めっちゃ重大なもんです。
二つ目は「黄色の警告メッセージ」。
エラーじゃないんですけど、注意した方がいいよっていう通知ですね。
三つ目は「通常のログ」。
開発者が意図的に出力した情報です。

大事なのは、赤いエラーが出ていたら、まずそこを見ることです。
ほんでその下には、エラーが発生したファイル名と行番号が書いてあるんですよ。
例えば script.js:42 って書いてあったら、script.js ファイルの42行目が怪しいってことになります。

よくあるJavaScriptエラーとその意味

現場でよく見かけるエラーをいくつか紹介しますね。

Uncaught TypeError: Cannot read property ‘xxx’ of undefined

これはめっちゃ多いです。
要するに、存在しないプロパティを読もうとしてるんですよ。
例えば、HTMLに id="myButton" って要素があるのに、JavaScriptで違う名前で取得してしまったとか。
僕も何度やったことか…。
確認することは、document.getElementById() の引数が本当に合ってるかどうかです。

Uncaught ReferenceError: xxx is not defined

これは「その変数、定義されてないよ」っていうエラーです。
変数名のタイプミスが原因のことが多いですね。
もしくは、ライブラリを読み込んでないのに、そのライブラリの関数を使おうとしてるとか。
例えば jQuery を使いたいのに、<script> タグで読み込んでなかったら、$ が定義されてないエラーが出ます。

Uncaught SyntaxError: Unexpected token

これは文法エラーです。
括弧の閉じ忘れとか、セミコロンがないとか、そういう細かいミスですね。
コンソールに「何行目が怪しい」って教えてくれるので、その周辺をチェックするといいですよ。

エラーメッセージから原因を特定する方法

では、実際にエラーが出たときの対処法を説明しますね。

まず、赤いエラーメッセージをしっかり読むんです。
「Cannot read property ‘textContent’ of null」って書いてあったら、null という何もない値に対して textContentその下に書いてあるファイルと行番号をクリックすると、そのコード部分が表示されます。
そこを見れば、どの要素が取得できてないのか分かるんです。

次のステップは、コンソールで手動でコマンドを実行してみることです。
例えば、document.getElementById('myButton') って直接コンソールに打って Enter キーを押すと、その要素が取得できてるかどうか確認できるんですよ。
null が返ってきたら、その id が存在してないってことになります。

もう一つ大事なのは、コンソールでログを出力することです。
JavaScriptコードに console.log() を埋め込んで、途中経過を見るんです。
例えば変数の値が何になってるか、どこまで実行されたか、そういう情報が分かります。
僕は本当によくこれで原因を特定してますよ。

あとは、エラーメッセージをそのままコピーして Google で検索するのも有効です。
有名なエラーなら、Stack Overflow や GitHub の Issue でその対処法が見つかることもあります。

まとめ

JavaScriptのエラーは、ちゃんとコンソールを読むことでほぼ解決できます。
赤いメッセージを無視したり、「何か動かない」って言ってコンソールを見ないのが一番の NG ですね。
開発者ツールはあなたの最高のパートナーなんです。

エラーが出たら焦らず、まずコンソールを見る。
エラーメッセージをちゃんと読む。
ファイルと行番号をチェックする。
この3つを習慣にすれば、デバッグがめっちゃ早くなりますよ。

失敗は誰にでもあります。
でも、見つけ方を知ってれば、次からは対応が早くなります。
一歩ずつ進んでいってくださいね。