JavaScriptのreduceメソッドの使い方について書いています。
reduceメソッドは配列から呼び出して、配列要素の値の合計値などを算出するときなどに役立ちます。
JavaScriptのreduceメソッドとは？
reduceメソッドは、配列の各要素に対して指定されたコールバック関数を実行し、単一の値に集約するメソッドです。
例えば、配列内の数値をすべて足し合わせたり、オブジェクトの配列から特定のプロパティを抽出して新しいオブジェクトを生成したりといった処理が可能です。
基本的な構文は以下のとおりです。
array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)
callback: 各要素に対して実行する関数。以下の引数を取ります。accumulator: 累積値。コールバック関数の前回の呼び出しからの戻り値、またはinitialValueです。currentValue: 現在処理されている要素。currentIndex(オプション): 現在処理されている要素のインデックス。array(オプション):reduceが呼び出された配列。
initialValue(オプション): 最初のaccumulatorの値。指定しない場合は、配列の最初の要素が使用されます。ただし、空の配列でinitialValueを指定しないとエラーが発生するため、特に理由がない限りは指定することを推奨します。
reduceメソッドを使って数値の合計値を取得する
reduceメソッドを使って合計値を求めてみます。
アロー関数を使わずにわかりやすく
わかりやすくするために、まずはアロー関数をつかわずに、合計値を求める処理を確認してみます。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, value) {
return total + value;
}, 0); // initialValueは0
console.log(sum); // 出力: 15
この例では、totalは累積値、valueは現在の要素を表しています。
numbers配列には数値が入っていて、次の行でreduceメソッドを呼び出しています。
コールバック関数内でtotalにvalueを加算し、その結果を返しています。
こうすることで、足された結果が返ってtotalが足し込まれていきます。
初期値(initialValue)は0なので、最初のtotalは0から始まります。
最終的な結果をsumで受け取って、出力すると、足した合計値の15となっています。
下記のように関数内で、ログ出力すると、さらに処理がわかりやすいです。
reduce内にログ出力を含めています。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, value) {
console.log(`合計値:${total} 現在値:${value}`);
return total + value;
}, 0); // initialValueは0
初期値が0でtotalに足されていっていることが確認できます。
合計値:0 現在値:1
合計値:1 現在値:2
合計値:3 現在値:3
合計値:6 現在値:4
合計値:10 現在値:5
アロー関数を使って処理
同じ処理をアロー関数を使って記述すると、より簡潔に書くことができます。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, value) => total + value, 0);
console.log(sum); // 出力: 15
reduceメソッドを連想配列につかう
reduceメソッドは連想配列（実際にはオブジェクトの配列）にも使用できます。
例えば、以下のようなオブジェクトの配列があるとします。
const items = [
{ name: 'Apple', price: 100 },
{ name: 'Banana', price: 200 },
{ name: 'Orange', price: 150 }
];
これらの価格の合計を求めるには、以下のようにします。
const totalPrice = items.reduce((total, object) => total + object.price, 0);
console.log(totalPrice); // 出力: 450
配列からreduceメソッドを呼び出しています。
渡しているobjectが配列のオブジェクト要素です。
それぞれのpriceプロパティにアクセスして足し込んでいます。
結果を確認すると、合計値の「450」になりました。
reduceで新しいオブジェクトの配列を生成する
reduceメソッドを使って、オブジェクト配列から新しいオブジェクト配列を作成するサンプルコードです。
初期値を[]として、配列にしているところがコツです。
const users = [
{ id: 1, name: '田中', age: 25, city: '東京' },
{ id: 2, name: '山田', age: 30, city: '大阪' },
{ id: 3, name: '佐藤', age: 22, city: '福岡' }
];
const namesAndAges = users.reduce((newArray, object) => {
newArray.push({ name: object.name + 'さん', age: object.age });
return newArray;
}, []);
usersのオブジェクト配列から、reduceを呼んでいます。
newArrayが新しく作られる配列で、objectが配列の要素です。
それぞれのオブジェクトからnameとageのプロパティだけを使って、新しいオブジェクトを作り配列にpushしています。
返ってきたnamesAndAgesを出力すると、下記のように新しいオブジェクト配列ができていることが確認できます。
[
{name: '田中さん', age: 25}
{name: '山田さん', age: 30}
{name: '佐藤さん', age: 22}
]
reduceメソッドの使いどころは？
reduceメソッドは、配列を単一の値に集約するあらゆる場面で役立ちます。
具体的には、
- 数値の合計、平均、最大値、最小値の計算
- 配列内の文字列の連結
- オブジェクトの配列から特定のプロパティの抽出
- 配列の変換（例：配列をオブジェクトに変換）
など、様々な用途で活用できます。
おわりに
今回はJavaScriptのreduceメソッドについて確認しました。
reduceメソッドを使うことで、JavaScriptの配列の合計値を取得したり、新しいオブジェクトを作ることができました。
使いこなせるようになるとコードがより簡潔になり、効率的に記述できるようになりそうですね。
コメント