JavaScriptは動的なWebアプリケーションを構築する上で欠かせない言語ですが、実装ミスによって「無限ループ」を引き起こすと、ブラウザがフリーズしたり、ユーザーのデバイスに過度な負荷をかけたりと、深刻なUXの低下を招きます。

特に大規模なデータを扱うスクリプトや、複雑な非同期処理が絡む実装においては、意図せずループが終了条件を満たさなくなるリスクが常に潜んでいます。

本記事では、無限ループを未然に防ぐための堅実な実装パターンから、万が一ループが発生してしまった際の停止方法、そして原因特定と修正の手順までを詳しく解説します。

目次 [ close ]
  1. 無限ループが発生する主な原因とメカニズム
    1. 終了条件のロジックミス
    2. 再帰関数におけるベースケースの欠如
    3. イベントループと非同期処理の連鎖
  2. 無限ループを回避するための実装パターン
    1. 1. 高階関数の優先利用
    2. 2. 安全カウンター（セーフティリミット）の導入
    3. 3. for...of 文の活用
  3. 非同期処理におけるループの注意点
    1. マイクロタスクの無限ループ
  4. ループ処理の安全性を比較する
  5. 万が一無限ループが発生した際の停止・修正手順
    1. 1. ブラウザのタスクマネージャを利用する
    2. 2. デベロッパーツールの「実行の一時停止」
    3. 3. デバッガステートメントの挿入
  6. フレームワーク環境での無限ループ対策
    1. ReactのuseEffectにおける依存関係
  7. 開発ツールによる未然防止
    1. ESLintの活用
    2. ユニットテストの徹底
  8. まとめ

無限ループが発生する主な原因とメカニズム

JavaScriptにおける無限ループは、繰り返し処理の終了条件が一度も満たされないことによって発生します。

メインスレッドがループ処理に占有されてしまうため、ブラウザは描画やユーザー入力を受け付けることができなくなり、最終的に「応答なし」の状態に陥ります。

終了条件のロジックミス

最も頻繁に見られるのは、while 文や for 文におけるカウンタ変数の更新忘れや、比較演算子の誤用です。

例えば、数値を減算すべきところで加算してしまったり、浮動小数点の計算誤差によって厳密な一致判定 === が成立しなかったりする場合が挙げられます。

再帰関数におけるベースケースの欠如

関数が自分自身を呼び出す「再帰処理」においても、終了条件（ベースケース）が正しく定義されていない、あるいはベースケースに到達する前にスタックオーバーフローを起こすことで、実質的な無限ループ状態となります。

イベントループと非同期処理の連鎖

JavaScriptの非同期処理において、Promise の連鎖や async/await を組み合わせた際に、自分自身を再度スケジュールするような構造になっていると、イベントループが常にタスクを抱え続けることになります。

これは厳密には同期的な無限ループとは異なりますが、メインスレッドの占有率を高め続けるという点では同様の害を及ぼします。

無限ループを回避するための実装パターン

安全なプログラムを書くためには、ループの構造そのものに「防御的」な設計を取り入れることが重要です。

1. 高階関数の優先利用

可能な限り、for や while といった低レイヤーのループ構文を避け、配列のメソッドである map、filter、forEach、reduce などを利用します。

これらのメソッドは配列の要素数に基づいて繰り返し回数が自動的に決定されるため、論理的に無限ループが発生する余地がありません。

JavaScript
// 安全な配列処理の例
const items = [1, 2, 3, 4, 5];
const doubled = items.map(item => {
    // 要素ごとに処理が行われ、必ず終了する
    return item * 2;
});

2. 安全カウンター（セーフティリミット）の導入

複雑なアルゴリズムや、終了条件が外部要因に依存する while ループを記述する場合は、最大反復回数を制限するカウンターを設けるのが有効です。

JavaScript
let iterations = 0;
const MAX_ITERATIONS = 10000; // 安全のための上限設定

while (condition) {
    if (iterations > MAX_ITERATIONS) {
        console.error("無限ループの可能性があるため、処理を強制終了しました。");
        break; 
    }
    
    // 実際の処理
    
    iterations++;
}

3. for…of 文の活用

インデックス（i）を管理する必要がない場合は、for (let i = 0; i < arr.length; i++) よりも for...of を推奨します。

インデックスの増減操作ミスによるバグを構造的に排除できます。

JavaScript
const users = ["Alice", "Bob", "Charlie"];

// インデックス管理が不要なため、無限ループのリスクが極めて低い
for (const user of users) {
    console.log(`Hello, ${user}!`);
}

非同期処理におけるループの注意点

モダンなJavaScript開発では、API連携などのために非同期処理の中でのループが多用されます。

ここでも特有の落とし穴が存在します。

マイクロタスクの無限ループ

