JavaScript Array.reduce() メソッド - 値を累積する

Array.reduce()を理解する

Array.reduce()は配列の各要素にリデューサー関数を実行し、前回の反復からの戻り値をアキュムレータとして渡します。最終結果は単一の累積値です — 数値、文字列、オブジェクト、配列、その他あらゆる型になり得ます。

構文

const result = array.reduce((accumulator, currentValue, index, array) => {
  // 更新されたアキュムレータを返す
}, initialValue);

**常にinitialValueを提供してください。**これがないと、reduceは最初の要素を初期アキュムレータとして使用し、空配列でスローし、紛らわしい型エラーを引き起こします。

一般的なパターン

数値の合計：

const total = [1, 2, 3, 4, 5].reduce((sum, n) => sum + n, 0);
// total: 15

プロパティでグループ化：

const people = [
  { name: "Alice", dept: "Eng" },
  { name: "Bob", dept: "Sales" },
  { name: "Carol", dept: "Eng" }
];
const byDept = people.reduce((acc, person) => {
  const key = person.dept;
  acc[key] = acc[key] || [];
  acc[key].push(person);
  return acc;
}, {});
// byDept: { Eng: [{Alice}, {Carol}], Sales: [{Bob}] }

出現回数のカウント：

const fruits = ["apple", "banana", "apple", "cherry", "banana", "apple"];
const counts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
// counts: { apple: 3, banana: 2, cherry: 1 }

reduceを使うべきでない場合

より簡単なメソッドが存在する場合はそちらを使用してください：

• 合計？明確さのためにプレーンなforループを検討
• フィルタリング + マッピング？.filter().map()をチェーン
• グループ化？利用可能な場合はObject.groupBy()（ES2024）を使用

reduceは強力ですが、使いすぎると読みにくくなることがあります。