導入
JavaScriptで配列内のデータを特定の条件で分類したいとき、皆さんはどうしていますか？これまでは reduce メソッドを使って複雑なコールバック関数を書くのが一般的でしたが、コードが冗長になりがちでした。
そんな課題を解決するのが、ES2024で導入された Object.groupBy です。このメソッドを使えば、驚くほど簡潔に、かつ可読性の高いコードでデータをグループ化できます。フロントエンド開発の現場で頻出する「データ整形」を効率化するために、ぜひ習得しておきましょう。
基礎知識
Object.groupBy は、配列の各要素に対して指定した関数を実行し、その戻り値をキー（グループ名）としてオブジェクトに分類する静的メソッドです。
従来、同様の処理を行うには reduce を用いて空のオブジェクトを初期値とし、各要素を振り分ける処理を記述する必要がありました。groupBy を使うことで、この「分類する」という意図が明確になり、バグの混入リスクも下げることができます。
実装/解決策
使い方は非常にシンプルです。第一引数に「対象の配列」、第二引数に「グループ分けの基準を返すコールバック関数」を渡すだけです。コールバック関数が返した値が、そのまま結果オブジェクトの「キー」になります。
サンプルプログラム
以下のコードでは、学生の成績リストを「合格」と「不合格」に分類する例を紹介します。
const students = [
{ name: '田中', score: 85 },
{ name: '佐藤', score: 40 },
{ name: '鈴木', score: 70 },
{ name: '高橋', score: 30 }
];
// 60点以上を「合格」、それ以外を「不合格」に分類する
const grouped = Object.groupBy(students, (student) => {
return student.score >= 60 ? '合格' : '不合格';
});
// 結果を出力
console.log(grouped);
/
出力結果:
{
合格: [ { name: '田中', score: 85 }, { name: '鈴木', score: 70 } ],
不合格: [ { name: '佐藤', score: 40 }, { name: '高橋', score: 30 } ]
}
/
応用・注意点
現場で活用する際の注意点は以下の3つです。
1. プロトタイプを持たないオブジェクト: Object.groupBy が返すオブジェクトは null プロトタイプ（Object.create(null)）です。そのため、toString などの標準メソッドが存在しない点に注意してください。
2. ブラウザ対応状況: 比較的新しい機能（ES2024）であるため、古いブラウザや環境で動かす場合は、Polyfillの導入やトランスパイル設定を確認してください。
3. Mapでのグループ化: もしキーにオブジェクトを使いたい場合や、より高度な操作が必要な場合は、Map を返す Map.groupBy の使用を検討してください。
適切な場面でこれらのメソッドを使い分けることで、より洗練されたデータ処理が可能になります。ぜひ日々の開発に取り入れてみてください。