【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ!

マサト
書いた人 マサト

プログラミングの必須スキル、繰り返し処理って活用できていますか?
中でも配列を使った繰り返し処理は、汎用性も高く、効率のよいコードを書くことができます

でも、配列の繰り返し処理ってどうやればいいんだろう… 

今回はそんな方必見!
JavaScriptで効率よく配列の中身を取り出すことができる、forEach文について学習をしていきましょう。

下記の流れで、forEach文をバッチリ使いこなせるよう解説していきます。

【基礎】forEach文とは?
【基礎】forEach文の使い方
【基礎】forEach文でJSONを取得する
【発展】breakやcontinueは使えない!
【発展】forEach文のコールバック関数
【発展】forEach文の類似メソッド
【発展】forEach文の使い方まとめ

この記事で、forEach文をしっかり学習して自分のスキルアップを目指しましょう!

>>> 今すぐ「forEach文」の使い方を知りたい方はこちら

forEach文とは?

それでは、まず最初にforEach文について基本的な知識から身に付けていきましょう!

forEach文は、配列データに特化した繰り返し処理を簡単に実行できるメソッドになります。

例えば、配列の中身を取り出すには一般的に下記のようなfor文を使いますよね?

これでも良いのですが、ループの終了条件やカウンターなどの設定が必要なので少し面倒な部分もあります。

しかし、forEach文を使えばこのような初期設定が不要でとても効率よく記述できるのです。

また、コールバック関数も使えるので複雑な条件分岐処理もスマートに実装できます。

これは使わない手はないですね!

forEach文よりも先に、基本的な繰り返し処理となるfor文について確認しておきたい…
という方は、下記の記事でバッチリ学んでおきましょう!

>>要素を繰り返し処理!for文の使い方

forEach文の使い方

では早速、forEach文の基本的な使い方について詳しく見ていきましょう。

主に、一般的な構文や書き方などから実際の例も交えて学んでいきいます。

基本的な構文と使い方

forEach文の基本的な形は、下記のようなものです。

一般的な使い方としては、配列.forEach( 処理 )のように配列データに対してforEachを実行します。

forEach文は、配列データの値1つずつに対してコールバック関数に記述した処理を実行できます。

コールバック関数は、いくつか引数を受けとることが可能で、これにより簡単な繰り返し処理を実現しています。

配列をループさせて中身を取得する

それでは、簡単な練習として一般的な配列データをループさせながら中身の要素を取得してみましょう!

次のサンプル例を見てください。

実行結果

このプログラムは、果物の名称が格納された配列「items」を使い、それぞれの名称をコンソールログで表示するという内容です。

コールバック関数の引数としてvalueを設定していますが、この変数に配列の値となる果物の名称が1つずつ代入されるようになります。

for文と違って、繰り返し回数やカウンタ変数などをまったく意識せずに扱えるので、非常にシンプルにコードが書けているのが特徴ですね。

オブジェクト構造の中身を取得する

今度は、もう少し複雑な配列に挑戦してみましょう!

次のプログラムは、配列の中にオブジェクトを格納したサンプルです。

この配列にforEach文を使って、先ほどのサンプルと同じ出力結果を表示するにはどうすれば良いでしょうか?

先に正解を書くと、次のようになります!

出力結果

バナナ
リンゴ
メロン
ブドウ

forEach文は、コールバック関数の引数valueに、配列の値が1つずつ代入される構文でした。

今回の場合、配列の値がオブジェクトになっているので、そのキーとなるnameを直接指定すれば、果物の名称が1つずつ取得できるというわけです。

forEach文でJSONを取得する

この章では、JSON形式のデータの中身をforEach文で取得できるかどうかを見ていきましょう!

JSONデータはJavaScriptのオブジェクト構造によく似たもので、例えばサーバー間でデータのやり取りを行う時などによく使われています。

JSONについての基礎知識やJavaScriptでの扱い方などに不安のある方は、以下の記事で詳しくまとめているので参考にしてみてください!

ここでは、サンプル例として次のようなJSONデータの文字列を用意します。

この例では、「taro」「hanako」というユーザーの情報を配列構造で持ったJSONデータであることが分かりますね。

