JavaScriptのreduceで配列を扱う方法をわかりやすく初心者向けに解説！

2024-04-29

当サイトでは一部リンクに広告が含まれています

プログラミングを学習する中で、配列の操作は非常に重要なスキルの1つです。

JavaScriptでは配列を操作するための様々なメソッドが用意されていますが、中でも強力な機能を持つものの1つがreduce()です。

しかし、reduce()の使い方は初心者にはわかりにくいと感じる人も多いのではないでしょうか？
実際、筆者も最初は戸惑ってしまいました…。

そこで今回は、JavaScriptのreduce()メソッドについて、初心者でもわかるように基本的な使い方から具体的な活用例まで詳しく解説していきます。

reduce()の特徴をしっかりと掴んで、配列操作の引き出しを増やしていきましょう！

この記事を書いた人

未経験からWebエンジニアとして転職成功（年収 30% アップ）
現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

reduce()とは？

JavaScriptの配列には、さまざまな組み込みメソッドがあります。今回紹介するreduce()は、配列の各要素に対して何らかの処理を行い、最終的に単一の値にまとめるメソッドです。

たとえば、配列の合計値や最大値を求めたり、配列の要素を使って新しいオブジェクトを生成したりといった使い方ができます。reduceは「減らす」という意味ですが、これは配列の要素を1つの値に集約するというニュアンスからきています。

reduce()の基本的な使い方

構文

reduce()の基本的な構文は次の通りです。

array.reduce(callback[, initialValue])

callback: 各要素に対して実行するコールバック関数
initialValue: 任意の初期値

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

array.reduce((accumulator, currentValue, currentIndex, array) => { /* ... */ })

それぞれの引数の意味は以下の通りです。

accumulator（acc）: 累積値。各要素を処理した中間結果が格納される
currentValue（cur）: 現在処理されている配列の要素
currentIndex: 現在処理されている配列のインデックス番号（0から開始）
array: reduce()を呼び出した元の配列

実際にどのように使えるのか、具体例を見ていきましょう。

配列の合計値を求める

1つ目の例は、配列に含まれる数値の合計値を求めるプログラムです。

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

const sum = numbers.reduce((acc, cur) => acc + cur);

console.log(sum); // 15

ここでは、accには前の処理の結果（合計値）が、curには現在の要素の値が順番に渡されていきます。
各ステップでacc + curが実行され、最終的に配列のすべての要素を足し合わせた値が返されます。

reduceの初期値を省略した場合、accの初期値にはnumbersの最初の要素である1がセットされ、curには2番目の要素の2から処理が開始されます。

文字列の配列を連結する

次は、文字列が含まれた配列の要素をすべてつなぎ合わせて1つの文字列にする例です。

const strings = ['Hello', ' ', 'World', '!'];

const message = strings.reduce((acc, cur) => acc + cur);

console.log(message); // "Hello World!"

こちらも、合計値を求める場合と同様に、accには前のステップまでの連結結果が、curには現在の要素が渡され、最終的にすべての文字列が結合されます。

初期値を指定する

先ほどの例では、accの初期値を指定していませんでした。明示的に初期値を指定するには、reduce()の第2引数に初期値を渡します。

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

const sum = numbers.reduce((acc, cur) => acc + cur, 0);

console.log(sum); // 15

この例では、第2引数に0を渡しているので、accの初期値は0になります。そして最初から配列の要素が順番に処理されていきます。

reduce()とmap()の違い

ここで、配列の各要素に対して処理を行うメソッドとして有名なmap()との違いについて触れておきましょう。

map()は配列の各要素に対して処理を行い、その結果を新しい配列として返します。
一方、reduce()は配列の要素を使って処理を行いますが、最終的に単一の値を返す点が大きく異なります。

たとえば、配列の各要素を2倍した値の配列を取得したい場合はmap()を使います。

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

const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

一方、reduce()ではこのような配列ではなく1つの値を返します。reduce()で同じように各要素を2倍にしても、結果はその合計値になります。

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

const doubledSum = numbers.reduce((acc, cur) => acc + cur * 2, 0);

console.log(doubledSum); // 30

reduce()は配列から単一の値を取得したいときに使うのが基本ですが、map()と組み合わせるとより柔軟な処理ができます。まずmap()で配列を変換してから、reduce()で集計するのが定番のパターンです。

reduce()の注意点

reduce()を使う際の注意点としては、空の配列に対してreduce()を呼び出すとエラーになることが挙げられます。

const empty = [];

// 初期値を指定しない場合はエラー
console.log(empty.reduce((acc, cur) => acc + cur)); // エラー

空の配列にreduce()を使う場合は、必ず初期値を指定するようにしましょう。

const empty = [];

// 初期値を指定すればエラーにはならない
console.log(empty.reduce((acc, cur) => acc + cur, 0)); // 0

空の配列に初期値0を指定してreduce()を呼び出せば、結果は0になります。

また、通常のループ処理と違って、reduce()の途中で処理を中断することはできません。配列のすべての要素が最後まで処理されます。

途中で打ち切りたい場合は、コールバック関数の中で条件分岐を行うか、reduceではなくfor文などの制御構文を使う必要があります。

まとめ

今回は、JavaScriptのreduce()メソッドについて詳しく解説しました。reduce()は配列の要素を順番に処理し、最終的に単一の値を返すメソッドです。

配列の合計値や、要素をまとめて1つの文字列にするのに便利
reduce()とよく似たmap()は、配列の各要素を加工して新しい配列を返すメソッド
reduce()は空の配列に使うと例外が発生するので、初期値の指定が重要

reduce()をマスターすることで、配列を自由自在に操ることができるようになるはずです。ぜひ色々な場面で活用してみてください。

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。

おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！

Muscle Coding

JavaScriptを学べるおすすめプログラミングスクールを現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…