実際に書いてみる!JavaScriptでforEachメソッドを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【foreach】を使う方法を解説した記事です。本記事では、foreachをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでforEachメソッドを使う方法について解説します。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

また今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

田島メンター!繰り返し処理というのは何でしょうか?

田島悠介

記述した処理を、何度も繰り返し実行してくれる機能のことだよ。プログラミングでよく使う、とても便利な機能なんだ。

大石ゆかり

どのような書き方があるのですか?

田島悠介

例を見ながら説明していくね!

 

目次

forEachメソッドとは

JavaScriptには、配列という、複数のデータをひとまとめに扱える型があります。

forEach関数は、この配列に格納されたデータをループ処理(繰り返し処理)により、一気に処理したい時に使います。

通常、プログラムにおいて繰り返し処理を実行するにはfor文を使いますが、配列にfor文の操作をする時には、forEachメソッドを使うことで、より簡単に処理を実装することができます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

配列とforEachメソッドの使い方

配列は、JavaScriptではArray型と呼ばれています。

forEachメソッドはArrayオブジェクトに実装されたメソッドで、以下のような構文で使うことができます。

配列.forEach( コールバック関数による処理 )

forEachメソッドは、for文よりも簡単に処理を記述できるかわりに、引数部分にコールバック関数と呼ばれるfunctonを指定する必要があります。

コールバック関数の構文(もっとも簡単な例)

function(item) {
 // itemに関する処理
 // itemは、配列の中身のうち、任意の1つを指し示す
}

forEach()で配列のループ処理をおこなう

では実際に、forEachメソッドを使ったプログラムを見てみましょう。

forEach()を使ったサンプルプログラム

 var fruits = [ "apple", "orange", "melon" ];
   fruits.forEach( function( item ) {
   console.log( item ); 
 });

実行結果

apple
orange
melon

たったこれだけのプログラムで、配列の中身を全て処理することができました。

forEachメソッドは、配列に格納された全ての要素(item)に対して、個別に、指定したコールバック関数を実行します。

そのため、要素1つあたりに対する処理だけ記述すれば良いのです。

同じ処理を、for文で実行した場合のサンプルも見てみましょう。

for文を使ったサンプルプログラム

var fruits = [ "apple", "orange", "melon" ];
   for (var i = 0, len = fruits.length; i < len; ++i) {
   console.log(fruits[i]);
 }

for文を使って配列の中身を全て操作しようとすると、とても難解なプログラミングが必要なことがわかりますね。

for文は、配列以外にも、様々な処理を繰り返し実行することができます。

できることが多いために、変数や処理の指定方式が複雑になるのですね。

forEachメソッドをラムダ式で記述する

JavaScriptのラムダ式である「アロー関数」を使うことで、forEachメソッドはもっと感覚的に、簡単に記述することができます。

ラムダ式による記述例

 var fruits = [ "apple", "orange", "melon" ];
 fruits.forEach( item => console.log( item ) );

プログラム中の「item」とは、「配列の中身のうちの1つ」という意味です。

forEach()とは、基本的には中身を一気に処理してしまうメソッドのため、暗黙の了解でこのような記述ができるんですね。

変数名は、「item」以外にも「one」のような名称でも何でも構いません。

「それぞれの item について、決まった処理を一括でおこなう」わけですね。

なお、今回は処理が1行だけなので上記のような記法ができますが、console.log( item )以外にも複数行の処理が必要な場合は、以下の記法を使います。

処理を中かっこ {} で囲うだけですので、簡単ですね。

コールバック関数に2行以上の処理を記述する場合

fruits.forEach( item => {
  console.log( "中身を1つ取り出します" );
  console.log( item );
});

まとめ

forEachメソッドを使うことで、配列の中身を一気に処理するプログラムが簡単に記述できます。

ぜひ覚えてしまいましょう!

執筆してくれたメンター

寺谷文宏 (Teratani Fumihiro)

Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAcademyではフロントエンド、Javaコースを担当。

大石ゆかり

forEachを使うと、配列に対する繰り返し処理が簡単に書けるんですね。

田島悠介

そうだね。同じような処理が何度も出てきたら、forEachなどを使って簡潔に書けないか、検討してみるといいよ。

大石ゆかり

分かりました〜。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を増やしたい、使いやすいWebサービスを作ってみたい方はぜひご覧ください。