このJSONの中身をforEachで取得するにはどうすれば良いでしょうか?

forEachはこれまで解説した通り「配列」に対して利用できるメソッドであるため、このままでは扱うことができません。

そこで、まずはJSONをJavaScriptで扱えるオブジェクトに変換してみましょう!

「JSON.parse()」を使えば簡単にJSON形式からオブジェクトに変換できます。

このオブジェクトの「キー」を配列構造にしてからforEachを使えば、上手くループが回せそうですね。

実行結果

この例では、「Object.keys()」を使ってオブジェクトの「キー」を配列で取得し、forEachを使ってキーに対する値を取得しています。

ポイントは、forEachで取得したキーを使って「obj[key]」のように記述することで値が取得できるという点です。

breakやcontinueは使えない!

forEachはfor文と違い、繰り返し処理を中断するbreakやcontinueが使えません

例えば、指定した配列要素を検出した場合にbreakさせる処理を記述してみましょう。

この例は、配列要素の中で「3」を検出した場合に繰り返し処理を中断しようとしています。

しかし、breakは利用できないので実際にはエラーとなってしまうのです。(continueも同様です)

そのため、同じようなことを実現しようとするならfor文を利用するようにしましょう。

この例なら正常に実行されて、繰り返し処理を中断することができます。

forEach文のコールバック関数

ここから、さらにforEach文を使いこなせるように発展した内容を解説していきます。

まずは、コールバック関数の使い方について詳しく見ていきましょう。

関数の引数として利用できる値の使い方やオブジェクトの組み込みかたについて学んでいきます。

コールバック関数の使い方

コールバック関数は引数として3つの値を受け取ることができます。

上記のとおり、valueindexarrayの3つの引数を取得できます。
それぞれの意味は次のとおりです。

value:配列データの値
index:配列のインデックス番号
array:現在処理している配列

例として、配列の奇数になる値だけを抽出して表示するプログラムを作ってみましょう!

このプログラムでは、配列のインデックス番号となる引数「index」を使って奇数となる値を抽出していますね。

さらに、配列の元データをすべて2倍にして上書きするプログラムにしてみましょう。

コールバック関数の引数「array」は、現在処理している配列の元データが格納されています。

そこで、元データにindexを組み合わせて変更&上書きする処理を作っています。

元の配列「lists」の中身を見てみると、「2, 4, 6, 8, 10, 12, 14, 16」となっており、すべて2倍に変更されているのが分かりますね。

第2引数にオブジェクトを設定する

ここからはforEach文の少し特殊な使い方を学習しておきましょう!

冒頭で、forEach文の一般的な構文を次のように紹介しました。

この構文にはちょっとした秘密があります。
なんと、任意のオブジェクトをコールバック関数内の「this」として設定することができるのです。

これはforEach文の第2引数にオブジェクトを指定することで実現します。

簡単なサンプルで練習してみましょう!

例えば、果物の価格を格納している次のようなオブジェクトがあったとします。

このオブジェクト「priceLists」を、今までどおりのforEach文に組み込んでみると次のようになります。

コードの最後に、「priceLists」が第2引数として記述されているのが分かりますね。

この状態にしておけば、コールバック関数内の「this」は、オブジェクト「priceLists」を参照するようになるわけです。

例えば、次のように書くと果物の価格を表示できるようになります。

出力結果

バナナの価格は100円です
ブドウの価格は250円です

valueは配列「lists」の値を取得し、「this[value]」はオブジェクト「priceLists」の値を取得するという点がポイントです。

少し特殊な使用方法ですが、必要に応じて使い分けて活用してください。

forEach文の類似メソッド

JavaScriptのforEach文には、ちょっと似ているメソッドが存在しています。

間違わないよう、違いをしっかり確認していきましょう!

$.eachとの違い

JavaScriptをより簡潔に記述する為の便利なライブラリといえば、jQueryですね。

jQueryには、forEach文と似たメソッドが存在します。
それが、eachメソッドです。

jQueryのeachメソッドについて詳しく知りたい方は以下の記事を読んでみてください。

>>jQueryで繰り返し処理!eachメソッドの使い方

