【JavaScript 3-2】よくあるつまずき｜JavaScriptが動かない時の見直し方（初心者向け）

JavaScriptがまったく動かない時は、
まず script.js が読み込まれているかを確認します。

今回のような構成の場合、

javascript-03-02-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/

　　└─ script.js

javascript-03-02-example/

├─ index.html

├─ css/

│  └─ style.css

└─ js/

　　└─ script.js

index.html から見た JavaScript の読み込みは、次の形です。

<script src="js/script.js"></script>

<script src="js/script.js"></script>

console.log は、ページ本文には表示されません。

ブラウザで右クリックして「検証」を開き、
「Console」または「コンソール」タブで確認します。

toshi

画面に出ないから失敗、ではありません。
console.log はコンソールに出る確認用メモです。

JavaScriptがHTMLの要素を見つける時は、
id名がとても大事です。

HTML側が、

<p id="message" class="message">
	ここに表示される文字が変わります。
</p>

<p id="message" class="message">
	ここに表示される文字が変わります。
</p>

なら、JavaScript側も、

const message = document.getElementById("message");

const message = document.getElementById("message");

のように、同じ名前にします。

ボタンを押しても反応しない時は、
クリック処理の中に console.log を入れてみます。

changeButton.addEventListener("click", function() {
  console.log("ボタンが押されました。");
});

changeButton.addEventListener("click", function() {
  console.log("ボタンが押されました。");
});

これでボタンを押した時にコンソールへ表示されれば、
クリック処理までは動いています。

表示されない場合は、

– ボタンのid名が違う
– script.jsが読み込まれていない
– addEventListenerを書く対象が違う

あたりを見直します。

JavaScriptに問題があると、
コンソールに赤いエラーが出ることがあります。

最初は全部読めなくて大丈夫です。

まずは、

– どのファイルで起きているか
– 何行目あたりか
– 何という名前が見つからないのか

を見るだけでも十分です。

前回のように classList.toggle を使う時は、
JavaScript側とCSS側のclass名が合っているか確認します。

JavaScript側が、

notice.classList.toggle("is-hidden");

notice.classList.toggle("is-hidden");

なら、CSS側も、

.is-hidden {
  display: none;
}

.is-hidden {
  display: none;
}

になっている必要があります。

JavaScriptが動かない時は、
下の順番で確認すると落ち着いて見直せます。

• scriptタグのパスは合っているか
• script.js の最初に console.log を入れて表示されるか
• HTML側の id と JavaScript側の getElementById が合っているか
• ボタンの id は合っているか
• addEventListener の中に console.log を入れて反応するか
• コンソールに赤いエラーが出ていないか
• カッコ・引用符・カンマの抜けがないか

toshi

止まった時は、上から順に見れば大丈夫です。
毎回この順番で見直すと、原因を探しやすくなります。

• 動かない時は script.js の読み込みから確認する
• console.log は途中確認に使える
• id名のずれはかなり多いつまずきポイント
• addEventListener の中に処理があるか確認する
• コンソールの赤いエラーは原因を探すヒントになる
• class名のずれも表示切り替えでよく起きる

ここまでできたらOKです。

• JavaScriptが動かない時に見る順番が分かった
• script.js の読み込み確認ができた
• id名のずれを確認できた
• console.log で途中確認ができた
• 次の JavaScript 4-1 に進む準備ができた

今回は、JavaScriptが動かない時の見直し方を整理しました。

次は、
ここまでの内容を使って、
ボタンで表示を切り替えるミニ制作に進みます。

DOM操作、クリック処理、classList を組み合わせて、
小さな動きのあるページを作っていきます。

この記事の内容は、JavaScript 3-2 の一例として zip ファイルを用意しました。

最初はそのまま開いて動きを確認し、
そのあとで id 名や script のパスを少し変えて、
どこで止まるかを見てみると理解しやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-03-02-example.zip
└─ javascript-03-02-example/
　　├─ index.html
　　├─ css/
　　│　└─ style.css
　　└─ js/
　　　　└─ script.js