プログラミングを勉強していると、配列の処理で必ずと言っていいほど出会うのがmapとforEachです。
どっちも繰り返し処理をするものですが、実は大きな違いがあるんです。
最初は戸惑うかもしれませんが、一度覚えてしまえばとっても簡単です。
配列を新しく作りたいのか、ただ処理をしたいだけなのかで使い分けるのがポイントになります。
初心者の方にもわかりやすく、実例を交えて説明しますね。
この記事ではJavaScriptでmapとforEachはどう使い分ける？違い・書き方・実例を紹介について解説していきます。
mapとforEachの決定的な違いは新しい配列を作るかどうか
JavaScriptにおけるmapとforEachの最大の違いは、新しい配列を返すかどうかです。
ここだけ押さえておけば、もう迷うことはありません。
それぞれの特徴をまとめると以下のようになります。
- map：処理をした結果をまとめて、新しい配列として返してくれます。
- forEach：ただ順番に処理を実行するだけで、何も返しません。
たとえば、りんご、みかん、バナナという配列があったとします。
mapを使うと、それぞれをジュースにして「ジュースの配列」を新しく作ることができます。
一方で、forEachはそれぞれをミキサーにかける動作をするだけで、ジュースの配列としては受け取れないというイメージです。
目的に合わせて、この2つをうまく使い分けていくことが大切になります。
mapの使い方と実例を紹介
それでは、mapの具体的な使い方を見ていきましょう。
mapは、元の配列のデータに何らかの加工をして、新しい配列を作りたいときに大活躍します。
たとえば、数字の配列があって、すべての数字を2倍にした新しい配列を作りたいとします。
このように書くと、コンソールには `[2, 4, 6]` と表示されます。
元の配列であるnumbersの中身は変わらず、新しくdoubledという配列が作られているのがポイントです。
Webサイトを作るときなどは、サーバーから受け取ったデータを画面に表示しやすい形に変換するときによく使われます。
データの中身を書き換えたいときは迷わずmapを選びましょう。
forEachの使い方と実例を紹介
次はforEachの使い方です。
forEachは、配列の中身を一つずつ取り出して、順番に処理を実行したいときに使います。
それでは、配列の要素を順番に画面に出力する実例を見てみましょう。
これを実行すると、コンソールに順番に「りんご」「みかん」「バナナ」と表示されます。
forEach自体は新しい配列を返さないため、結果を変数に代入しても空っぽになってしまいます。
ただひたすらに、決められた処理を繰り返したいときはforEachの出番です。
ボタンをクリックしたときにリストの項目を順番にチェックするような処理でよく使われます。
初心者がやりがちな失敗と解決策
mapとforEachを使い分けるときに、初心者がよくやってしまう失敗があります。
それは、新しい配列が欲しいのにforEachを使ってしまうことです。
よくある間違った書き方を見てみましょう。
これを実行すると、何も返ってこない状態になってしまいます。
なぜなら、forEachは結果を返さないからです。
この問題を解決するには、目的に合わせて正しく選び直す必要があります。
- 解決策1：新しい配列が欲しいなら、素直にmapを使う。
- 解決策2：どうしてもforEachを使いたいなら、空の配列をあらかじめ用意して、そこに結果を追加していく。
基本的には、新しい配列を作るときはmapを使うのが正解と覚えておけば間違いありません。
mapとforEachに関するよくある質問
ここで、mapとforEachに関するよくある疑問にお答えします。
そうなんです。
mapもforEachも、最後まで必ず処理を実行しきってしまうという特徴があります。
- 質問：もし途中で処理を止めたい場合はどうすればいいですか？
- 回答：その場合は、昔ながらのfor文を使ったり、別の機能を使う必要があります。
- 質問：どっちの方が処理が速いの？
- 回答：実行する環境によって少し変わりますが、最近のブラウザなら速度の差はほとんどありません。速度よりも、コードの読みやすさや目的を優先して選ぶようにしましょう。
最初は難しく感じるかもしれませんが、書いていくうちに自然と使い分けられるようになりますよ。
プログラミングを本気で学ぶならスクールがおすすめ
ここまでJavaScriptの配列処理について解説してきましたが、いかがでしたでしょうか。
独学で勉強していると、こういった細かい使い分けでつまずいてしまうことがよくあります。
スクールに通えば、現役のエンジニアがあなたのコードを見て的確なアドバイスをしてくれます。
エラーで何時間も悩む必要がなくなり、学習のスピードが格段にアップしますよ。
- わからないことをすぐに質問できる環境が手に入る。
- 実践的なスキルを効率よく学ぶことができる。
- 一緒に頑張る仲間ができるのでモチベーションが続く。
本気でエンジニアを目指すなら、プログラミングスクールの無料カウンセリングを受けてみるのも一つの手です。
自分に合ったスクールを見つけて、プログラミングの学習をさらに加速させましょう。
DMM WEBCAMP 学習コース（プログラミングコース）
Skill Hacks
CodeCamp
まとめ
JavaScriptのmapとforEachの使い分けについて解説しました。
最大のポイントは、新しい配列を作るかどうかです。
新しい配列を作りたいときはmapを使います。
ただ順番に処理を実行したいだけのときはforEachを使いましょう。
最初は戸惑うかもしれませんが、何度かコードを書いていけば自然と使い分けられるようになります。
ぜひご自身のプログラムでも積極的に使ってみてくださいね。
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
