✅ reduceとは

JavaScript の reduce() メソッドは、配列の全ての要素を1つの値にまとめるためのメソッドです。

合計・積・文字列の結合・オブジェクトの集約など、いろいろな集約処理に使えます。

最初は処理を追うのが難しく感じますが、データ処理のシーンなどで使うと慣れてきます。

基本的にはforループやforEachなどで処理は代用できるので、JavaScriptの文法に慣れてきたら少し意識して使うぐらいで問題ありません。

✅ 基本構文

const result = array.reduce((accumulator, currentValue) => {
  // 処理内容
  return 新しい値;
}, 初期値);

• accumulator（累積値）: 前回の return の結果が入る（初回は初期値）
• currentValue: 今回の配列の要素
• 初期値: accumulator の最初の値

✅ reduceの特徴

• 配列の全要素を「まとめる」用途に最適
• 初期値を指定しない場合、配列の最初の要素が初期値となる
• 処理結果は最終的に1つの値

✅ 練習

コピペではなく実際に打ち込んで練習してみましょう。

数値の合計を出す

const numbers = [1, 2, 3, 4];
const total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total);
// 10

数値の積を出す

const numbers = [2, 3, 4];
const product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product);
// 24

文字列を結合する

const words = ["Hello", "world", "!"];
const sentence = words.reduce((acc, word) => acc + " " + word);
console.log(sentence);
// Hello world !

オブジェクトの配列から合計金額を出す

const items = [
  { name: "Apple", price: 100 },
  { name: "Banana", price: 150 },
  { name: "Orange", price: 200 }
];

const totalPrice = items.reduce((sum, item) => sum + item.price, 0);
console.log(totalPrice);
// 450

配列内の要素数をカウント（カテゴリ別集計）

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 }

✅ まとめ（reduce）

• reduce() は配列を1つの値にまとめる処理に使う
• 合計・積・文字列結合・オブジェクト集計など、活用範囲が広い
• 初期値を忘れずに設定しよう（省略すると意図しない動作になる場合あり）