累積計算の実装 | reduceによる集計 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

累積計算の実装

reduce()メソッドは、配列の各要素を順番に処理し、最終的に1つの値へまとめるためのメソッドです。

合計、平均、最大値、最小値、オブジェクトへの集計など、配列全体を使って何らかの結果を作りたい場合に便利です。

reduceメソッドの基本的な使い方

const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(total);

実行結果

15

この例では、配列numbersの要素を合計しています。

accumulatorは現在までの累積値、currentValueは現在処理している配列の要素です。

reduceメソッドの引数

reduce()メソッドは、主に2つの引数を取ります。

• 1つ目：各要素に対して実行するコールバック関数
• 2つ目：累積値の初期値

コールバック関数には、次の4つの引数を指定できます。

コールバック関数内でインデックスを使用する例

const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce(function(accumulator, currentValue, index) {
    console.log(`Index ${index}: ${accumulator} + ${currentValue}`);
    return accumulator + currentValue;
}, 0);

console.log(total);

この例では、indexを使って、各ステップでどの要素を処理しているかを確認しています。

初期値に0を指定しているため、最初のaccumulatorは0になります。

累積計算の応用例

reduce()は、単純な数値の合計だけでなく、オブジェクトの配列を集計する場合にも利用できます。

商品の価格を累積計算する例

const products = [
    { name: "商品A", price: 100 },
    { name: "商品B", price: 200 },
    { name: "商品C", price: 300 }
];

const totalPrice = products.reduce(function(accumulator, product) {
    return accumulator + product.price;
}, 0);

console.log(totalPrice);

実行結果

600

この例では、各商品のpriceを順番に足し合わせています。

reduceメソッドの特徴

reduce()の大きな特徴は、配列全体を1つの結果に集約できることです。

たとえば、次のような処理に利用できます。

• 数値の合計を求める。
• 平均値を求める。
• 最大値や最小値を求める。
• 配列からオブジェクトを作成する。
• データを分類・集計する。

平均を計算する例

平均を求める場合は、まず合計を求め、その後に配列の長さで割ると分かりやすく書けます。

const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

const average = total / numbers.length;

console.log(average);

実行結果

3

元の記事のようにreduce()の中で平均まで計算することもできますが、初心者向けには「合計を求める処理」と「平均を求める処理」を分けた方が読みやすくなります。

最大値を求める例

const numbers = [12, 5, 28, 9];

const max = numbers.reduce(function(accumulator, currentValue) {
    return Math.max(accumulator, currentValue);
}, numbers[0]);

console.log(max);

実行結果

28

この例では、現在までの最大値と現在の要素を比較し、大きい方を次の累積値として返しています。

reduceメソッドと他の配列メソッドの比較

reduce()は、map()やfilter()と同じく配列に対して使うメソッドですが、目的が異なります。

配列を変換したいならmap()、条件で絞り込みたいならfilter()、1つの結果にまとめたいならreduce()を使うと考えると分かりやすいです。

reduceを使うときの注意点

• 初期値はできるだけ指定しましょう。
• 複雑な処理を1つのreduce()に詰め込みすぎないようにしましょう。
• 単純な合計なら分かりやすいですが、複雑な処理ではfor...of文の方が読みやすい場合もあります。
• 空の配列に対して初期値なしで使うとエラーになります。

まとめ

• reduce()は、配列を1つの結果へまとめるためのメソッドである。
• accumulatorは現在までの累積結果、currentValueは現在の要素を表す。
• 合計、平均、最大値、オブジェクト集計などに利用できる。
• 初期値を指定すると、空配列でも安全に処理しやすい。
• map()やfilter()とは用途が異なる。
• 複雑になりすぎる場合は、無理にreduce()を使わず、読みやすい方法を選ぶことも大切である。