オブジェクトの配列をグルーピング — arr.reduce((g,x)=>{(g[x.type]||=(g[x.type]=[])).push(x);return g},{})
配列の要素を「カテゴリごとにまとめたい」場面はよくあります。
例えば「商品一覧」を「カテゴリごと」にグループ化すると、後で扱いやすくなります。
初心者は「reduce を使って配列をまとめると、カテゴリごとの箱（配列）を作れる」と覚えると理解しやすいです。
基本のコード例
const arr = [
{ id: 1, type: "fruit", name: "apple" },
{ id: 2, type: "fruit", name: "banana" },
{ id: 3, type: "drink", name: "tea" },
{ id: 4, type: "drink", name: "coffee" }
];
const grouped = arr.reduce((g, x) => {
(g[x.type] ||= []).push(x); // typeごとの配列に追加
return g;
}, {});
console.log(grouped);
/*
{
fruit: [
{ id: 1, type: "fruit", name: "apple" },
{ id: 2, type: "fruit", name: "banana" }
],
drink: [
{ id: 3, type: "drink", name: "tea" },
{ id: 4, type: "drink", name: "coffee" }
]
}
*/
reduce→ 配列を1つの値にまとめる関数。- 初期値
{}→ 空のオブジェクトからスタート。 g[x.type] ||= []→ そのカテゴリの配列がなければ新しく作る。.push(x)→ 要素をそのカテゴリの配列に追加。
よく使うテンプレート集
カテゴリごとにグループ化
const grouped = arr.reduce((g, x) => {
(g[x.category] ||= []).push(x);
return g;
}, {});
数値の範囲ごとにグループ化
const nums = [1, 5, 12, 18, 25];
const grouped = nums.reduce((g, n) => {
const key = n < 10 ? "small" : n < 20 ? "medium" : "large";
(g[key] ||= []).push(n);
return g;
}, {});
console.log(grouped);
// { small: [1,5], medium: [12,18], large: [25] }
日付ごとにグループ化
const logs = [
{ id: 1, date: "2025-12-12", msg: "start" },
{ id: 2, date: "2025-12-12", msg: "running" },
{ id: 3, date: "2025-12-13", msg: "end" }
];
const grouped = logs.reduce((g, log) => {
(g[log.date] ||= []).push(log);
return g;
}, {});
console.log(grouped);
// { "2025-12-12": [...], "2025-12-13": [...] }
例題: 商品をカテゴリごとにまとめる
const products = [
{ id: "p1", category: "book", name: "JS入門" },
{ id: "p2", category: "book", name: "TS入門" },
{ id: "p3", category: "tool", name: "Laptop" }
];
const grouped = products.reduce((g, p) => {
(g[p.category] ||= []).push(p);
return g;
}, {});
console.log(grouped.book[0].name); // → "JS入門"
- 効果: 配列をカテゴリごとに整理でき、検索や表示が簡単になる。
実務でのコツ
- 検索や表示に便利: グループ化しておくと「カテゴリごとに表示」などが簡単。
- キーの重複は配列にまとめる: 上書きされずに複数要素を保持できる。
||=演算子を使うとスッキリ書ける:g[key] ||= []は「なければ空配列を代入」の意味。
練習問題（学生を学年ごとにグループ化）
const students = [
{ name: "Aki", grade: 1 },
{ name: "Mika", grade: 2 },
{ name: "Ken", grade: 1 }
];
const grouped = students.reduce((g, s) => {
(g[s.grade] ||= []).push(s);
return g;
}, {});
console.log(grouped);
// { 1: [{name:"Aki"}, {name:"Ken"}], 2: [{name:"Mika"}] }
直感的な指針
reduce= 配列をまとめる。- 初期値
{}→ オブジェクトに変換。 g[key] ||= []→ そのキーの配列を作る。.push(x)→ 要素を追加。- カテゴリや条件ごとにグループ化できる。
これを覚えれば「配列をカテゴリごとに整理」できるようになり、データ処理がぐっと楽になります。