JavaScriptで無限ループが起きた時の止め方と原因別対処法

JavaScriptの開発を進めている中で、コードを実行した瞬間にブラウザのタブが反応しなくなり、パソコンのファンが激しく回り始めた経験は誰にでもあるはずです。

これは「無限ループ」と呼ばれる現象で、プログラムの終了条件が満たされないために、CPUが永遠に計算を繰り返してしまう状態を指します。

2026年現在のモダンなブラウザ環境では、特定のタブがフリーズしてもシステム全体がクラッシュすることは少なくなりましたが、依然として開発者にとって厄介なトラブルであることに変わりはありません。

本記事では、まずパニックにならずに現在進行中の無限ループを強制終了させる方法を詳しく解説します。

その上で、無限ループが発生する典型的な原因パターンと、それを未然に防ぐためのプロフェッショナルなコーディング手法を紹介します。

この記事を最後まで読めば、JavaScriptの実行制御に関する深い理解が得られ、万が一の際にも冷静に対処できるようになるでしょう。

暴走したJavaScriptを今すぐ止める方法

無限ループが発生すると、通常のボタンクリックやスクロール操作が一切受け付けられなくなります。

このような状況で最も避けるべきなのは、パソコンの電源ボタンを長押しして強制終了することです。

実行環境に応じた適切な手順を踏むことで、被害を最小限に抑えながらプログラムを停止させることが可能です。

ブラウザ環境（Chrome, Edge, Safari）での停止手順

Google ChromeやMicrosoft EdgeなどのChromium系ブラウザでは、タブごとにプロセスが分離されています。

そのため、問題が発生しているタブだけを狙い撃ちして停止させることができます。

最も確実な方法は、ブラウザ独自のタスクマネージャーを起動することです。

Windowsの場合は「Shift + Esc」、macOSの場合は「ウィンドウ」メニューから「タスク マネージャ」を選択してください。

一覧の中からCPU使用率が異常に高くなっているタブを選択し、「プロセスの終了」ボタンをクリックします。

これで、ブラウザ全体を閉じることなく、問題のコードだけを安全に停止できます。

Safariの場合は、macOS標準の「アクティビティモニタ」を使用して、「Safari Web表示」プロセスを強制終了する必要があります。

Node.js、Deno、Bunなどのサーバーサイド環境

ターミナル（コマンドプロンプト）上でスクリプトを実行している場合は、さらに単純な操作で停止できます。

「Ctrl + C」をキーボードで入力することで、実行中のプロセスに中断信号を送ることができます。

もし一度の入力で止まらない場合は、連続して数回入力してみてください。

それでも反応がない場合は、別のターミナルを開いてプロセスID（PID）を確認し、killコマンドを実行します。

# Node.jsプロセスを探して停止する例
ps aux | grep node
kill -9 [プロセスID]

無限ループが発生する主な原因と具体的なコード例

無限ループを止める方法を知ることも重要ですが、原因を理解して再発を防ぐことがエンジニアとしての成長に繋がります。

ここでは、JavaScriptで頻発する無限ループの典型例を見ていきましょう。

1. 更新式の記述漏れ

while文を使用する際、ループ内でカウンタ変数を更新し忘れるミスが非常に多いです。

let i = 0;
while (i < 10) {
  console.log("ループ中...");
  // i++; を書き忘れると、iは永遠に0のままとなり無限ループになる
}

このコードでは、変数 i が常に 10 未満であるため、条件式が常に true を返し続けます。

2. 終了条件のロジックミス

数値の比較条件を誤ると、意図したタイミングでループが終了しません。

for (let i = 10; i > 0; i++) {
  console.log("カウントアップ中...");
  // iを増やし続けているため、i > 0 は常に真となる
}

上記の例では、正の数に対して ++（インクリメント）を続けているため、数値がオーバーフローしない限り条件式が偽になることはありません。

3. 再帰関数のベースケース欠如

関数が自分自身を呼び出す「再帰」において、終了条件（ベースケース）を定義し忘れるとスタックオーバーフローを引き起こします。

function countdown(n) {
  console.log(n);
  return countdown(n - 1); // 終了条件がないため、メモリを使い果たすまで続く
}

現代のJavaScriptエンジンでは、このような深い再帰は「Maximum call stack size exceeded」というエラーで停止しますが、環境によってはブラウザをフリーズさせる要因となります。

2026年における最新の予防策と安全な設計

開発段階で無限ループを未然に防ぐためのテクニックは、2026年現在さらに高度化しています。

単なる注意不足を責めるのではなく、仕組みで解決するアプローチを取り入れましょう。

イテレーション上限（セーフガード）の実装

複雑なアルゴリズムを実装する場合、予期せぬ入力値によってループが止まらなくなるリスクがあります。

安全策として、最大ループ回数をあらかじめ設定しておく手法が推奨されます。

const MAX_ITERATIONS = 10000;
let count = 0;

while (checkCondition()) {
  count++;
  if (count > MAX_ITERATIONS) {
    console.error("無限ループの可能性があるため強制終了しました");
    break;
  }
  // 本来の処理
}

このように、あらかじめ「これ以上繰り返すはずがない」という閾値を設けることで、致命的なクラッシュを回避できます。

Web Workerによる処理の分離

重い計算処理を行う場合、メインスレッド（UIを操作するスレッド）で実行すると、無限ループ時に画面が完全に固まってしまいます。

Web Workerを利用してバックグラウンドで処理を実行すれば、もし計算が暴走してもユーザーインターフェースは応答を維持できます。

メインスレッドから worker.terminate() を呼び出すだけで、バックグラウンドの暴走処理を即座に消去することが可能です。

デバッグを効率化するためのツール活用

開発ツールの機能を使いこなすことで、無限ループの兆候を早期に察知できます。

特にブラウザのデベロッパーツールにある「Performance」タブを活用すると、どの関数がCPUを占有しているかを詳細に特定できます。

また、最新のIDE（VS Codeなど）では、実行時間が一定時間を超えた場合に警告を出す拡張機能も存在します。

フレームワーク固有の無限ループに注意

ReactやVue.jsといったモダンなフロントエンドフレームワークでは、独自の仕組みによる無限ループが発生しがちです。

例えばReactの useEffect フックにおいて、依存配列（Dependency Array）に自分自身が更新するステートを含めてしまうパターンです。

useEffect(() => {
  setCount(count + 1); // 状態を更新
}, [count]); // 更新されたcountを検知して再度useEffectが走る

このようなループは、ブラウザをフリーズさせるだけでなく、APIへの大量リクエストを発生させるリスクもあるため、ESLintのルール（react-hooks/exhaustive-depsなど）を必ず有効にして機械的にチェックすべきです。

まとめ

JavaScriptの無限ループは、開発者にとって避けられない課題の一つですが、正しい知識があれば決して怖いものではありません。

万が一発生してしまった場合は、ブラウザのタスクマネージャーやターミナルの「Ctrl + C」を落ち着いて活用しましょう。

そして、コードを書く際には「終了条件が確実に満たされるか」を常に意識し、必要に応じてセーフガードを導入する習慣を身につけてください。

2026年の開発環境では、Web Workerや静的解析ツールなど、私たちをサポートしてくれる技術が数多く存在します。

これらのツールを味方につけて、安全で快適なJavaScript開発を続けていきましょう。