JavaScriptで最初の要素を基準にネストされた配列をグループ化する方法

はじめに

JavaScriptでは、数値を要素とする配列の配列（2次元配列）を、特定の条件に従ってグループ化したい場面があります。本記事では、各サブ配列の「最初の要素」が同じ値であるもの同士をまとめ、その「2番目の要素」だけを集めた新しい配列を作成する方法を解説します。

例として、次のような配列を考えてみましょう。

const arr = [[1, 45], [1, 34], [1, 49], [2, 34], [4, 78], [2, 67], [4, 65]];

ここでは、各サブ配列が必ず厳密に2つの要素を持つものとします。求められているのは、最初の値が同じサブ配列同士について、2番目の要素をひとつの配列にまとめた新しい配列を構築する関数です。

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

const output = [
    [45, 34, 49],
    [34, 67],
    [78, 65]
];

この処理を実現するには、Array.prototype.reduce() メソッドと Map() オブジェクトを組み合わせるのが効果的です。Map を使うことで「最初の要素の値」と「結果配列内のインデックス」を関連付けられ、同じキーが再び現れたときに該当する配列へ値を追加できます。

実装コード

それでは、実際のコードを見てみましょう。

const arr = [[1, 45], [1, 34], [1, 49], [2, 34], [4, 78], [2, 67], [4, 65]];

const constructSimilarArray = (arr = []) => {
    const creds = arr.reduce((acc, val) => {
        const { map, res } = acc;
        if (!map.has(val[0])) {
            // 初出のキーなら新しいグループを作成し、そのインデックスをMapに記録
            map.set(val[0], res.push([val[1]]) - 1);
        } else {
            // 既存のグループに2番目の要素を追加
            res[map.get(val[0])].push(val[1]);
        }
        return { map, res };
    }, {
        map: new Map(),
        res: []
    });
    return creds.res;
};

console.log(constructSimilarArray(arr));

コードのポイント

• reduce(): 配列を走査しながらアキュムレータ（map と res）を更新していきます。
• Map: キー（サブ配列の最初の要素）と、res 内のグループのインデックスを対応付けて管理します。
• res.push([val[1]]) - 1: 新しいグループを追加した際、push の戻り値は配列の新しい長さなので、そこから1を引くことで追加したグループのインデックスを取得できます。

実行結果

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

[ [ 45, 34, 49 ], [ 34, 67 ], [ 78, 65 ] ]

このように、最初の要素が「1」だったサブ配列の2番目の要素（45, 34, 49）、最初の要素が「2」のもの（34, 67）、最初の要素が「4」のもの（78, 65）がそれぞれグループ化されていることが確認できます。この手法は、データの集約やカテゴリ別の整理など、さまざまな場面で応用できる汎用的なパターンです。