先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでループを書いたんですが、思った通りに動きません。どうやって直せばいいか分からなくて…」

先生

「それはよくあることですよ。ループのデバッグ方法と、よくあるエラーの原因を理解すると、問題を早く見つけて直せるようになります。」

生徒

「デバッグって何ですか？どうやってやるんですか？」

先生

「デバッグとは、プログラムの間違い（バグ）を見つけて直す作業のことです。ループは繰り返し処理なので間違いに気づきにくいですが、手順を踏めば簡単に解決できますよ。」

1. JavaScriptのループデバッグの基本

まず、ループの中で何が起きているかを知ることが大切です。JavaScriptでは、console.log()という命令を使って、ループの中の変数や処理の結果を画面に表示できます。これを「ログを出す」と言います。

例えば、以下のように書くと、ループの回数と配列の値を確認できます。


const fruits = ["りんご", "バナナ", "みかん"];

for (let i = 0; i < fruits.length; i++) {
  console.log("ループ回数：" + i + "、値：" + fruits[i]);
}

このように書くと、ループが何回まわっているか、どんな値が処理されているかがわかります。問題の原因を探す手助けになります。

2. よくあるループのエラーとその意味

初心者がループでよく遭遇するエラーと、その原因を解説します。

2-1. 無限ループになる

ループの条件がずっと真（true）になってしまい、処理が終わらずに動き続けることを「無限ループ」と言います。パソコンが固まったり、ブラウザがフリーズすることがあります。

例えば、iの値を増やすコードを書き忘れると、条件が変わらずにループが続きます。


let i = 0;
while (i < 5) {
  console.log(i);
  // iを増やす処理がないので無限ループになる
}

解決方法は、ループ内でカウンター変数（ここではi）を必ず増やすことです。

2-2. 配列の範囲外をアクセスする（IndexError）

配列の存在しない番号（インデックス）を指定すると、undefined（値がない状態）が返ってきます。表示や計算でエラーになることがあります。


const arr = [10, 20, 30];
console.log(arr[3]); // undefined（存在しない番号）

ループの条件が配列の長さより大きくなると、範囲外をアクセスしてしまうため注意しましょう。

2-3. 変数の宣言ミスやスペルミス

変数名を間違えて書くと、エラーや予期しない動きが起きます。例えば、iをjと書いてしまったり、配列名を間違えることです。


for (let i = 0; i < 3; i++) {
  console.log(fruits[i]); // fruitsが定義されていないとエラーになる
}

変数名は正確に書くことが大切です。

3. ブラウザの開発者ツールを使ったデバッグ

JavaScriptのデバッグに便利なのが「ブラウザの開発者ツール」です。これはGoogle ChromeやFirefoxなどのブラウザに標準でついている機能で、コードの動きを詳しく調べられます。

開発者ツールは、キーボードのF12キーや、ブラウザのメニューから開けます。

特に使いたいのが「デバッガー機能」です。ここでは、コードの途中で処理を止めて変数の中身を確認できます。breakpoint（ブレークポイント）を設定してループの動きを一歩ずつ見られます。

簡単に使う方法：

開発者ツールを開く（F12キーなど）
「Sources（ソース）」タブを選択
デバッグしたいJavaScriptファイルを開く
ループの行番号をクリックしてブレークポイントをセット
ページをリロードすると、ループがブレークポイントで止まるので変数の値を確認

4. デバッグのためのおすすめテクニック

デバッグを楽にするためのポイントをいくつか紹介します。

小さく動く部分に分ける：ループの中で一度に多くの処理をせず、まずは簡単なログ出力だけにして動作確認をしましょう。
変数の値を必ず確認する：特にループのカウンターや配列の長さをconsole.log()でチェックすると間違いを見つけやすいです。
コメントアウトで原因を切り分ける：コードの一部を一時的に動かさないようにして問題の箇所を絞ります。
ネットでエラーメッセージを検索する：エラー文をそのまま検索すると解決方法が見つかることが多いです。

5. よくあるJavaScriptループのエラーメッセージ例

最後に、初心者がよく見るエラーメッセージと簡単な説明を紹介します。

5-1. ReferenceError: ○○ is not defined

「○○が定義されていません」という意味で、変数名のタイプミスや、変数の宣言がない時に出ます。

5-2. TypeError: Cannot read property '○○' of undefined

存在しないものにアクセスしようとしたときに出ます。配列の範囲外アクセスや、オブジェクトのプロパティ名の間違いなどが原因です。

5-3. SyntaxError: Unexpected token

コードの書き方が間違っている時に出ます。カッコの閉じ忘れや、セミコロンの抜け、文法の誤りなどを確認しましょう。

JavaScriptのループのデバッグ方法とよくあるエラー解説！初心者でもわかる原因と対処法