JavaScriptのreduce()を使った配列集計処理の基本と応用ガイド！初心者でもわかる方法

1. reduce()メソッドとは？

1. reduce()メソッドとは？

JavaScriptのreduce()メソッドは、配列の全ての要素を順番に処理して、1つの値にまとめるためのメソッドです。例えば、数値の配列の合計や平均、最大値や文字列の連結など、様々な集計処理に使えます。

reduce()は、配列の各要素に対して「現在の合計値」と「配列の次の値」を渡しながら処理を進めます。

2. 基本的な合計の計算

2. 基本的な合計の計算

まずは、配列の数値をすべて足して合計を出す基本的な使い方です。

const numbers = [10, 20, 30, 40];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // 100

ここでaccumulatorはこれまでの合計、currentValueは配列の現在の値です。最後の0は初期値を意味します。

3. 平均を計算する応用例

3. 平均を計算する応用例

次に、配列の平均を計算する方法です。合計を求めた後、配列の要素数で割ります。

const scores = [80, 90, 70, 60];
const sum = scores.reduce((total, score) => total + score, 0);
const average = sum / scores.length;
console.log(average); // 75

reduce()でまず合計を出し、その結果を配列の長さで割ると平均が求められます。

4. オブジェクト配列の集計

4. オブジェクト配列の集計

オブジェクトの配列を集計する場合もreduce()は便利です。例えば商品の価格の合計を計算します。

const products = [
  { name: "りんご", price: 100 },
  { name: "みかん", price: 80 },
  { name: "バナナ", price: 120 }
];
const totalPrice = products.reduce((sum, product) => sum + product.price, 0);
console.log(totalPrice); // 300

このように、配列の中の特定のプロパティだけを集計することも可能です。

5. 配列の中で条件付き集計

5. 配列の中で条件付き集計

reduce()は条件付きで集計することもできます。例えば、80点以上のスコアだけ合計したい場合です。

const scores2 = [50, 85, 90, 70];
const highScoresSum = scores2.reduce((sum, score) => {
  if (score >= 80) {
    return sum + score;
  }
  return sum;
}, 0);
console.log(highScoresSum); // 175

このように条件分岐を入れることで、必要なデータだけを集計できます。

6. 配列をオブジェクトに変換する応用

6. 配列をオブジェクトに変換する応用

reduce()を使うと、配列を別のオブジェクトに変換することもできます。例えば名前ごとに点数をまとめる場合です。

const students = [
  { name: "太郎", score: 90 },
  { name: "花子", score: 85 },
  { name: "太郎", score: 70 }
];
const scoreMap = students.reduce((acc, student) => {
  if (!acc[student.name]) {
    acc[student.name] = 0;
  }
  acc[student.name] += student.score;
  return acc;
}, {});
console.log(scoreMap); // { 太郎: 160, 花子: 85 }

このように、名前ごとにスコアを集計してオブジェクトとしてまとめることが可能です。

7. 文字列の連結にも使えるreduce()

7. 文字列の連結にも使えるreduce()

reduce()は数値だけでなく文字列の連結にも使えます。配列の文字列をひとつにまとめる例です。

const words = ["JavaScript", "の", "reduce", "メソッド"];
const sentence = words.reduce((acc, word) => acc + word, "");
console.log(sentence); // JavaScriptのreduceメソッド

このように、配列の文字列を順番に結合して1つの文章にすることも可能です。

8. reduce()を使うと処理がシンプルになるポイント

8. reduce()を使うと処理がシンプルになるポイント

配列の合計や条件付き集計、オブジェクト変換など、従来はforループやforEachを使っていた処理をreduce()でまとめると、コードが短くなり、見やすくなります。初心者でも「何を集計したいのか」が直感的に理解しやすいのがメリットです。

まとめ

まとめ

今回の記事では、JavaScriptのreduce()メソッドを使った配列の集計処理について詳しく解説しました。reduce()は配列の要素を1つの値にまとめる強力なメソッドで、単純な合計や平均の計算だけでなく、条件付き集計、オブジェクトへの変換、文字列の連結など幅広い用途に使えます。
基本的な考え方としては、reduce()は配列の各要素に対して「累積値（accumulator）」と「現在値（currentValue）」を順番に渡し、処理結果を次のステップに渡していく仕組みです。初期値を設定することで、数値だけでなくオブジェクトや文字列など任意の型の集計も可能です。
具体的には、数値配列の合計や平均を求める方法、オブジェクト配列の特定プロパティの合計、条件付きで特定の値のみを集計する方法、配列からオブジェクトへの変換、文字列の連結などを学びました。これにより、従来はforループやforEachで冗長になっていた処理を簡潔に書くことができ、コードの可読性と保守性が向上します。
また、reduce()を使うことで、配列操作を関数型プログラミングのようなスタイルで記述でき、初心者でも直感的に集計処理の流れを理解しやすくなります。特に、条件付きの合計やオブジェクト変換など応用的な使い方をマスターすると、複雑なデータ処理も短くわかりやすいコードで実現可能です。

サンプルコードの振り返り

これまで紹介したサンプルコードを振り返ると、reduce()の基本形は次のようになります。

 // 数値配列の合計 const numbers = [10, 20, 30, 40]; const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(total); // 100
// 条件付き合計
const scores = [50, 85, 90, 70];
const highScoresSum = scores.reduce((sum, score) => score >= 80 ? sum + score : sum, 0);
console.log(highScoresSum); // 175

// 配列からオブジェクトへの変換
const students = [
{ name: "太郎", score: 90 },
{ name: "花子", score: 85 },
{ name: "太郎", score: 70 }
];
const scoreMap = students.reduce((acc, student) => {
acc[student.name] = (acc[student.name] || 0) + student.score;
return acc;
}, {});
console.log(scoreMap); // { 太郎: 160, 花子: 85 }

// 文字列の連結
const words = ["JavaScript", "の", "reduce", "メソッド"];
const sentence = words.reduce((acc, word) => acc + word, "");
console.log(sentence); // JavaScriptのreduceメソッド

このように、reduce()は集計処理や変換処理を1つの関数でまとめることができ、配列操作の効率化とコードの簡潔化に非常に役立ちます。