JavaScriptのmap()とreduce()を使ってネストした配列をオブジェクトの配列に変換する方法

はじめに

JavaScriptでは、map()とreduce()を組み合わせることで、配列の中に配列が入ったネスト構造のデータを、扱いやすいオブジェクトの配列へと簡潔に変換できます。本記事では、具体的なサンプルコードとともにその手順を解説します。

まず、次のような「配列の中に配列が入った」データがあると仮定します。

const arr = [
    [
        ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
    ],
    [
        ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
    ]
];

ここで求められているのは、このような入力配列を受け取り、その内容をもとに組み立てられた新しいオブジェクトの配列を返す関数を作成することです。

上記の配列の場合、期待される出力は以下のようになります。

const output = [
    { juice: 'apple', maker: 'motts', price: 12 },
    { juice: 'orange', maker: 'sunkist', price: 11 }
];

実装コード

この処理を実現するコードは以下の通りです。

const arr = [
    [
        ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
    ],
    [
        ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
    ]
];

const arrayToObject = arr => {
    let res = [];
    res = arr.map(list => {
        return list.reduce((acc, val) => {
            acc[val[0]] = val[1];
            return acc;
        }, {});
    });
    return res;
};

console.log(arrayToObject(arr));

コードの解説

このコードは、大きく分けて2段階の処理で構成されています。

• 外側のmap()：元の配列から各要素（各ジュースに関する情報を持つサブ配列）を1つずつ取り出し、それぞれを個別のオブジェクトへ変換します。map()は処理結果をまとめた新しい配列を返すため、最終的な出力も配列構造になります。
• 内側のreduce()：各サブ配列（例：['juice', 'apple']）を走査し、初期値として渡した空のオブジェクト {} に対して、acc[val[0]] = val[1]; によってキーと値のペアを順番に登録していきます。これにより、「juice」→「apple」、「maker」→「motts」といった対応関係がプロパティとして蓄積されていきます。

実行結果

コンソールに出力される結果は次の通りです。

[
    { juice: 'apple', maker: 'motts', price: 12 },
    { juice: 'orange', maker: 'sunkist', price: 11 }
]

まとめ

map()で各要素を変換の対象とし、その内部でreduce()を使ってキーと値のペアを1つのオブジェクトに集約する——この二段階のパターンを使えば、ネストされた配列を美しく整理されたオブジェクトの配列へ変換できます。APIレスポンスの整形やCSVデータの構造化など、実務でも応用範囲の広いテクニックなので、ぜひ覚えておきましょう。