filter と reduce を組み合わせると、「条件で絞り込み → 集計」という流れをシンプルに書けます。実務でもよく使うパターンなので、例題を交えて説明します。
基本の流れ
- filter: 配列から条件に合う要素だけを残す
- reduce: 残った要素を合計・平均・最大などにまとめる
例題 1: 70点以上の合計点を出す
let scores = [48, 75, 92, 61, 54, 83, 76];
// 70点以上だけを残す
let passed = scores.filter(score => score >= 70);
// 合計を出す
let total = passed.reduce((sum, n) => sum + n, 0);
console.log(passed); // [75, 92, 83, 76]
console.log(total); // 326
filterで[75, 92, 83, 76]に絞り込みreduceで合計326を計算
例題 2: オブジェクト配列から「合格者の平均点」
let users = [
{ name: 'Yamada', score: 75 },
{ name: 'Suzuki', score: 91 },
{ name: 'Kudou', score: 65 },
{ name: 'Tanaka', score: 82 }
];
// 70点以上の人だけ残す
let passed = users.filter(user => user.score >= 70);
// 合計点を出す
let total = passed.reduce((sum, user) => sum + user.score, 0);
// 平均点
let average = total / passed.length;
console.log(passed.map(u => u.name)); // ["Yamada", "Suzuki", "Tanaka"]
console.log(average); // 82.67
例題 3: 条件付きで最大値を求める
「80点以上の人の中で最高点を探す」
let users = [
{ name: 'Yamada', score: 75 },
{ name: 'Suzuki', score: 91 },
{ name: 'Kudou', score: 65 },
{ name: 'Tanaka', score: 82 }
];
let maxScore = users
.filter(user => user.score >= 80)
.reduce((max, user) => user.score > max ? user.score : max, -Infinity);
console.log(maxScore); // 91
ポイント
- filter → reduce の順番が基本
filterで条件を満たす要素が 0 件の場合、reduceの初期値がそのまま返るので注意- 合計なら
0 - 最大値なら
-Infinity - 最小値なら
Infinity
- 合計なら
まとめ
filterで「対象を絞る」reduceで「まとめる」- 合計・平均・最大・最小など、いろんな集計に応用できる