【JavaScript】配列操作入門！ reduce, map等を解説します

JavaScriptの配列操作って難しいですよね！

reduce()メソッド等、なぜそういう名前がついているのか検討もつかないかと思います。

今回の記事では、JavaScriptの配列の勉強をしたけど、配列の操作方法がいまいちわからなかったという方のためにreduceとmap,filter等の実際の動きを見ながらYOKOTAが解説します。

なお、配列の基本に関しては下記の記事を参考にしてください。
【超初心者向け】JavaScript・配列の「基本のキ」を理解しよう

1 JavaScriptの配列操作で処理の結果を一つにする reduce()
2 JavaScriptの配列操作で新たに配列を生成する map()
3 JavaScriptの配列操作で要素を絞る filter()
4 JavaScriptの配列操作で要素を検索する find()
5 まとめ

JavaScriptの配列操作で処理の結果を一つにする reduce()

早速ですが、配列操作の代表格であるreduce()メソッドを説明します。
reduce()メソッドはある配列の中の要素へreducer関数を実行し、単一の値を生成します。
下記のコードを見ていただけますでしょうか。

  let numbers = [1,10,100,1000,10000];
  let result = numbers.reduce(function(x, y) {
  return x + y;
  },0);

let numbers = [1,10,100,1000,10000];

let result = numbers.reduce(function(x, y) {

return x + y;

},0);

上記のコードを実行した場合、初期値（本コードの場合は”0”）と配列分すべての要素を合計して一つの値を返します。

実際に動かしてみましょう。下記で実際の動作を確認できるので試してみてください。

See the Pen
配列操作reduce() by codepen1 (@codepen112233)
on CodePen.

表示される値としては、すべての配列の合計として”11111″が出力されているはずです。

初期値として0が設定されています。
この初期値0と配列の一番最初の要素であるnumbers[0]の1が足され、結果”1″がアキュムレーターに保存されます。

そして、アキュムレーターに保存された結果”1″は配列の2番目の要素であるnumbers[1]の10と足された結果”11″がアキュムレーターに保存されます。

これを繰り返して、最後の要素であるnumbers[4]の10000までくれば、すべての要素の合計である”11111″を出力します。

初期値を0から100などに変更してみましょう。

let numbers = [1,10,100,1000,10000]; let result = numbers.reduce(function(x, y) { return x + y; },0);　//←初期値”0″を100に変更しよう//

結果はもちろん、100増えた”11211″が出力されるはずです。

配列の中身が文字列だった場合はどうでしょうか。

例え数字ではなく文字列であったとしても実行すれば初期値にある分も含め、全てくっつけて単一の文字列に変えてくれます。

See the Pen
配列操作reduce()　文字列の扱い by codepen1 (@codepen112233)
on CodePen.

本コードの内容を実行すれば私の名前が出力されているかと思います。

JavaScriptの配列操作で新たに配列を生成する map()

reduce()では複数の要素を一つにまとめて表示させることができました。
それに対してmap()メソッドは関数を与えて全ての配列の要素を呼び出し、その結果新しく配列を生成します。

下記のコードを確認してください。

See the Pen
配列操作map() by codepen1 (@codepen112233)
on CodePen.

上記のコードで言えば、配列numbersのそれぞれの要素に対してx*2の処理が行われ、新しい配列として格納されたものが返ってきます。

map()メソッドの値を取得するために必ずreturn文を使用する点注意してください。

map()メソッドと同じような動きをするメソッドで、forEach()メソッドがあります。

See the Pen
配列操作forEach() by codepen1 (@codepen112233)
on CodePen.

map()メソッドを使用する場合、処理をした後新しく配列を生成します。
それと比べて、forEach()メソッドは処理をするだけです。

結果を確認したい時は再度空の配列を準備して、そこにpushしていくことで結果を確認できます。
試しに、map()をforEach()に書き換えて、実行してみてください。”undefined”が返ってくるはずです。

forEach()のほうがコードが複雑になってしまうので、コードの読みやすさを重視したい方はmap()を使用しましょう。

