スライドショー

【JavaScript入門】初心者でも分かるreduce()の使い方とサンプル例まとめ

こんにちは、ライターのマサトです!

今回は、配列の各要素を順番に累積して1つの値にできる「reduce()」メソッドについて学習をしていきましょう!

この記事では、

  • 「reduce()」とは?
  • 「reduce()」の使い方
  • 「map()」と「reduce()」の違い
  • 「break」の代替え方法

という基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、reduce()メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「reduce()」とは?

それでは、まず最初に「reduce()」の基本的な知識から身につけていきましょう。「reduce()」は、配列データの各要素を累積して1つの値にする用途に最適なメソッドになります。

例えば、次のような配列があるとします。

var numbers = [1,2,3,4,5,6,7,8,9];

var strings = ['リンゴ','バナナ','メロン','スイカ','レモン'];

この例では、数値データが格納された配列と文字列データが格納された配列を用意しました。reduce()のもっとも分かりやすい使い方は、このような配列に格納された値をすべて足した値を算出したいケースでしょう。

数値であればすべて合計した値を算出し、文字であればすべて繋ぎ合わせた1つの文字列を取得できるわけです。

「reduce()」の使い方

この章では、reduce()の基本的な使い方について見ていきましょう。基本となる構文から実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、もっとも基本となる構文から見ていきましょう。reduce()は対象となる配列に対して任意の関数を実行することができます。

配列.reduce(function(累積値, 要素) { })

第1引数の「累積値」には、配列要素を順番に処理していった値が格納されます。第2引数の「要素」は現在処理されている配列要素を意味しています。この関数内で「return」を使い、任意の処理を返すことで累積値に結果が保持されて最終的に1つの値となって取得できるわけです。

配列の各要素を合計する方法

それでは、簡単なサンプル例をプログラミングしながら実際の使い方を見ていきましょう。冒頭でも少し触れましたが、配列に格納された数値データをすべて合計した値を取得してみます。

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b) {

  return a + b;

})

console.log(result);

実行結果

45

この例では、1〜9までの数値が格納された配列に対してreduce()を実行しています。関数内では累積値と各要素を単純に足し算しているのが分かりますね。

1回目の処理で「1 + 2」となり、その合計が累積値に格納されて次の処理では「3 + 3」が実行されるというわけです。これにより、実行結果のようにすべての合計値「45」が出力されるのです。

「map()」と「reduce()」の違い

類似メソッドの「map()」との違いについても解説しておきます。「map()」「reduce()」どちらも配列に対して処理できるメソッドなのですが、その用途については少し違います。

最も大きな違いとしては、「map()」は何らかの処理を行った結果を新しい配列として生成できる点にあります。例えば、配列に格納されている数値を2倍にした新しい配列を作りたい場合は次のように記述します。

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

var result = numbers.map(function(num) {
  return num * 2;
})

console.log(result);

実行結果

[2, 4, 6, 8, 10]

この例では、数値が格納されている配列に対してmap()を実行しています。関数内で配列の各要素を2倍にしてreturnしているのが分かりますね。これにより、元の数値を2倍にした配列を生成することができるのが実行結果からも分かります。

厳密にはreduce()でも同様のことは出来なくもないのですが、map()を使えば非常に簡単な記述で効率よく行えます。map()については、基本から応用技までを次の記事で詳しくまとめているのでぜひ参考にしてみて下さい!

【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説!
更新日 : 2019年5月23日

「break」の代替え方法

ここまで、reduce()の基本的な使い方を見てきましたが1つ注意点があります。reduce()の関数内では「break」を使って処理を中断する方法が使えません!

そこで代替策として、配列のインデックス番号を活用した中断方法があるのでご紹介しておきます。実は、reduce()の関数は第4引数まであります。

配列.reduce(function(累積値, 要素, インデックス番号, 配列) { })

第3引数の「インデックス番号」は、現在処理されている配列のインデックス番号が格納されています。第4引数の「配列」は、現在処理されている配列そのものが格納されています。

この引数を活用すれば、次のように処理を途中で中断することが可能です!

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b, index, arr) {

  if(index >= 3) arr.splice(1);
  
  return a + b;

});

console.log(result);

実行結果

10

reduce()の関数内に記述されたIF文に注目してください!

「index >= 3」と条件式に記述することで、配列の3番目のインデックス番号になった時点で任意の処理を実行することができます。その処理というのが「arr.splice(1)」になり、3番目のインデックス以降の配列要素をすべて削除することになります。

その結果、reduce()の処理は終了することになるので「break」と同様な機能を実行できるわけです。

まとめ

今回は、配列の各要素を累積して1つの値にできる「reduce()」メソッドについて学習をしました。最後に、もう一度ポイントをおさらいしておきましょう!

  • reduce()は配列内の数値や文字列を累積して1つの値にすることができる
  • 類似メソッドのmap()との違いは結果を新しい配列として生成できるかどうか
  • breakが使えないのでインデックス番号を活用して同様の機能を作る

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説