JavaScript 📅 2026年5月12日 🔄 更新: 2026-05-12 ⏱ 9分で読めます

JavaScriptが動かない時のチェックリスト10項目【初心者向け】

JavaScriptが動かない時に確認すべき10項目を初心者向けに解説。よくある原因と解決方法をチェックリスト形式で紹介。中高生向け。無料。

2026年5月12日

JavaScriptが動かない？10項目をチェック

「コードを書いたのに何も起きない」「エラーが出てどこが悪いかわからない」——JavaScript初心者が最もよく遭遇する問題です。

安心してください。原因はほぼ決まったパターンに絞られます。この記事では、よくある10個の原因と解決方法を順番に解説します。

JavaScriptで最初のコードを書こうを読んだ人が次につまずくポイントを解説します。

まず最初にやること：コンソールを開く

JavaScriptのエラーはコンソール（Console）に表示されます。コンソールを開く方法は以下のとおりです。

  • Windows：F12キーを押す → 「Console」タブをクリック
  • Mac：Command + Option + J を押す
  • どちらでも：ページを右クリック → 「検証」または「Inspect」→ 「Console」タブ

赤いエラーメッセージが出ていれば、そこに原因のヒントが書いてあります。エラーメッセージを英語で読むのが難しければ、そのままコピーしてGoogle翻訳にかけてみましょう。

💡 エラーメッセージの読み方

エラーメッセージには「ファイル名：行番号」が書かれています。たとえば script.js:15 と書いてあれば、script.js の15行目に問題があります。その行周辺を確認しましょう。

チェックリスト10項目

1. コンソールにエラーが出ていないか

F12→Consoleタブを確認。赤いエラーメッセージがあれば、そこに原因が書いてある。エラーを無視して進まず、必ずエラーメッセージを読んでから対処しましょう。

2. scriptタグの位置は正しいか

</body> の直前に書いているか確認。headに書くとDOMが読み込まれる前にJavaScriptが実行されるため、HTMLの要素を取得できずエラーになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>テスト</title>
    <!-- ❌ NG: headに書くとDOMが読み込まれる前に実行される -->
    <!-- <script src="script.js"></script> -->
  </head>
  <body>
    <button id="btn">クリック</button>

    <!-- ✅ OK: </body>の直前に書く -->
    <script src="script.js"></script>
  </body>
</html>

3. ファイルパスは正しいか

外部JSファイルの場合、src="script.js" のパスが正しいか確認。大文字/小文字も区別されます。たとえば src="Script.js" と src="script.js" は別ファイルとして扱われます。

4. 変数名・関数名のスペルミスはないか

getElementById の大文字小文字、変数名のタイポを確認。1文字違うだけで動きません。よくある間違いパターンを確認しましょう。

// ❌ よくあるスペルミスの例
document.getElementByid("btn");    // ← id が小文字になっている（正しくはId）
document.getElementById("Btn");   // ← HTML側は id="btn" なのに大文字Bになっている
addeventlistener("click", fn);    // ← addEventListener の大文字小文字が違う

// ✅ 正しい書き方
const btn = document.getElementById("btn");
btn.addEventListener("click", fn);

5. IDやclass名は一致しているか

HTMLの id="btn" とJSの getElementById("btn") が完全一致しているか確認。大文字・小文字の違いも別物として扱われます。

6. セミコロンやカッコの閉じ忘れはないか

波カッコ {}、丸カッコ ()、角カッコ [] の数が合っているか確認。VS Codeの括弧ハイライト機能（対応する括弧がハイライトされる）を活用しましょう。

7. イベントリスナーは正しく登録されているか

addEventListener("click", 関数名) で関数名に () をつけていないか確認。() をつけると「関数を登録する」のではなく「その場で実行してしまう」ことになります。

// ❌ NG: 関数名に()をつけると、登録した瞬間に実行されてしまう
button.addEventListener("click", handleClick());  // ← ()はつけない！

// ✅ OK: 関数名だけを渡す
button.addEventListener("click", handleClick);

// ✅ OK: アロー関数で書く場合
button.addEventListener("click", () => {
  console.log("クリックされました！");
});

8. 変数のスコープは正しいか

関数の中で宣言した変数（let・const）は、その関数の外からアクセスできません。「変数を定義したはずなのに使えない」というときは、スコープ（変数が使える範囲）を確認しましょう。

// ❌ NG: 関数の中で宣言した変数は外から使えない
function calculate() {
  let answer = 42;
}

console.log(answer); // エラー！ answer は defined されていない

// ✅ OK: 外で使いたい変数は外で宣言する
let answer;

function calculate() {
  answer = 42;
}

