JavaScriptで深くネストされたリテラルの配列をフラット化（平坦化）する方法

この記事では、入れ子（ネスト）になった配列を引数として受け取り、すべてのリテラル要素を階層なしで含む新しい配列を生成するJavaScript関数の作り方を解説します。

つまり、どれだけ深くネストされた配列でも、要素を一列に並べた「フラットな配列」に変換する処理です。

入力と出力のイメージ

たとえば、次のような配列が入力として与えられたとします。

const arr = [
    1, 3, [5, 6, [7, [6, 5], 4], 3], [4]
];

期待される出力は以下の通りです。ネストが完全に解除され、要素が順番に並んでいることがわかります。

const output = [1, 3, 5, 6, 7, 6, 5, 4, 3, 4];

実装方法：再帰を使ったアプローチ

ネストの深さが不定であるため、再帰処理を使うのが最も自然な解決策です。各要素を順番にチェックし、要素が配列であれば自分自身を再度呼び出して展開し、そうでなければそのまま結果の配列に追加します。

実際のコードは以下のようになります。

const arr = [
    1, 3, [5, 6, [7, [6, 5], 4], 3], [4]
];

const flattenArray = (arr = []) => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        const el = arr[i];
        // 要素が配列かどうかを判定
        if(Array.isArray(el)){
            // 配列なら再帰呼び出しでさらに展開
            res.push(...flattenArray(el));
        }else{
            // 配列以外ならそのまま追加
            res.push(el);
        };
    };
    return res;
};

console.log(flattenArray(arr));

コードのポイント

• Array.isArray()：対象の要素が配列かどうかを判定する組み込みメソッドです。
• スプレッド構文（...）：再帰的に取得した結果の配列を、個々の要素としてまとめてpushできます。

実行結果

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

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

補足：flat() メソッドを使う方法

ES2019以降では、配列の組み込みメソッドflat()を利用することもできます。Infinityを指定すれば、任意の深さのネストを一度に展開できます。

const output = arr.flat(Infinity);
// [1, 3, 5, 6, 7, 6, 5, 4, 3, 4]

モダンな環境であればこちらの方が簡潔ですが、再帰による自前実装は内部動作の理解や古い環境への対応において有用です。状況に応じて使い分けるとよいでしょう。