JavaScript 配列 reduce() 関数：配列を一つの結果値にまとめる

定義と使い方

配列において reduce() 関数は、配列を巡回しながらコールバック関数を使用して、配列を一つの値へと反復的に減らし（reduce）、単一の値として返します。

特徴

配列の要素を巡回し、一つの値へと減らしていくロジックをコールバック関数に記述します。
各段階で減らした値は return キーワードで返されます。
返された値は次の巡回で累積値として使用され、同じロジックで減らし続けます。
元の配列はそのまま維持され、最終的に反復して減らした単一の値が返されます。

この関数は、配列の要素を活用して単一の特定の値を作りたい（またはフィルタリングしたい）時に非常に有用です。

基本例

次は、与えられた配列の各要素の値を合算して一つの値にする際、reduce() 関数を活用した有用な例です。

JavaScript

/**
 * reduce() 関数を使用して
 * 配列の全要素を足し合わせ、累計された一つの値を生成する例
 */

// reduce() 関数を適用する配列
const numbers = [1, 2, 3, 4, 5];

// 開発者が直接作成したコールバック関数
function sum(total, number) {
    // 以前の結果値と現在の要素を足します。
    return total + number;
}

// 配列の全要素にコールバック関数を適用し、集計した一つの結果値を返す
const result = numbers.reduce(sum);
console.log(result); // 出力: 15

構文

arrは reduce() 関数を適用する配列です。

引数

reduce()関数の引数の説明
`callbackFn`	配列の各要素を処理するコールバック関数です。コールバック関数の引数：`callbackFn(accumulator, currentValue[, currentIndex[, array]])` `accumulator`：前回の反復処理の戻り値を保持し、最初の反復（iteration）では初期値（`initialValue`）の値を持ちます。 `currentValue`：現在の反復（iteration）で処理されている配列要素の値を持ちます。 `currentIndex`：オプション。現在処理されている配列要素のインデックスです。 `array`：オプション。`reduce()` 関数を呼び出した配列です。
`initialValue`	オプション。初期累積値です。この引数を省略すると、配列の最初の要素が初期累積値として使用されます。

最初の引数であるコールバック関数（callbackFn）に関連して、関数の形態別の構文形式は以下の通りです。

JavaScript

// アロー関数 (Arrow function)
reduce((accumulator) => { /* … */ })
reduce((accumulator, currentValue) => { /* … */ })
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ })
reduce((accumulator, currentValue, currentIndex, array) => { /* … */ }, initialValue)

// コールバック関数 (Callback function)
reduce(callbackFn)
reduce(callbackFn, initialValue)

// インラインコールバック関数 (Inline callback function)
reduce(function (accumulator) { /* … */ })
reduce(function (accumulator, currentValue) { /* … */ })
reduce(function (accumulator, currentValue, currentIndex, array) { /* … */ })
reduce(function (accumulator, currentValue, currentIndex, array) { /* … */ }, initialValue)

戻り値

結果値を返します。
配列が空で、initialValueが渡されない場合はエラーが発生します。

コールバック関数の作動原理

JavaScript reduce() 関数で使用されるコールバック関数の構造

/**
 * コールバック関数
 *
 * コールバック関数は、名前付き関数（ユーザー定義関数）や匿名関数などで使用できます。
 * （当然ながら）すべてのコールバック関数はアロー関数として使用可能です。
 */

/* コールバック関数に名前付き関数を使用する場合 */
function callbackFn(accumulator, currentValue, currentIndex, array) { // 名前付き関数の定義
    // 単一の値を生成するロジック：累積された結果を返す必要があります。
}

arr.reduce(callbackFn); // 定義した名前付き関数名を引数に直接渡す

/* コールバック関数に匿名関数を使用する場合 */
arr.reduce(function (accumulator, currentValue, currentIndex, array) {
    // 単一の値を生成するロジック：累積された結果を返す必要があります。
});

reduce() 関数のコールバック関数は、配列の各要素に対して呼び出され、前の段階で計算した値を累積（蓄積）する役割を果たします。コールバック関数の作動原理について詳しく説明します。

最初の反復（iteration）： reduce() 関数が呼び出されると、まず初期値（initialValue）と配列の最初の要素がコールバック関数に渡されます。
- accumulator：初期値（initialValue）の値が accumulator 変数に割り当てられます。
- currentValue：配列の最初の要素の値が currentValue 変数に割り当てられます。
- コールバック関数が呼び出され、前の反復の結果値（accumulator）と現在の要素（currentValue）を活用して新しい値を返します。
二回目以降の反復（iteration）： それ以降の反復では、初期値（initialValue）は使用されません。代わりに、前の反復の結果値（accumulator）と現在の要素（currentValue）がコールバック関数に渡されます。
- accumulator：前の反復で返された値（前の結果値）が accumulator 変数に割り当てられます。
- currentValue：次の配列要素の値が currentValue 変数に割り当てられます。
- コールバック関数が呼び出され、前の反復の結果値（accumulator）と現在の要素（currentValue）を活用して新しい値を返します。
反復の終了： 配列の全要素が処理されるまで、この反復と結果値の計算が繰り返されます。
最終結果の返却： 配列の全要素が処理された後、reduce() 関数は最後のコールバック関数の呼び出しによる戻り値を最終結果値として返します。

