JavaScriptでオブジェクトの配列をキーごとにグループ化する最も効率的な方法

JavaScriptでオブジェクトの配列を特定のキーごとにグループ化する最も効率的な方法は、reduce()関数を使用することです。

reduce()メソッドは、配列の各要素に対して指定したリデューサー（還元）関数を実行し、最終的に単一の出力値を返します。アキュムレータ（累積値）を活用することで、forループを明示的に書くよりも簡潔にグループ化処理を実現できます。

コード例

const people = [
    { name: 'Lee', age: 21 },
    { name: 'Ajay', age: 20 },
    { name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
    return objectArray.reduce((acc, obj) => {
        const key = obj[property];
        if (!acc[key]) {
            acc[key] = [];
        }
        // 指定されたキーの値に対応する配列にオブジェクトを追加
        acc[key].push(obj);
        return acc;
    }, {});
}
const groupedPeople = groupBy(people, 'age');
console.log(groupedPeople);

実行結果

上記のコードを実行すると、次のような出力が得られます。

{ 20: [ { name: 'Ajay', age: 20 }, { name: 'Jane', age: 20 } ],
21: [ { name: 'Lee', age: 21 } ] }

コードの解説

groupBy関数の処理の流れは以下の通りです。

• reduce()の初期値として空のオブジェクト {} を渡します。
• 各要素（obj）から、指定されたプロパティ（property）の値をキーとして取得します。
• そのキーがアキュムレータにまだ存在しない場合は、空の配列を作成します。
• キーに対応する配列に、現在のオブジェクトをpushで追加します。
• すべての要素の処理が完了すると、年齢をキーとしたグループ化されたオブジェクトが完成します。

この方法なら、配列を一度走査するだけでグループ化が完了するため、パフォーマンス面でも非常に効率的です。

補足：Object.groupBy()について

ES2024（ECMAScript 2024）では、標準APIとしてObject.groupBy()メソッドが追加されました。対応している環境であれば、以下のようにより簡潔に記述できます。

const grouped = Object.groupBy(people, (person) => person.age);

ただし、古いブラウザやNode.jsのバージョンとの互換性を保ちたい場合や、グループ化のロジックを細かく制御したい場合には、reduce()を使った方法が引き続き有効です。