JavaScript Maximum call stack size exceeded の原因と解決方法【再帰処理とイベントループの落とし穴】

Uncaught RangeError: Maximum call stack size exceeded とは

JavaScript開発中に「Uncaught RangeError: Maximum call stack size exceeded」というエラーに遭遇したことはありませんか？このエラーは、主に再帰処理が終了せず無限ループに陥ったり、イベントハンドラが予期せず自身を繰り返し呼び出したりするときに発生します。ブラウザやNode.jsの実行環境が許容するコールスタックの最大深度を超えた場合に、プログラムがクラッシュしてしまいます。

エラーの発生パターン

このエラーは主に以下のようなケースで発生します。

パターン1: パターン1: 終了条件のない無限再帰

function infiniteRecursion() {
  infiniteRecursion(); // 終了条件がないため、自身を無限に呼び出す
}
infiniteRecursion();

再帰関数が 終了条件を持たないか、設定された終了条件が満たされない場合に、関数が自身を際限なく呼び出し続け、コールスタックが溢れてしまいます。

function countdown(n) {
  if (n < 0) { // 終了条件を定義
    return;
  }
  console.log(n);
  countdown(n - 1);
}
countdown(10000);

パターン2: パターン2: イベントリスナーの無限ループ

Click Me

DOMイベントハンドラ内で、イベントハンドラ自身がイベントを再トリガーするような処理が書かれている場合に発生します。特に `element.click()` や `element.dispatchEvent` の使用時に注意が必要です。

Click Me

パターン3: パターン3: 深すぎるデータ構造の再帰処理

const deepObject = {};
let current = deepObject;
for (let i = 0; i < 20000; i++) {
  current.child = {};
  current = current.child;
}

function processDeepObject(obj) {
  if (obj.child) {
    processDeepObject(obj.child);
  }
}
processDeepObject(deepObject);

処理対象のデータ構造が極端に深い場合、たとえ正確な終了条件があっても、再帰の深さがコールスタックの限界を超えてしまうことがあります。特に大きなツリー構造の走査などで発生しやすいです。

const deepObject = {};
let current = deepObject;
for (let i = 0; i < 20000; i++) {
  current.child = {};
  current = current.child;
}

function processDeepObjectIterative(obj) {
  let stack = [obj];
  while (stack.length > 0) {
    const currentObj = stack.pop();
    // console.log(currentObj); // 実際の処理
    if (currentObj.child) {
      stack.push(currentObj.child);
    }
  }
}
processDeepObjectIterative(deepObject);

根本原因の特定方法

このエラーが発生した場合、ブラウザの開発者ツールやNode.jsのデバッガーを使用してコールスタックを確認することが最も効果的です。開発者ツールの「Sources」タブなどでブレークポイントを設定し、無限に呼び出されている関数や、スタックトレースのどこでループが発生しているかを特定します。特に、同じ関数名がスタックトレースに繰り返し現れている場合は、無限再帰の兆候です。

function debugMe(n) {
  // ここにブレークポイントを設定
  if (n < 0) return;
  console.log(n);
  debugMe(n - 1);
}
debugMe(100000); // 意図的にスタックオーバーフローを発生させる可能性のある数

防止策とベストプラクティス

再帰関数を記述する際は、{marker}必ず明確な終了条件を定義{/marker}し、その条件が確実に満たされることを確認してください。また、再帰の深さが非常に深くなる可能性のある処理では、再帰をイテレーション（ループ）に置き換えるか、`setTimeout(func, 0)` などを使用して非同期的に処理をキューに入れることで、コールスタックをクリアし、スタックオーバーフローを回避できます。

// イテレーションによる置き換え例
function factorialIterative(n) {
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}
console.log(factorialIterative(5000));

// 非同期処理によるスタッククリア例 (ただし、処理順序に注意)
function processLargeArrayAsync(arr, index = 0) {
  if (index >= arr.length) {
    console.log('Finished processing array.');
    return;
  }
  // 実際の処理
  console.log(`Processing item ${index}: ${arr[index]}`);

  setTimeout(() => {
    processLargeArrayAsync(arr, index + 1);
  }, 0); // スタックをクリアし、次のイベントループで実行
}
// processLargeArrayAsync(Array.from({ length: 100000 }, (_, i) => i));

よくある質問（FAQ）

この用語と一緒に知っておきたい用語

このエラーと一緒にしっておきたいエラー