JavaScriptのループのデバッグ方法とよくあるエラー解説！初心者でもわかる原因と対処法
生徒
「先生、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
コードの書き方が間違っている時に出ます。カッコの閉じ忘れや、セミコロンの抜け、文法の誤りなどを確認しましょう。
