JavaScriptが動かない？3分で解決！初心者が陥る5つの原因と対処法完全ガイド
こんにちは、とまだです。
「JavaScriptのコード書いたのに、なんで動かないの？」
そんな経験、ありませんか？
私もプログラミングを始めたばかりの頃、何度も同じ壁にぶつかりました。 コードは合ってるはずなのに、画面は真っ白。 エラーメッセージを見ても、英語ばかりで何が何だか...。
でも大丈夫です。
実はJavaScriptが動かない原因って、ほとんどが同じパターンなんです。
今回は、初心者の方が最も陥りやすい「JavaScript動かない問題」を、たった3分で解決する方法をお伝えします。
まず最初に確認！JavaScriptが動かない時の黄金ルール
JavaScriptが動かない時、パニックになる前に深呼吸。
そして、この順番で確認してみてください。
- ブラウザの開発者ツールを開く（F12キー）
- Consoleタブでエラーを確認
- エラーメッセージをよく読む
これだけで、問題の8割は解決への道筋が見えてきます。
でも「開発者ツールとは？」という方も多いですよね。
簡単に言うと、ブラウザに標準で入っている「エラーを教えてくれる先生」みたいなものです。
開発者ツールの開き方（たった1秒）
Windows/Linux: F12キー または Ctrl + Shift + I Mac: Command + Option + I
もしくは、ページ上で右クリック → 「検証」でもOKです。
開いたら「Console」というタブをクリック。 ここに赤い文字でエラーが表示されていたら、それが動かない原因です。
JavaScriptが動かない5大原因と3分で直す方法
ここからは、実際によくある原因と解決法を見ていきましょう。
原因1：スペルミス・タイプミス（全体の40%）
症状:
Uncaught ReferenceError: documnet is not defined
これ、実はdocumentをdocumnetと間違えているだけ。
3分で解決:
// ❌ 間違い
documnet.getElementById('test');
// ✅ 正解
document.getElementById('test');
よくあるスペルミスTOP3:
getElmentById→getElementById（eが抜けてる）addEventListner→addEventListener（eが抜けてる）innerHtml→innerHTML（大文字小文字の違い）
原因2：読み込み順序の問題（全体の30%）
HTMLがまだ読み込まれていないのに、JavaScriptが実行されちゃってる状態です。
症状:
Uncaught TypeError: Cannot read property 'addEventListener' of null
3分で解決:
方法1：scriptタグを</body>の直前に移動
<!-- ❌ 間違い -->
<head>
<script src="script.js"></script>
</head>
<body>
<button id="myButton">クリック</button>
</body>
<!-- ✅ 正解 -->
<body>
<button id="myButton">クリック</button>
<script src="script.js"></script>
</body>
方法2：DOMContentLoadedを使う
// すべて読み込まれてから実行
document.addEventListener('DOMContentLoaded', function() {
// ここにコードを書く
});
原因3：ライブラリの読み込み忘れ（全体の15%）
jQueryなどのライブラリを使っているのに、読み込んでいない状態です。
症状:
Uncaught ReferenceError: $ is not defined
3分で解決:
HTMLの<head>内に追加
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
読み込む順番も大事！
- まずjQuery本体
- その後に自分のJavaScript
原因4：セミコロンや括弧の閉じ忘れ（全体の10%）
プログラムの「句読点」を忘れている状態です。
症状:
Uncaught SyntaxError: Unexpected end of input
3分で解決: VS Codeなどのエディタを使えば、自動で教えてくれます。
// ❌ 間違い
function test() {
console.log('テスト'
// }が足りない！
// ✅ 正解
function test() {
console.log('テスト');
}
原因5：全角スペースの混入（全体の5%）
見た目では分からない、やっかいな敵です。
症状:
Uncaught SyntaxError: Invalid or unexpected token
3分で解決: エディタで「全角スペース」を検索（Ctrl+F）して、半角に置換。
特にコピペしたコードに紛れ込みやすいので要注意！
それでも動かない時の必殺技
1. console.logで生存確認
コードが実行されているか確認する、最もシンプルな方法です。
console.log('ここまで来た！');
// 要所要所に入れて、どこで止まっているか確認
2. ブラウザのキャッシュをクリア
古いJavaScriptが残っている可能性があります。
Windows/Linux: Ctrl + Shift + R Mac: Command + Shift + R
3. 別のブラウザで試す
ChromeでダメならFirefoxで。 ブラウザ特有の問題かもしれません。
エラーメッセージ完全攻略ガイド
エラーメッセージは英語だけど、パターンを覚えれば怖くありません。
よく見るエラーメッセージ解読表
| エラーメッセージ | 意味 | 対処法 |
|---|---|---|
○○ is not defined |
○○という変数/関数が見つからない | スペルミスか読み込み順序を確認 |
Cannot read property '○○' of null |
存在しない要素の○○を読もうとしている | HTMLに該当要素があるか確認 |
○○ is not a function |
○○は関数じゃないのに()をつけて呼んでる | 変数名と関数名の混同を確認 |
Unexpected token ○○ |
予期しない文字○○がある | 全角スペースや記号を確認 |
プロからのアドバイス：エラーと仲良くなろう
エラーは敵じゃありません。 むしろ「ここが間違ってるよ」と教えてくれる、親切な先生です。
私も最初は英語のエラーメッセージを見るたびに萎えていました。 でも、同じエラーを何度も見ているうちに「あ、またこれか」と分かるようになります。
エラーが出たら、こう考えてみてください。
「よし、また一つ賢くなるチャンスだ」
まとめ：JavaScript動かない問題は必ず解決できる
今回紹介した5つの原因で、初心者の方が遭遇するエラーの9割以上はカバーできます。
おさらい:
- スペルミス → よく見直す
- 読み込み順序 → scriptタグは最後に
- ライブラリ忘れ → jQueryなどを読み込む
- 括弧忘れ → エディタの力を借りる
- 全角スペース → 検索して置換
それでも解決しない場合は、エラーメッセージをそのままGoogleで検索してみてください。 同じ問題で悩んだ人が、必ず解決策を残してくれています。
もし、基礎からしっかりJavaScriptを学びたいという方は、Learning NextのJavaScript講座もチェックしてみてください。
エラーが出やすいポイントを事前に解説しているので、つまずきにくい構成になっています。
JavaScriptのエラーは、誰もが通る道。 今日のエラーは、明日の成長の糧です。
一緒に頑張りましょう！
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →