JavaScript RangeError: Maximum call stack size exceeded の原因と解決方法【無限ループと再帰処理の落とし穴】

RangeError: Maximum call stack size exceeded とは

JavaScript開発中に、ブラウザやNode.jsが突然応答停止し、「RangeError: Maximum call stack size exceeded」というエラーに遭遇したことはありませんか？これは、プログラムが無限ループに陥ったり、再帰関数が深すぎる呼び出しを繰り返したりした際に発生する、JavaScriptエンジニアなら誰もが一度は経験するエラーです。この記事では、このエラーの原因を深掘りし、具体的な解決策を豊富なコード例と共に解説します。

エラーの発生パターン

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

パターン1: パターン1: 再帰関数の終了条件の欠如または誤り

function factorial(n) {
  // 終了条件がないため、nが0以下になっても再帰が止まらない
  return n * factorial(n - 1);
}

console.log(factorial(5)); // RangeError: Maximum call stack size exceeded

再帰関数では、必ず終了条件（ベースケース）を定義し、その条件に到達するように引数が変化しなければなりません。この例では、`n` が `0` 以下になった場合の停止条件がないため、関数が無限に自身を呼び出し続け、コールスタックが溢れてしまいます。

function factorial(n) {
  // nが0または1の場合に再帰を停止する終了条件
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 出力: 120 (正しく計算される)

パターン2: パターン2: イベントリスナーの無限連鎖

const button = document.getElementById('myButton');
const output = document.getElementById('output');

button.addEventListener('click', () => {
  output.textContent = 'ボタンがクリックされました！';
  // クリックイベント内で、再びクリックイベントを発火させてしまう
  // これにより、イベントが無限に連鎖する
  button.click(); 
});

DOMイベントのハンドラ内で、同じイベントを再帰的にトリガーしてしまうと、無限ループが発生し、コールスタックが枯渇します。特に、ユーザー操作やDOM変更をトリガーとするイベントを扱う際には注意が必要です。

const button = document.getElementById('myButton');
const output = document.getElementById('output');

button.addEventListener('click', () => {
  // イベント発火を再帰的に行わない
  output.textContent = 'ボタンがクリックされました！';
  console.log('ボタンクリック処理完了');
});

// 意図的にボタンをクリックさせたい場合は、外部から一度だけ呼び出す
// button.click();

パターン3: パターン3: オブジェクトの循環参照による無限再帰的な処理

const obj1 = {};
const obj2 = {};

obj1.child = obj2;
obj2.parent = obj1; // obj1とobj2が互いを参照し合う

// このような循環参照オブジェクトを、再帰的に処理する関数に渡すとエラーになる可能性がある
function deepCopy(obj, visited = new WeakSet()) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (visited.has(obj)) {
    // 既に訪問済みのオブジェクトなら、無限ループを避けるために参照を返す
    return obj; // またはエラーをスロー、あるいは特別な値を返す
  }
  visited.add(obj);

  const copy = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    // ここで循環参照を適切に処理しないと無限再帰になる
    copy[key] = deepCopy(obj[key], visited);
  }
  return copy;
}

// deepCopy関数が循環参照を正しく扱えない場合、RangeErrorが発生する
// 例: JSON.stringify() は循環参照を検出するとエラーをスローする
// console.log(JSON.stringify(obj1)); // Uncaught TypeError: Converting circular structure to JSON

オブジェクトが互いを参照し合う循環参照を持つ場合、そのオブジェクトを再帰的に走査（ディープコピーや直列化など）する関数に渡すと、終了条件がなければ無限再帰に陥ります。`JSON.stringify()` のように組み込み関数でも循環参照はエラーの原因となります。

const obj1 = {};
const obj2 = {};

obj1.child = obj2;
obj2.parent = obj1; // 循環参照を意図的に作成

// 循環参照を検出・回避するディープコピー関数
function safeDeepCopy(obj, visited = new WeakSet()) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  if (visited.has(obj)) {
    // 既に訪問済みのオブジェクトなら、無限ループを避けるために参照を返す
    return obj;
  }
  visited.add(obj);

  const copy = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    copy[key] = safeDeepCopy(obj[key], visited);
  }
  return copy;
}

// 循環参照を安全に処理できる
const copiedObj1 = safeDeepCopy(obj1);
console.log(copiedObj1.child.parent === copiedObj1); // 出力: true (参照が維持されている)

// JSON.stringify() の場合は、循環参照を回避するためにカスタムリプレイサー関数を使うか、
// そもそも循環参照が発生しないデータ構造にする
const replacer = (key, value) => {
  if (key === 'parent') return undefined; // 'parent'キーはシリアライズしない
  return value;
};
console.log(JSON.stringify(obj1, replacer)); // 出力: {"child":{}} (循環参照を回避し、安全にシリアライズ)

根本原因の特定方法

このエラーが発生した場合、ブラウザの開発者ツール（またはNode.jsのデバッガー）を開き、{marker}コールスタックのトレースを確認{/marker}することが最も効果的です。エラーメッセージの下に表示されるスタックトレースは、どの関数が繰り返し呼び出されているか、そしてどの行でループが閉じられなくなったかを示します。ブレークポイントを設定して、変数の値の変化を追うことも有効です。

function badRecursiveFunction(n) {
  // console.trace() を挿入して、どの時点でスタックが深くなっているか確認
  // if (n > 990) {
  //   console.trace('Deep recursion at n =', n);
  // }
  return badRecursiveFunction(n + 1);
}

// badRecursiveFunction(0); // これを実行するとエラーが発生し、スタックトレースが表示される

// デバッガーで確認する例
function debuggableFunction(n) {
  debugger; // ここで実行を一時停止し、コールスタックを確認
  if (n > 1000) return 0; // 意図的な終了条件
  return debuggableFunction(n + 1);
}

// debuggableFunction(0); // 開発者ツールを開いた状態で実行

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

再帰関数を記述する際には、{marker}必ず明確な終了条件{/marker}を設けるとともに、その条件に到達するパスが確実に存在するかを確認します。また、イベントハンドラやリアクティブな監視処理では、{marker}意図しない無限ループが発生しないようなロジック設計{/marker}を心がけましょう。循環参照が発生しうるデータ構造を扱う場合は、`WeakSet` などを使って既に処理したオブジェクトを追跡し、無限ループを回避する仕組みを導入します。

function safeRecursiveProcess(data, index = 0, processed = new Set()) {
  if (index >= data.length || processed.has(data[index])) {
    return; // 終了条件または循環参照検出
  }
  processed.add(data[index]);
  // 処理
  safeRecursiveProcess(data, index + 1, processed);
}

// ESLintなどのLinterで、無限ループにつながる可能性のあるパターンを警告するルールを設定する
// 例: no-cond-assign, no-constant-condition など

よくある質問（FAQ）

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