JavaScriptが動かないときに見る3か所

CSSと違い、JavaScriptは途中でエラーが起きるとそこで止まります。しかも画面には何も出ません。「押しても何も起きない」という状態からどう詰めるか、順番を決めておきましょう。

1か所目：コンソールに赤い文字が出ていないか

検証ツールを開いて Console タブを見ます。ここが出発点です。赤いエラーが出ていれば、そこに原因が書かれています。よく出るものを挙げます。

• Cannot read properties of null … 要素が見つかっていない。3か所目へ
• is not defined … 名前の綴り違い、または定義より前に使っている
• Unexpected token … 括弧・クォート・波かっこの閉じ忘れ
• 何も出ていない … そもそもファイルが読み込まれていない可能性。2か所目へ

エラーの右端に出るファイル名と行番号をクリックすると、その場所に飛べます。表示された行そのものではなく、その少し前が原因ということもよくあります。

2か所目：ファイルが読み込まれているか

JavaScriptファイルの先頭に、確認用の1行を足します。

console.log("読み込まれました");

これがコンソールに出なければ、書いたコード以前の問題です。script タグの src が間違っている、閉じタグが無い、といったところを疑います。Network タブで script.js が404になっていないかを見るのも確実です。

3か所目：対象がちゃんと取れているか

読み込みは成功していて、エラーが null 系なら、探している要素が見つかっていません。取得した直後に中身を出して確かめます。

const btn = document.getElementById("btn");
console.log(btn); // null なら見つかっていない

null と表示されたら、原因は次のどれかです。

• id や class の綴りがHTML側と違う
• querySelector に渡す文字列でドットやシャープを付け忘れている
• script タグに defer が無く、HTMLを読む前に実行されている

動かない例を、直してみる

下のデモは、わざと動かない状態にしてあります。ボタンを押しても何も起きません。script.js の1行を直すと動くようになります。

それでも分からないとき

処理の途中に console.log を挟んで、どこまで進んでいるかを確かめます。

• 関数の中の先頭に入れる … そもそも呼ばれているかが分かる
• 変数の中身を出す … 想定と違う値が入っていないかが分かる
• 条件分岐の両方に入れる … どちらに進んだかが分かる

地味ですが、この方法がいちばん確実です。「どこまでは動いている」が分かれば、原因はその次の行にあります。