配列をオブジェクトのマップに変換 — arr.reduce((m, x) => { m[x.id] = x; return m; }, {})
JavaScript で「配列をオブジェクトに変換」したい場面はよくあります。
例えば「ユーザー一覧（配列）」を「ユーザーIDをキーにしたオブジェクト」に変換すると、検索が速くなるし、扱いやすくなるのです。
初心者は「reduce を使って配列を1つのオブジェクトにまとめる」と覚えると理解しやすいです。
基本のコード例
const arr = [
{ id: 1, name: "Aki" },
{ id: 2, name: "Mika" },
{ id: 3, name: "Ken" }
];
const map = arr.reduce((m, x) => {
m[x.id] = x;
return m;
}, {});
console.log(map);
/*
{
1: { id: 1, name: "Aki" },
2: { id: 2, name: "Mika" },
3: { id: 3, name: "Ken" }
}
*/
reduce→ 配列を1つの値にまとめる関数。- 初期値
{}→ 空のオブジェクトからスタート。 m[x.id] = x→idをキーにして要素を格納。
よく使うテンプレート集
ID をキーにしたマップ
const byId = arr.reduce((m, x) => {
m[x.id] = x;
return m;
}, {});
名前をキーにしたマップ
const byName = arr.reduce((m, x) => {
m[x.name] = x.id;
return m;
}, {});
カテゴリごとにグループ化
const items = [
{ id: 1, category: "fruit", name: "apple" },
{ id: 2, category: "fruit", name: "banana" },
{ id: 3, category: "drink", name: "tea" }
];
const grouped = items.reduce((m, x) => {
if (!m[x.category]) m[x.category] = [];
m[x.category].push(x);
return m;
}, {});
console.log(grouped);
/*
{
fruit: [
{ id: 1, category: "fruit", name: "apple" },
{ id: 2, category: "fruit", name: "banana" }
],
drink: [
{ id: 3, category: "drink", name: "tea" }
]
}
*/
例題: ユーザー検索を高速化
const users = [
{ id: 101, name: "Alice" },
{ id: 102, name: "Bob" },
{ id: 103, name: "Charlie" }
];
const userMap = users.reduce((m, u) => {
m[u.id] = u;
return m;
}, {});
// ID で即アクセスできる
console.log(userMap[102].name); // → "Bob"
- 効果: 配列をループして探す必要がなく、
O(1)でアクセスできる。
実務でのコツ
- 検索が多いならマップ化: 配列のまま
findで探すより効率的。 - キーの重複に注意: 同じ
idがあると上書きされる。 - グループ化したいなら配列を値にする: 上書き防止のために配列にまとめる。
練習問題（商品を ID マップに変換）
const products = [
{ id: "p1", name: "Laptop" },
{ id: "p2", name: "Phone" },
{ id: "p3", name: "Tablet" }
];
const productMap = products.reduce((m, p) => {
m[p.id] = p;
return m;
}, {});
console.log(productMap["p2"].name); // → "Phone"
直感的な指針
reduce= 配列を1つの値にまとめる。- 初期値
{}を渡せばオブジェクトに変換できる。 m[x.id] = xで ID をキーにしたマップを作れる。- 検索やグループ化に便利。
これを覚えれば「配列を効率的にオブジェクトに変換」できるようになり、データ処理がぐっと楽になります。