実際に書いてみる！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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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週間限定）