calculate();
console.log(answer); // 42

9. ファイルは保存されているか

VS Codeのタブに ● がついていたら未保存の状態です。Ctrl+S（Mac: Command+S）で保存してからブラウザをリロードしましょう。「直したのに変わらない」の多くは保存忘れです。

10. ブラウザのキャッシュが残っていないか

Ctrl+Shift+R（Mac: Command+Shift+R）で強制リロード。古いJSファイルがキャッシュ（ブラウザが保存したデータ）されていると、修正が反映されないことがあります。

デバッグの基本手順

デバッグ（debug）とは、プログラムのバグ（エラーや不具合）を見つけて修正することです。効率よくデバッグするための基本手順を覚えましょう。

  1. F12でConsoleタブを開く
  2. エラーメッセージを読む（ファイル名と行番号を確認）
  3. 該当行の前後に console.log を入れて値を確認
  4. 「ここまでは動いている」を特定する
  5. 問題の箇所が特定できたら修正する
// デバッグの定番パターン
function checkAge(age) {
  console.log("checkAge 開始, age =", age);  // ← ここから始まるか確認

  if (age >= 18) {
    console.log("成人です");                 // ← ここに来るか確認
    return "成人";
  } else {
    console.log("未成年です");               // ← それともここか確認
    return "未成年";
  }
}

let result = checkAge(15);
console.log("結果:", result);

console.logを使った確認が最も基本的なデバッグ方法です。「どこまで動いているか」を一つずつ確認していきましょう。

よくあるエラーメッセージの意味

Uncaught ReferenceError: xxx is not defined

xxx という変数や関数が定義されていません。スペルミスか、まだ定義していないのに使おうとしている可能性があります。

Uncaught TypeError: Cannot read properties of null

存在しないHTML要素を取得しようとしています。IDやクラス名のミス、またはscriptタグがbodyより前にあることが多いです。

Uncaught SyntaxError: Unexpected token

JavaScriptの文法エラーです。カッコの閉じ忘れ、セミコロンの抜け、クォーテーションマークの対応ミスなどが原因です。エラーメッセージに書かれている行番号を確認しましょう。

console.logを使いこなそう

デバッグで最もよく使うのが console.log() です。変数の値を確認したり、「ここまで動いているか」を確かめたりするのに使います。

// console.logで値を確認する
let num = 5;
console.log(num); // → 5 が表示される

// 計算の途中結果を確認
let result = num * 2;
console.log("計算結果:", result); // → 計算結果: 10

// 関数が呼ばれているか確認
function greet() {
  console.log("greet関数が呼ばれました！");
}
greet();

プログラムが完成したら、デバッグ用のconsole.logは削除するか、コメントアウト（//を先頭につける）しましょう。

エラーメッセージの読み方で読み方を学べます。DOM操作入門で要素の取得方法を復習。変数入門でスコープを確認。VS Code Live Serverで自動リロード環境を整えましょう。

まとめ

  • ✅ まずF12→Consoleでエラーを確認
  • ✅ scriptタグは </body> の直前に
  • ✅ スペルミスと大文字/小文字を確認
  • ✅ addEventListener に渡す関数名に () をつけない
  • ✅ ファイルを保存してから確認（タブに●がないか）
  • ✅ Ctrl+Shift+Rで強制リロード
  • ✅ console.logで値を確認しながら原因を探す

あわせて読みたい記事

⚡ JavaScriptの基礎を学ぼう！

エラーを恐れずにコードを書く力を身につけましょう。完全無料・登録不要。

JavaScriptレッスン1を始める →
目次

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

関連記事

JavaScript

JavaScriptのボタンが動かない！初心者がハマる原因と直し方

JavaScriptでボタンをクリックしても動かない原因と直し方を初心者向けに解説。スクリプトの読み込み順・セレクタの間違い・イベント名のtypoなど、よくある原因6つをコード例付きで紹介。中高生向け。無料。

 JavaScript

JavaScript練習問題｜初心者向け無料ドリル30問

JavaScriptの練習問題30問。変数・条件分岐・関数・DOM操作の知識を選択・入力・穴埋めで確認。中高生向け。無料。

 JavaScript

JavaScriptとは？初心者向けにわかりやすく解説【中高生向け】

JavaScriptの基本をゼロから解説。ボタンクリックで動くページの作り方を説明します。

この記事に出てくる用語

𝕏 シェア LINE シェア

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

JavaScriptが動かない時に確認すべき10項目を初心者向けに解説。よくある原因と解決方法をチェックリスト形式で紹介。中高生向け。無料。

出典: https://start-web-programming.com/blog/javascript-not-working-checklist/