JavaScriptでループと再帰を使ってネストされた配列を平坦化する方法

はじめに

JavaScriptでは、ネスト（入れ子）構造を持つ配列を、階層なしのフラットな一次元配列へ変換したい場面がよくあります。この記事では、false や null のような偽値（falsy value）を含む多次元配列を入力として受け取り、ネストをすべて解消した配列を返す関数を、ループと再帰を組み合わせて実装する方法を解説します。

処理の概要

たとえば、次のような配列が入力だったとします。

const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];

この場合、期待される出力は以下のとおりです。

const output = [1, 2, 3, 4, 5, false, 6, 5, 8, null, 6];

それでは、実際にコードを書いていきましょう。

実装例

ここでは Array.prototype を拡張し、どの配列からでも呼び出せるメソッドとして平坦化処理を実装します。要素を順番に走査し、配列であれば自分自身（再帰）を呼び出してさらに展開し、そうでなければそのまま結果に追加します。

const arr = [[1, 2, 3], [4, 5, [5, false, 6, [5, 8, null]]], [6]];

const flatten = function () {
  let res = [];
  for (let i = 0; i < this.length; i++) {
    if (Array.isArray(this[i])) {
      // 配列なら再帰的に展開してスプレッドで連結
      res.push(...this[i].flatten());
    } else {
      // 配列以外はそのまま追加
      res.push(this[i]);
    }
  }
  return res;
};

Array.prototype.flatten = flatten;

console.log(arr.flatten());

コードのポイント

• ループ処理： for 文で配列の各要素を先頭から順に確認していきます。
• Array.isArray()： 要素が配列かどうかを判定するための標準的なメソッドです。これにより、入れ子になった配列だけを特別扱いできます。
• 再帰呼び出し： ネストされた配列に対して flatten() を再度呼び出すことで、どれほど深く入れ子になっていてもすべて展開されます。
• スプレッド構文： res.push(...this[i].flatten()) のように書くことで、返された配列の各要素を個別に res へ効率よく追加できます。

なお、この実装は false や null、0 などの偽値もそのまま要素として保持する点が特徴です。「空の要素を取り除きたい」場合は別途フィルタリングが必要になります。

実行結果

コンソールには次のように出力されます。

[
  1, 2, 3, 4,
  5, 5, false, 6,
  5, 8, null, 6
]

すべてのネストが解消され、元の順序を保ったまま一次元の配列になっていることが確認できます。

まとめ

ループと再帰を組み合わせることで、任意の深さのネスト配列をシンプルに平坦化できます。モダンなJavaScriptでは Array.prototype.flat(Infinity) を使う方法もありますが、仕組みを理解するうえで自前での実装は非常に良い学習になります。状況に応じて両方を使い分けられるようにしておきましょう。