配列の要素を順に繰り返し処理することができる点では同じですが、異なる点も存在します。
どんな違いがあるのか見ていきましょう!

コールバック関数の引数の構成が違う

先ほど解説した通り、forEach文のコールバック関数では3つの引数がセットされました。

jQueryのeachメソッドの場合、コールバック関数(function)の第一引数はindex、第二引数はvalueになります。
指定する位置が逆になりますので、注意が必要です。

繰り返し処理から抜けることができる

JavaScriptのforEach文はループ処理(繰り返し処理)を途中で止めることができませんね。

しかし、jQueryのeachメソッドではreturn falseを記述することで実現可能です。

JavaScriptで同じように配列の要素の繰り返し処理を途中で止めるためには、forEachメソッドの代わりにsomeメソッドを利用する必要があります。

someメソッドについては以下の記事で詳しく解説をしていますので、ぜひ参考にしてください。

>>配列の要素を検索する!someメソッドの使い方

mapとの違い

こちらはJavaScriptのメソッド同士での違いですね。

mapはforEach文と同じく、配列データに対して繰り返し処理ができるメソッドです。

記述方法もほとんど同じなのですが、決定的に違うのは返り値があるかどうかという点です。

次の例を見てください。

この例では、配列「array」に格納されている要素をそれぞれ2倍にした値を新しい配列「newArray」に格納しています。

この内容と全く同じ処理をmapの返り値を使って実現すると次のようになります。

処理がスッキリしましたね。

注目すべきはmap内の処理でreturnを利用している点です。

これにより、2倍にした値を返り値として新しい配列「newArray」に格納できるわけです。

mapのさらなる活用事例は下記の記事でまとめているので、ぜひ参考にしてみてください。

>>スッキリコードで繰り返し処理!mapの使い方

forEach文の使い方まとめ

最後に、forEach文の基本的な使い方をまとめておきます。

一般的な配列をループさせて中身を取得するには、次のように記述します。

配列に続けてforEachを実行し、コールバック関数内に必要な処理を記述します。

また、配列内にオブジェクト構造がある場合のforEachは次の通りです。

コールバック関数の引数に続けてオブジェクトのプロパティ名を指定すれば、対応する値を取得することができます。

コールバック関数で受け取れる引数は3種類あります。

上記のとおり、value、index、arrayの3つの引数を取得できます。

それぞれの意味は次のとおりです。

value:配列データの値
index:配列のインデックス番号
array:現在処理している配列

ちなみに、forEachには第2引数へ任意のオブジェクトを設定することも可能です。

これにより、コールバック関数内で任意のオブジェクトを組み合わせた処理を簡単に記述することができるので覚えておきましょう!

まとめ

今回はforEach文の基本的な使い方から、ちょっと特殊な応用技まで学習してきました。

簡単にまとめると次のようになります!

・配列の値にコールバック関数から1つずつ処理を行える!
・3つの引数を上手に活用することで、配列処理を効率よく書ける!
・任意のオブジェクトをコールバック関数のthisとして指定することが可能!
・類似メソッドとして$.eachmapがある

これらのポイントを理解しつつ、ぜひ自分なりのforEach文の使い方を模索していってくださいね!

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

非常識な結果を出す卒業生多数!

エンジニアキャリア戦略

人気記事セレクション

3000名以上来場の人気セミナーが開催決定

18歳で時給6000円だった侍エンジニア塾代表の木内より、『プログラミングで人生を変える』ための学習方法をお教えます。

0からプログラミングを習得し、フリーランスエンジニアになる方法プログラミング学習の効率を劇的に上げる学習メソッドを解説しますので、奮ってご参加ください。

  • 日付:3/30(日)
  • 時間:14:00〜17:00終了予定
  • 場所:当社 道玄坂オフィス
  • 住所:〒150-0043 東京都渋谷区道玄坂2丁目11-1 Gスクエア渋谷道玄坂 4F *Googleマップでは「東京都渋谷区道玄坂2丁目11-1」で検索してください。近隣にスクエア渋谷という別のビルがあるためご留意ください。
  • 参加費:無料
  • URL:https://seminar.sejuku.net/
詳しくは下の画像をクリックして弊社セミナー内容をご確認ください。

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

マサト

マサト

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