JavaScriptのreduceメソッドを使った集計・計算の方法

1. reduceメソッドとは？配列の要素をまとめて計算する方法

1. reduceメソッドとは？配列の要素をまとめて計算する方法

reduceメソッドは、配列の全ての要素を一つずつ順番に処理して、最終的に一つの値を作り出すためのメソッドです。例えば、配列の数値を全部足し合わせるのに使います。

配列の中身を順番に見ていき、計算を繰り返しながら合計や平均などを出すイメージです。

2. reduceの基本的な使い方

2. reduceの基本的な使い方

reduceは2つの引数を取る関数を使います。この関数は「累積値（これまでの計算結果）」と「現在の要素」を受け取って、新しい計算結果を返します。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);  // 15

この例では、accumulator（累積値）は計算結果をためておく箱のようなもので、currentValueは配列の今見ている数字です。最初は0から始まり、順に足し算していきます。

3. reduceの引数の意味を詳しく説明

3. reduceの引数の意味を詳しく説明

• accumulator（累積値）…これまでの計算結果をためておく値
• currentValue（現在の値）…配列から今取り出している値
• 第二引数の0は、accumulatorの初期値。省略すると配列の最初の値が初期値になります。

例えば、初期値を10にすると、最初の計算は10に配列の最初の要素を足す形になります。

let sumWithInitial = numbers.reduce(function(acc, cur) {
  return acc + cur;
}, 10);
console.log(sumWithInitial);  // 25 (10 + 1 + 2 + 3 + 4 + 5)

4. reduceで合計以外の計算もできる

4. reduceで合計以外の計算もできる

reduceは合計だけでなく、掛け算で全部かけ合わせたり、最大値・最小値を見つけたり、配列を別の形にまとめることもできます。

例：配列の全要素をかけ合わせる（積を求める）

let product = numbers.reduce((acc, cur) => acc * cur, 1);
console.log(product);  // 120 (1*1*2*3*4*5)

例：配列の中で一番大きい数字を見つける

let max = numbers.reduce((acc, cur) => (acc > cur ? acc : cur));
console.log(max);  // 5

5. reduceでオブジェクトの集計もできる

5. reduceでオブジェクトの集計もできる

複雑なデータ、例えば人の情報が入った配列から、特定の情報を集計することもreduceで可能です。

let people = [
  {name: "太郎", age: 20},
  {name: "花子", age: 25},
  {name: "次郎", age: 30}
];

// 年齢の合計を計算
let totalAge = people.reduce((acc, person) => acc + person.age, 0);
console.log(totalAge);  // 75

このように、配列の中のオブジェクトから特定の値を取り出して計算できます。

6. reduceを使う時の注意点とポイント

6. reduceを使う時の注意点とポイント

・reduceは使いこなせると便利ですが、最初は少し複雑に感じるかもしれません。

・最初に計算のルールを関数として書き、その関数が「今までの結果」と「今の値」を受け取って計算し、新しい結果を返すことを理解しましょう。

・初期値を入れることで、空の配列でも安全に処理できます。

・わかりやすい変数名を使い、コードの見通しを良くすると理解しやすくなります。

まとめ

まとめ

JavaScriptのreduceメソッドは、配列の集計処理や複雑な計算処理を一つの流れで実現できる強力な仕組みです。配列を順番に処理し、累積した値を使って合計値や平均値を求めたり、配列の中から最大値や最小値を抽出したり、オブジェクトの集計を行ったりと、幅広い用途に対応できます。特に、配列を一つの値に変換する「畳み込み処理」が重要なポイントとなり、JavaScriptによるデータ処理や集計処理では欠かせない存在です。 また、accumulatorとcurrentValueの役割を正しく理解することで、reduceの柔軟性がより強力に感じられるでしょう。配列の合計を計算する基本的な使い方から、初期値を指定して計算の開始地点を変える応用方法、さらにオブジェクト配列から必要な値だけを抜き出して集計するテクニックまで、実務でも役立つ知識が詰まっています。
配列処理の基礎を押さえながら、reduceメソッドの使い方を理解すると、複雑な処理も短いコードにまとめられ、可読性と保守性の高い実装が可能になります。特に、集計・計算・変換といった処理が混ざる場面では、reduceを適切に活用することで無駄のないロジックを組み立てられます。 下記に、今回学んだ内容を踏まえて、合計値と平均値を算出するサンプルコードを改めて掲載します。class名やタグの構造も記事と揃えることで、同じ学習の流れを保ったまま復習できるようにしています。

サンプルコード：合計と平均をまとめて計算するreduce活用例

let scores = [80, 90, 75, 88, 92];

// 合計と平均をreduceでまとめて計算
let result = scores.reduce((acc, cur) => {
  acc.sum += cur;
  acc.count += 1;
  return acc;
}, { sum: 0, count: 0 });

let total = result.sum;
let average = result.sum / result.count;

console.log("合計:", total);
console.log("平均:", average);

このコードでは、sumとcountを一緒に累積していくことで、配列を1回だけ処理しながら合計と平均を求めています。複数の値を同時に集計するパターンは、実践でもよく使われる大切な考え方です。reduceメソッドを習得することで、配列処理の幅が大きく広がり、より効率的で洗練されたJavaScriptコードが書けるようになります。 また、オブジェクト配列の集計や条件に応じた変換処理にも応用できるため、フロントエンド開発だけでなく、データ操作やAPIレスポンス処理などにも効果的に活用できます。今回の記事を通して、reduceが持つ柔軟性や応用力を感じ取ることができたはずです。