JavaScript配列の集計（reduce）の基本と実践
「配列の値をまとめて1つにしたい」ときに使うのが reduce。合計・平均・最大値・オブジェクト化など、集計処理の万能ツールです。初心者には少し難しく見えますが、仕組みを理解すると一気に応用範囲が広がります。
構文と考え方
const result = arr.reduce((accumulator, currentValue, index, array) => {
// accumulator: これまでの集計結果
// currentValue: 今の要素
// index: 今のインデックス番号
// array: 元の配列
return /* 新しい集計結果 */;
}, initialValue);
- accumulator（累積値）: 前回の返り値がここに入る。最初は
initialValue。 - currentValue（現在の値）: 配列の要素を順番に渡される。
- initialValue（初期値）: 集計のスタート地点。指定しないと配列の最初の要素が初期値になる。
すぐ使えるテンプレート集
1. 合計値を求める（基本）
const nums = [2, 5, 8, 3];
const sum = nums.reduce((a, b) => a + b, 0);
console.log(sum); // 18
- ポイント:
aが累積値、bが現在の要素。初期値0から足していく。
2. 最大値を求める
const nums = [2, 5, 8, 3];
const max = nums.reduce((a, b) => (a > b ? a : b));
console.log(max); // 8
- ポイント: 初期値を省略すると最初の要素が初期値になる。比較して大きい方を返す。
3. 平均値を求める
const nums = [2, 5, 8, 3];
const avg = nums.reduce((a, b) => a + b, 0) / nums.length;
console.log(avg); // 4.5
- ポイント: 合計を求めてから要素数で割る。reduceは「合計」部分を担当。
4. 配列をオブジェクトに変換（カウント集計）
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const counts = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
console.log(counts); // { apple: 3, banana: 2, orange: 1 }
- ポイント: 初期値を空オブジェクト
{}にして、要素ごとにカウントを増やす。
5. ネストした配列を平坦化（flatten）
const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, arr) => acc.concat(arr), []);
console.log(flat); // [1, 2, 3, 4, 5]
- ポイント: 初期値を空配列
[]にして、concatで結合。
よくある落とし穴と対策
- 初期値を忘れる
- 症状: 空配列でエラー、意図しない結果。
- 対策: なるべく初期値を明示する（数値なら0、文字列なら””、配列なら[]、オブジェクトなら{}）。
- 副作用を混ぜる
- 症状: reduceの中で外部変数を更新してしまう。
- 対策: reduceは「返り値で集計する」ことに集中。外部更新はforEachで。
- 読みづらい一行書き
- 症状: 複雑な処理を一行に詰め込み、初心者には理解困難。
- 対策: 中括弧
{}とreturnを使って複数行に分ける。
他メソッドとの使い分け
| 手段 | 目的 | 返り値 |
|---|---|---|
| reduce | 集計・畳み込み | 単一値や任意構造 |
| map | 変換 | 新しい配列 |
| filter | 選別 | 新しい配列 |
| forEach | 副作用中心 | undefined |
練習問題（手を動かして覚える）
1. 合計値
const nums = [1, 2, 3, 4];
const sum = nums.reduce((a, b) => a + b, 0);
console.log(sum); // 10
2. 文字列連結
const words = ["Hello", "World", "!"];
const sentence = words.reduce((a, b) => a + " " + b);
console.log(sentence); // "Hello World !"
3. ユーザーの平均年齢
const users = [
{ name: "Aki", age: 19 },
{ name: "Mao", age: 22 },
{ name: "Ren", age: 17 },
];
const avgAge = users.reduce((a, u) => a + u.age, 0) / users.length;
console.log(avgAge); // 19.3...
直感的な指針
- 合計・平均・最大最小: reduceで数値集計。
- オブジェクト化・カウント: reduceで構造を作る。
- 複雑な集計: reduceで「1つに畳み込む」イメージ。