このような過程を通じて、配列の要素を巡回しながらコールバック関数を繰り返し呼び出し、その結果を累積して最終的な結果値を集計します。コールバック関数内では、現在の要素と前の段階での結果を利用して、目的の演算を行うことができます。

reduce()関数のコールバック関数を説明する際、currentIndex と array 引数は選択事項（オプション）であるため、必要に応じて使用できるという点については強調しませんでした。これら2つの引数は、コールバック関数で必要な場合にのみ選択的に活用できます。

活用例

reduce()関数は、主に次のような目的で使用されます。

配列のすべての要素を加算する

JavaScript

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

const sum = (total, number) => {
	return total + number;
}

const result = numbers.reduce(sum);
console.log(result); // 出力: 15

配列のすべての要素を乗算する

JavaScript

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

const sum = (total, number) => {
	return total * number;
}

const result = numbers.reduce(sum, 1);
console.log(result); // 出力: 120

上記のコードでは、初期累積値として 1 を使用し、各要素を掛け合わせて結果を累積します。初期累積値を 0 に設定すると、すべての値に 0 が掛けられて結果が 0 になってしまうため、1 を使用することが重要です。

配列の最小値を見つける

JavaScript

const numbers = [5, 3, 9, 2, 7];

const min = (min, item) => {
    return (item < min) ? item : min;
}

const result = numbers.reduce(min, numbers[0]);
console.log(result); // 出力: 2

上記のコードでは、初期累積値を配列の最初の要素である numbers[0] に設定し、コールバック関数で現在の要素が累積値よりも小さければ、現在の要素を最小値として選択します。

配列の最大値を見つける

JavaScript

const numbers = [5, 3, 9, 2, 7];

const max = (max, item) => {
    return (item > max) ? item : max;
}

const result = numbers.reduce(max, numbers[0]);
console.log(result); // 出力: 9

上記のコードでも、初期累積値を配列の最初の要素に設定し、コールバック関数で現在の要素が累積値よりも大きければ、現在の要素を最大値として選択します。

配列を返す方法

reduce() 関数を使用して配列を返す方法は、コールバック関数内で配列に値を追加し、累積していく方式で実装できます。ここに簡単な例を提示します。この例では、配列の各要素を二乗して新しい配列を生成します。

JavaScript

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

const square = (accumulator, currentValue) => {
    // 現在の要素の二乗値を計算して配列に追加
    accumulator.push(currentValue * currentValue);
    return accumulator; // 累積された配列を返却
}

const squaredArray = numbers.reduce(square, []);

console.log(squaredArray); // 出力: [1, 4, 9, 16, 25]

コードの補足説明
push() 関数は、配列の末尾に1つ以上の要素を追加（push、後ろから入れ込む）する関数です。

この例では、reduce() 関数は空の配列（[]）を初期値として使用し、コールバック関数内で各要素を二乗した値を accumulator 配列に push() 関数を使用して追加します。最終的に累積された配列が返され、squaredArray 変数に格納されます。

提供された例では、map() 関数を使用する方がよりシンプルで明確でしょう。

map() 関数は、配列の各要素に関数を適用し、その結果として新しい配列を生成するのに特に有用です。以下は、同様の作業を map() 関数を使用して行う例です。

JavaScript reduce()関数の代わりに map()関数を使用する

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

const square = (currentValue) => {
    return currentValue * currentValue;
}

const squaredArray = numbers.map(square);

console.log(squaredArray); // 出力: [1, 4, 9, 16, 25]

コードの補足説明
map() 関数は、配列を巡回して各要素にコールバック関数を適用して処理し、それらをまとめた新しい配列を返します。

map() 関数を使用すると要素の変換作業が明確に表現され、配列を新しい配列にマッピングする際の使用に適しています。reduce() 関数は配列を累積したり変換したりする際、より複雑な作業に有用です。したがって、作業に応じてより適切な関数を選択することが重要です。

仕様書

reduce() 関数の仕様
仕様書
`reduce()`	ECMAScript® 2026 Language Specification #sec-array.prototype.reduce

互換性

JavaScript 配列 reduce() 関数：配列を一つの結果値にまとめる

定義と使い方

特徴

基本例

構文

引数

戻り値

コールバック関数の作動原理

活用例

配列のすべての要素を加算する

配列のすべての要素を乗算する

配列の最小値を見つける

配列の最大値を見つける

配列を返す方法

仕様書

互換性

参考資料

関連項目