Promise.resolve().then() を使って再帰的に関数を呼び出すと、ブラウザの描画プロセス（レンダリング）が実行される前に次のタスクが割り込み続け、画面が固まる原因となります。

これを避けるには、setTimeout などのマクロタスクを利用して、一度ブラウザに制御を戻す必要があります。

JavaScript
// 危険な非同期ループの例
function dangerousAsyncLoop() {
    return Promise.resolve().then(() => {
        // 次のマイクロタスクを即座に予約するため、描画がブロックされる
        return dangerousAsyncLoop();
    });
}

// 安全な非同期ループの例（描画の隙間を作る）
function safeAsyncLoop() {
    setTimeout(() => {
        // マクロタスクとして予約することで、ブラウザの描画を妨げない
        safeAsyncLoop();
    }, 0);
}

ループ処理の安全性を比較する

以下の表は、一般的なループ手法と、その無限ループ発生リスクをまとめたものです。

手法無限ループのリスク主な原因推奨度
while / do…while高い終了条件の未達、カウンタ更新忘れ△（必要な場合のみ）
for (let i=0; …)中カウンタの増減ミス、条件式の誤り○
forEach / map極めて低い要素数が有限であれば必ず終了◎（推奨）
for…of低いイテレータが有限であれば安全◎（推奨）
再帰関数中〜高終了条件（ベースケース）の欠如○（末尾最適化を考慮）

万が一無限ループが発生した際の停止・修正手順

開発中、あるいは本番環境で無限ループが発生してしまった場合、迅速な対応が求められます。

1. ブラウザのタスクマネージャを利用する

ブラウザ全体を閉じるのではなく、特定のタブだけを強制終了させるのが最も効率的です。

  • Google Chrome: Shift + Esc を押してタスクマネージャを起動し、CPU使用率が高いプロセスを選択して「プロセスを終了」をクリックします。
  • Microsoft Edge: 同様に Shift + Esc でタスクマネージャが開きます。
  • Firefox: メニューから「詳細」→「タスクマネージャー」を選択します。

2. デベロッパーツールの「実行の一時停止」

スクリプトがループしていても、Chromeデベロッパーツールの「Sources」パネルにある 「Pause script execution (一時停止)」 ボタン（再生/停止アイコン）を連打することで、処理を止められる場合があります。

止まった箇所を確認すれば、どこがループの原因か一目で分かります。

3. デバッガステートメントの挿入

原因箇所の目星がついている場合は、コード内に debugger; と記述して実行します。

デベロッパーツールを開いている状態でその行に到達すると、自動的に処理が一時停止します。

JavaScript
for (let i = 0; i < 10; i--) { // バグ：iが減り続ける
    if (i < -100) {
        debugger; // ここで止めて変数の状態を確認できる
    }
    console.log(i);
}

フレームワーク環境での無限ループ対策

ReactやVue.jsなどのモダンなライブラリ/フレームワークを使用している場合、言語仕様としてのループ以外にも、「リアクティビティによる無限ループ」に注意が必要です。

ReactのuseEffectにおける依存関係

Reactの useEffect 内で、そのエフェクトの依存配列（dependency array）に含まれている状態を更新すると、「レンダリング → エフェクト実行 → 状態更新 → 再レンダリング」 という無限ループが発生します。

JavaScript
// 危険なコード例
useEffect(() => {
    setCount(count + 1);
}, [count]); // countが変わるたびに実行されるため無限ループになる

これを防ぐには、関数型の更新 setCount(prev => prev + 1) を利用するか、依存関係を正しく整理することが不可欠です。

開発ツールによる未然防止

個人の注意に頼るだけでなく、静的解析ツールを活用して機械的に無限ループを検知・防止する体制を整えましょう。

ESLintの活用

eslint-plugin-react-hooks などのプラグインは、前述した useEffect の不適切な依存関係を警告してくれます。

また、no-unmodified-loop-condition ルールを有効にすれば、ループ内で更新されない条件式を検知できます。

ユニットテストの徹底

ループを含むロジックに対しては、境界値（0、1、最大値、負の数など）を用いたテストケースを用意します。

テストがタイムアウトする場合、そのコードには無限ループの脆弱性が含まれている可能性が高いと判断できます。

まとめ

JavaScriptにおける無限ループは、単純なタイプミスから非同期処理の複雑な連鎖、フレームワークのライフサイクルまで、多岐にわたる要因で発生します。

しかし、「低レイヤーのループを避け、高階関数を活用する」、「安全カウンターを設置する」といった基本的な実装パターンを徹底するだけで、そのリスクは大幅に軽減できます。

万が一発生してしまった際も、ブラウザのタスクマネージャやデベロッパーツールの機能を熟知していれば、迅速に被害を抑え、修正へと移ることが可能です。

コードを書く際は「このループは必ず終わるか？」を常に自問自答し、堅牢なアプリケーション開発を心がけましょう。