JavaScript | 「再帰の動き」を図解で追う

では「ネストした配列の合計」を再帰で図解してみましょう。これがまさに再帰の真骨頂です。

コード例

function sumNested(arr) {
  let sum = 0;
  for (const item of arr) {
    if (Array.isArray(item)) {
      sum += sumNested(item);   // 配列なら再帰
    } else {
      sum += item;              // 数値なら加算
    }
  }
  return sum;
}

console.log(sumNested([1, [2, [3, 4]], 5])); // 15

function sumNested(arr) {
  let sum = 0;
  for (const item of arr) {
    if (Array.isArray(item)) {
      sum += sumNested(item);   // 配列なら再帰
    } else {
      sum += item;              // 数値なら加算
    }
  }
  return sum;
}

console.log(sumNested([1, [2, [3, 4]], 5])); // 15

実行の流れ（潜っていく）

1. sumNested([1, [2, [3, 4]], 5])
   • まず 1 → 合計に加える
   • 次に [2, [3, 4]] → 配列なので再帰呼び出し
2. sumNested([2, [3, 4]])
   • まず 2 → 合計に加える
   • 次に [3, 4] → 配列なので再帰呼び出し
3. sumNested([3, 4])
   • 3 → 合計に加える
   • 4 → 合計に加える
   • 合計 = 7 を返す

戻りながら計算する流れ

• sumNested([3, 4]) = 7
• sumNested([2, [3, 4]]) = 2 + 7 = 9
• sumNested([1, [2, [3, 4]], 5]) = 1 + 9 + 5 = 15

図でイメージ

sumNested([1, [2, [3, 4]], 5])
  → 1 + sumNested([2, [3, 4]]) + 5
                 ↓
                 2 + sumNested([3, 4])
                           ↓
                           3 + 4 = 7

sumNested([1, [2, [3, 4]], 5])
  → 1 + sumNested([2, [3, 4]]) + 5
                 ↓
                 2 + sumNested([3, 4])
                           ↓
                           3 + 4 = 7

戻りながら計算すると：

sumNested([3,4]) = 7
sumNested([2,[3,4]]) = 2 + 7 = 9
sumNested([1,[2,[3,4]],5]) = 1 + 9 + 5 = 15

ポイント

• 再帰は「入れ子構造をほどく」のに最適。
• ループだけだと「深さがいくつあるか分からない」場合に対応しにくい。
• 再帰なら「配列ならもう一度呼ぶ」というシンプルなルールで処理できる。

👉 これで「階乗」「配列の合計」「ネスト配列の合計」と、再帰の流れを3パターンで追えました。