実際に書いてみる！JavaScriptでforEachメソッドを使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【foreach】を使う方法を解説した記事です。本記事では、foreachをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでforEachメソッドを使う方法について解説します。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
また今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
田島メンター！繰り返し処理というのは何でしょうか？
記述した処理を、何度も繰り返し実行してくれる機能のことだよ。プログラミングでよく使う、とても便利な機能なんだ。
どのような書き方があるのですか？
例を見ながら説明していくね！
目次
forEachメソッドとは
JavaScriptには、配列という、複数のデータをひとまとめに扱える型があります。
forEach関数は、この配列に格納されたデータをループ処理（繰り返し処理）により、一気に処理したい時に使います。
通常、プログラムにおいて繰り返し処理を実行するにはfor文を使いますが、配列にfor文の操作をする時には、forEachメソッドを使うことで、より簡単に処理を実装することができます。
配列とforEachメソッドの使い方
配列は、JavaScriptではArray型と呼ばれています。
forEachメソッドはArrayオブジェクトに実装されたメソッドで、以下のような構文で使うことができます。
配列.forEach( コールバック関数による処理 )
forEachメソッドは、for文よりも簡単に処理を記述できるかわりに、引数部分にコールバック関数と呼ばれるfunctonを指定する必要があります。
コールバック関数の構文（もっとも簡単な例）
function(item) {
// itemに関する処理
// itemは、配列の中身のうち、任意の１つを指し示す
}
forEach()で配列のループ処理をおこなう
では実際に、forEachメソッドを使ったプログラムを見てみましょう。
forEach()を使ったサンプルプログラム
var fruits = [ "apple", "orange", "melon" ];
fruits.forEach( function( item ) {
console.log( item );
});
実行結果
apple orange melon
たったこれだけのプログラムで、配列の中身を全て処理することができました。
forEachメソッドは、配列に格納された全ての要素(item)に対して、個別に、指定したコールバック関数を実行します。
そのため、要素１つあたりに対する処理だけ記述すれば良いのです。
同じ処理を、for文で実行した場合のサンプルも見てみましょう。
for文を使ったサンプルプログラム
var fruits = [ "apple", "orange", "melon" ];
for (var i = 0, len = fruits.length; i < len; ++i) {
console.log(fruits[i]);
}
for文を使って配列の中身を全て操作しようとすると、とても難解なプログラミングが必要なことがわかりますね。
for文は、配列以外にも、様々な処理を繰り返し実行することができます。
できることが多いために、変数や処理の指定方式が複雑になるのですね。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
forEachメソッドをラムダ式で記述する
JavaScriptのラムダ式である「アロー関数」を使うことで、forEachメソッドはもっと感覚的に、簡単に記述することができます。
ラムダ式による記述例
var fruits = [ "apple", "orange", "melon" ]; fruits.forEach( item => console.log( item ) );
プログラム中の「item」とは、「配列の中身のうちの１つ」という意味です。
forEach()とは、基本的には中身を一気に処理してしまうメソッドのため、暗黙の了解でこのような記述ができるんですね。
変数名は、「item」以外にも「one」のような名称でも何でも構いません。
「それぞれの item について、決まった処理を一括でおこなう」わけですね。
なお、今回は処理が１行だけなので上記のような記法ができますが、console.log( item )以外にも複数行の処理が必要な場合は、以下の記法を使います。
処理を中かっこ {} で囲うだけですので、簡単ですね。
コールバック関数に2行以上の処理を記述する場合
fruits.forEach( item => {
console.log( "中身を１つ取り出します" );
console.log( item );
});
まとめ
forEachメソッドを使うことで、配列の中身を一気に処理するプログラムが簡単に記述できます。
ぜひ覚えてしまいましょう！
執筆してくれたメンター
| 寺谷文宏 (Teratani Fumihiro)
Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAcademyではフロントエンド、Javaコースを担当。 |
forEachを使うと、配列に対する繰り返し処理が簡単に書けるんですね。
そうだね。同じような処理が何度も出てきたら、forEachなどを使って簡潔に書けないか、検討してみるといいよ。
分かりました〜。
また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。
プログラミングの初心者でも受講可能です。Webサイトの表現の幅を増やしたい、使いやすいWebサービスを作ってみたい方はぜひご覧ください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