forEach()

  let numbers = [1,10,100,1000,10000];
  let new_arr = [];
  numbers.forEach(function(x){
  new_arr.push(x * 2)  
});

let numbers = [1,10,100,1000,10000];

let new_arr = [];

numbers.forEach(function(x){

new_arr.push(x * 2)

});

map()

  let numbers = [1,10,100,1000,10000];
  let result = numbers.map(function(x){
  return x * 2;
  });

let numbers = [1,10,100,1000,10000];

let result = numbers.map(function(x){

return x * 2;

});

JavaScriptの配列操作で要素を絞る filter()

map()メソッドは配列の全要素に対して「指定された処理」が行われ、新しい配列を生成しておりました。
filter()メソッドでは配列の全要素からtrueか、falseか判断して、trueと判断される値（「指定された条件」に当てはまる値）を格納した新しい配列を生成します。

下記のサンプルを見てください。

See the Pen
配列操作filter() by codepen1 (@codepen112233)
on CodePen.

こちらでは、指定された条件として、x < 100を設定しており、それに当てはまる要素は1，10です。
よって新しい配列[1,10]が生成されます。
x <100をx < 1000 に変えれば100も当てはまり[1,10,100]が生成されるし、x % 2===0とすれば、2で割り切れる1以外全ての要素が戻り値として出力されます。

JavaScriptの配列操作で要素を検索する find()

find()メソッドは、提供された配列の中から当てはまる一番最初の要素を探し出し、返してくれます。
下記でコードを確認してみましょう。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="codepen112233" data-slug-hash="pobPvvJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="配列操作find()">
  <span>See the Pen <a href="https://codepen.io/codepen112233/pen/pobPvvJ">
  配列操作find()</a> by codepen1 (<a href="https://codepen.io/codepen112233">@codepen112233</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

配列操作find()</a> by codepen1 (<a href="https://codepen.io/codepen112233">@codepen112233</a>)

on <a href="https://codepen.io">CodePen</a>.</span>

</p>

return x > 11;と書いてあるので、配列の中の11より大きいものを配列の左から探し出し（検索し）当てはまる一番最初の要素が返ってきます。つまり今回で言えば100が戻ってきます。

配列のIndex番号を確認したい時は、find()ではなく、findIndex()とすれば確認できます。

  let numbers = [1,10,100,1000,10000];
  let result2 = numbers.findIndex(function(x) {
  return x > 11;
　});
　結果は2!

let numbers = [1,10,100,1000,10000];

let result2 = numbers.findIndex(function(x) {

return x > 11;

　});

　結果は2!

今回の場合1,10,100の3番目が出てくるわけですから、index番号で言えば0から数えて0,1,2の”2″が返ってきます。
では、条件に当てはまる要素がない場合はどうなるでしょうか。
例えばreturn x > 10000;とした場合、当てはまる数字がありません。

  let numbers = [1,10,100,1000,10000];
  let result3 = numbers.find(function(x) {
  return x > 10000;
  });
  10000より大きい数字はないので、結果はundefined!

let numbers = [1,10,100,1000,10000];

let result3 = numbers.find(function(x) {

return x > 10000;

});

10000より大きい数字はないので、結果はundefined!

この場合”undefined”が返ってきます。

まとめ

今回はとっつきにくいJavaScriptの配列操作reduce(),map(),forEach(),filter(),find()について解説しました。codepenを通じて動きがよくわかったかと思います。

配列操作は配列の中身を一つにまとめることもできるし、それぞれ処理を当てて新たに配列を作り出すことができます。配列操作は奥が深いので慣れるまで時間がかかりますが、是非サンプルのコードの数値をいろいろ変えて理解できるまで実行してみてくださいね。

p.s.
本記事を更新した時は2020年10月27日だったのですが、丁度マレーシアの新型コロナウイルスの影響でまた自粛規制が延長となりました。マレーシアでは自由に州を移動できなくなるのでストレスが半端じゃないです。日本にも帰れず、マレーシア中も移動できないという・・・

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。