このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】無限ループ

無限ループ

　JavaScript の繰り返し文（for, while など）は、通常は 終了条件 を設定して適切に終わらせるのが基本です。しかし、もし終了条件を誤ったり、条件を満たさないままだったりすると、無限ループ という状態が発生します。無限ループに陥ると、プログラムが永遠に処理を続けるため、そのページ（ブラウザタブ）の CPU 使用率が非常に高くなり、動作不能となるなどの問題を起こす場合があります。

１．無限ループとは

　本来「一定の条件を満たすまで繰り返す」ことを想定している繰り返し処理で、条件が常に真（true） となるか、条件が変化しない、あるいは 更新処理が行われない といった誤りによって、延々と続くループのことを指します。たとえば while(true) {} のように常に true な条件式を書けば、明らかに無限ループです。

２．無限ループの例

以下は while(true) を使った非常に単純な無限ループの例です。

【myInfiniteLoopExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myInfiniteLoopExample.html</title>
</head>
<body>
  <h1>無限ループのサンプル</h1>
  <p>開発者ツールを開き、実行するとブラウザが応答しなくなる場合があります。注意してください。</p>

  <script>
    // 1) 危険な無限ループの例
    // 実行するとループが終了しないので、ブラウザを強制終了するしかなくなります。
    // 実際にはコメントアウトしておくことを推奨
    /*
    while (true) {
      // 処理の記述がないのでCPUを延々と消費し続ける
    }
    */

    // 2) 見落としがちな無限ループ例
    let i = 0;
    // 意図：iが5未満の間ループ ⇒ 実際：iの値が増えないので永遠にi<5がtrue
    while (i < 5) {
      console.log('i=', i);

      // 以下のi++を書き忘れ
      // i++; ← これがないためiは0のまま
    }

    // この行まで到達しない
    console.log('この行は表示されません');
  </script>
</body>
</html>

解説

  • コメントアウトされている while (true) {} は典型的な無限ループの書き方です。
  • 2番目の例では、本来 i++ で i を増やすはずが記述を忘れ、結果として条件式 i < 5 が永遠に true となり抜け出せなくなります。

３．ブラウザが無限ループに陥った場合

Google Chrome などで無限ループが起きると、そのタブがフリーズしたような状態になります。対処としては、

  • 該当タブを閉じる。
  • ブラウザのタスクマネージャを使ってタブを終了する。
  • コードを直して再読み込みする。
    などがあります。

まとめ

  • 無限ループ は終了条件を設定し忘れる、または更新ロジックを誤るなどで発生し、プログラムをフリーズさせる可能性がある。
  • ブラウザ環境では、そのタブを閉じたり停止したりしない限り延々とCPUを消費し続ける。
  • デバッグ中に無限ループが疑われる場合は、ループの初期化・条件式・更新処理を再確認し、必要ならデバッグ出力（console.log など）を入れて動きを確認するとよい。

　このように、繰り返し処理を扱うときは終了条件をしっかりと設計することが重要です。無限ループを防ぐために、手動で break を挟むなどの工夫もあわせて行いましょう。