JavaScriptでキープロパティを基準にオブジェクトをグループ化する方法

JavaScriptでは、ネストされた配列の中にあるオブジェクトを、特定のプロパティ(キー)を基準にまとめてグループ化したい場面がよくあります。本記事では、key と value の2つのプロパティを持つオブジェクトが格納された多次元配列を、キーごとに値を集約した1つのオブジェクトへ変換する方法を解説します。

前提となるデータ構造

今回扱うのは、同じサイズのサブ配列を多数含む親配列(parentArray)です。各サブ配列の要素は key と value を持つオブジェクトであり、同一のサブ配列内に同じキーを持つオブジェクトは存在しません。また、すべてのサブ配列は同じ n 個のキーのペアを共有しています。

具体的には、以下のようなデータを想定します。

const parentArray = [[
{
    key: 123,
    value: 'India'
}, {
    key: 124,
    value: 'USA'
}, {
    key: 125,
    value: 'Japan'
}, {
    key: 126,
    value: 'Denmark'
}, {
    key: 127,
    value: 'Austria'
},
], [
{
    key: 124,
    value: 'Kenya'
}, {
    key: 126,
    value: 'UK'
}, {
    key: 123,
    value: 'Germany'
}, {
    key: 127,
    value: 'Spain'
}, {
    key: 125,
    value: 'Portugal'
},
]];

実装のアプローチ

目標は、「キーをプロパティ名とし、そのキーに対応するすべての値を配列として格納したオブジェクト」を作成することです。

処理の手順はシンプルです。

1. 親配列(parentArray)をループで走査する。
2. さらに各サブ配列内のオブジェクトを1つずつ取り出す。
3. そのキーが結果オブジェクトに既に存在すれば、値を既存の配列に追加(push)する。
4. 存在しなければ、新しい配列を作成して値を格納する。

コード全体

上記のロジックを実装したコードがこちらです。

const parentArray = [[
{
    key: 123,
    value: 'India'
}, {
    key: 124,
    value: 'USA'
}, {
    key: 125,
    value: 'Japan'
}, {
    key: 126,
    value: 'Denmark'
}, {
    key: 127,
    value: 'Austria'
},
], [
{
    key: 124,
    value: 'Kenya'
}, {
    key: 126,
    value: 'UK'
}, {
    key: 123,
    value: 'Germany'
}, {
    key: 127,
    value: 'Spain'
}, {
    key: 125,
    value: 'Portugal'
},
]];

const map = {};
parentArray.forEach(arr => {
    arr.forEach(obj => {
        const { key, value } = obj;
        if(map[key]){
            map[key].push(value);
        }else{
            map[key] = [value]
        }
    })
});
console.log(map);

コードのポイント

• 分割代入: const { key, value } = obj; により、オブジェクトから必要なプロパティを簡潔に取り出しています。
• 存在チェック: if(map[key]) でキーの有無を判定し、既存の配列への追記と新規作成を切り替えています。

実行結果

コンソールに出力される結果は以下の通りです。同じキーを持つ値が、1つの配列にきれいにグループ化されていることが確認できます。

{
    '123': [ 'India', 'Germany' ],
    '124': [ 'USA', 'Kenya' ],
    '125': [ 'Japan', 'Portugal' ],
    '126': [ 'Denmark', 'UK' ],
    '127': [ 'Austria', 'Spain' ]
}

補足:Array.prototype.reduce を使った別解

同様の処理は reduce() メソッドを使っても実現できます。より関数型らしい書き方なので、好みに応じて使い分けるとよいでしょう。

const map = parentArray.flat().reduce((acc, { key, value }) => {
    (acc[key] ??= []).push(value);
    return acc;
}, {});

このように、二重ループでも reduce() でも、キーを基準としたデータのグループ化は簡単に実装できます。APIレスポンスの整形やデータ集計など、実務でも頻出するパターンなので、ぜひマスターしておきましょう。