JavaScriptが動かない原因と解決方法まとめ 初心者でもすぐ直せるチェックリスト付き

「JavaScriptを書いたのに動かない…」
そんな経験はありませんか？

実は、JavaScriptが動かない原因のほとんどは、よくあるパターンに当てはまります。

この記事では、初心者の方でもすぐに確認できるチェックポイントと解決方法をわかりやすく解説します。

JavaScriptが動かない主な原因

ファイルが読み込まれていない

まず最初に確認すべきポイントです。

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

この記述がないと、JavaScriptは実行されません。

読み込み位置が間違っている

headに書くと、HTMLより先に読み込まれてしまい、動かないことがあります。

▼ 対処方法（コピペOK）

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

または、bodyの閉じタグ直前に書くのがおすすめです。

スペルミス・記述ミス

JavaScriptは小さなミスでも動かなくなります。

• document → docment
• addEventListener のスペルミス

HTMLのクラス名が違う

JavaScriptとHTMLでクラス名が一致していないと動きません。

<div class="menu"></div>

document.querySelector(".menu");

この2つが一致しているか確認しましょう。

CSSだけで完結しているケース

JavaScriptを書かなくても、CSSだけで実装できる場合もあります。

不要なJSを書いていないか確認しましょう。

キャッシュの影響

古いJavaScriptが読み込まれている可能性があります。

• Ctrl + F5で強制リロード
• キャッシュ削除

すぐできるチェックリスト

• scriptタグは書いてあるか
• deferが付いているか
• ファイルパスは正しいか
• スペルミスはないか
• クラス名は一致しているか

初心者におすすめの書き方

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

この書き方にしておけば、読み込み順の問題を防げます。

まとめ

JavaScriptが動かない原因は、ほとんどが基本的なミスです。

• 読み込みミス
• スペルミス
• クラス名の不一致

この3つをチェックすれば、多くの問題は解決できます。