JavaScriptのreduce関数は、配列の要素をひとつにまとめる強力なメソッドです。足し算や掛け算といった単純な計算から、オブジェクトの集計、複雑なデータの加工まで、幅広い用途で使われます。
この記事では、 reduceの基本的な使い方 から 実践的な応用例 までを、初心者にもわかりやすく丁寧に解説していきます。最後には、reduce関数を使いこなすためのコツや注意点もご紹介しますので、ぜひ最後までお読みください！
reduce関数とは？
reduce関数の基本的な役割
reduceは、配列のすべての要素を 累積処理（1つの値にまとめる）するためのメソッドです。配列の各要素を順番に処理し、その結果を次の要素に引き渡していきます。
構文
配列.reduce((累積値, 現在の値, 現在のインデックス, 配列) => {
// 処理内容
}, 初期値);
- 累積値（accumulator）: これまでの処理結果を保持します。
- 現在の値（currentValue）: 現在処理している配列の要素。
- 現在のインデックス（optional）: 現在処理している要素のインデックス。
- 配列（optional）: 元の配列そのもの。
- 初期値: 累積値の初期値。設定しない場合、配列の最初の要素が使用されます。
reduceの基本的な使い方
配列の合計を求める
reduceを使って、数値の配列の合計を計算します。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
- 累積値（accumulator）: 前のループで計算された合計。
- 現在の値（currentValue）: 現在の配列要素。
- 初期値:
0（合計の初期値）。
配列の積（掛け算）を計算する
const numbers = [1, 2, 3, 4];
const product = numbers.reduce((accumulator, currentValue) => {
return accumulator * currentValue;
}, 1);
console.log(product); // 24
初期値を設定しない場合
初期値を指定しないと、配列の最初の要素が累積値の初期値として使用されます。
const numbers = [10, 20, 30];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
console.log(sum); // 60
ただし、初期値を設定しない場合、配列が空だとエラーになります。安全性を考えると、明示的に初期値を指定するのが推奨されます。
実践的な応用例
オブジェクトの配列を集計する
例えば、商品リストの合計金額を計算する例です。
const cart = [
{ name: "りんご", price: 100, quantity: 2 },
{ name: "みかん", price: 50, quantity: 3 },
{ name: "ぶどう", price: 200, quantity: 1 }
];
const total = cart.reduce((accumulator, item) => {
return accumulator + item.price * item.quantity;
}, 0);
console.log(total); // 500
配列の最大値を求める
reduceを使えば、配列の中で最大の値を簡単に取得できます。
const numbers = [10, 20, 50, 5, 30];
const max = numbers.reduce((accumulator, currentValue) => {
return accumulator > currentValue ? accumulator : currentValue;
});
console.log(max); // 50
配列内の文字列を連結する
文字列をつなげて1つの文字列にする場合にもreduceが使えます。
const words = ["JavaScript", "は", "楽しい！"];
const sentence = words.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, "");
console.log(sentence); // "JavaScriptは楽しい！"
データをグループ化する
配列を特定のキーでグループ化する例です。
const people = [
{ name: "太郎", age: 25 },
{ name: "花子", age: 30 },
{ name: "一郎", age: 25 }
];
const groupedByAge = people.reduce((accumulator, person) => {
if (!accumulator[person.age]) {
accumulator[person.age] = [];
}
accumulator[person.age].push(person);
return accumulator;
}, {});
console.log(groupedByAge);
// {
// 25: [ { name: "太郎", age: 25 }, { name: "一郎", age: 25 } ],
// 30: [ { name: "花子", age: 30 } ]
// }
配列内の値のカウント
特定の値がいくつあるかをカウントする例です。
const fruits = ["りんご", "みかん", "りんご", "ぶどう", "みかん", "りんご"];
const count = fruits.reduce((accumulator, fruit) => {
accumulator[fruit] = (accumulator[fruit] || 0) + 1;
return accumulator;
}, {});
console.log(count);
// { りんご: 3, みかん: 2, ぶどう: 1 }
reduceの注意点
初期値の指定
初期値を指定しない場合、配列が空だとエラーになる可能性があります。安全性を考えて初期値を必ず指定することをおすすめします。
const emptyArray = [];
const sum = emptyArray.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 0
可読性の確保
reduceは強力なメソッドですが、複雑な処理を1つの関数に詰め込みすぎると、可読性が下がります。処理を別の関数に分割して記述することで、コードが見やすくなります。
const cart = [
{ name: "りんご", price: 100, quantity: 2 },
{ name: "みかん", price: 50, quantity: 3 }
];
const calculateItemTotal = item => item.price * item.quantity;
const total = cart.reduce((accumulator, item) => {
return accumulator + calculateItemTotal(item);
}, 0);
console.log(total); // 350
まとめ
reduce関数は、配列を操作してひとつの値にまとめるための非常に便利なツールです。基本的な使い方を覚えたら、以下のような応用例を試してみてください：
- 配列の合計値や最大値の計算
- オブジェクトの配列を集計
- データのグループ化
- 値の出現回数のカウント
また、reduceは可読性を保つことも重要です。複雑な処理を記述する場合は、処理を分割することでコードの見通しを良くしましょう。
この記事で紹介したサンプルコードを試しながら、reduceをマスターしていきましょう！
コメント