JavaScriptでネストした配列をフラット化する方法【再帰・reduce・flat】

JavaScriptでは、入れ子（ネスト）になった配列からすべての要素を取り出し、階層構造のない平坦な（一次元の）配列を作りたい場面がよくあります。本記事では、ネストされた配列を受け取ってフラットな配列を返す関数を、複数のアプローチで実装する方法を解説します。

やりたいこと

例えば、次のような入力に対して、以下の出力を得ることを目指します。

// 入力：
const arr = [[1, 2, 3], [4, 5], [6]];
// 期待する出力：
const output = [1, 2, 3, 4, 5, 6];

それでは、この処理を実現するコードを順番に見ていきましょう。

方法1：再帰を使う

元のネストされた配列をループで走査し、要素が配列であれば再帰的に処理を行い、その結果を新しい配列へ追加していきます。

コード例

const arr = [[1, 2, 3], [4, 5], [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());

この方法のポイントは、Array.isArray() で要素が配列かどうかを判定し、配列であれば自分自身（flatten関数）を再帰的に呼び出す点です。これにより、ネストがどれだけ深くても対応できる柔軟な実装になります。

方法2：Array.prototype.reduce() を使う

reduce() メソッドを使えば、より簡潔に記述できます。初期値として空の配列を渡し、各要素を順番に連結していくイメージです。

コード例

const arr = [[1, 2, 3], [4, 5], [6]];
const flatten = function(){
    return this.reduce((acc, val) => {
        return acc.concat(...val);
    }, []);
};
Array.prototype.flatten = flatten;
console.log(arr.flatten());

実行結果

どちらの方法でも、コンソールには同じ結果が出力されます。

[ 1, 2, 3, 4, 5, 6 ]

補足：組み込みメソッド flat() の活用

ES2019以降の環境では、Array.prototype.flat() という標準のメソッドが利用できます。デフォルトで1階層を展開し、引数に Infinity を指定すれば任意の深さのネストを一括で平坦化できます。

const arr = [[1, 2, 3], [4, 5], [6]];
console.log(arr.flat());           // [1, 2, 3, 4, 5, 6]
console.log(arr.flat(Infinity));   // 深いネストもすべて展開

モダンな実行環境であれば、自前の実装なしに flat() を使うのが最もシンプルで推奨される方法です。一方、古いブラウザへの互換性対応や、アルゴリズムの学習目的においては、再帰や reduce() を使った自前実装の理解も非常に有用です。用途に応じて適切な方法を選びましょう。