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

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

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

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

 

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

 

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

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

 

 

目次

• forEachメソッドとは
• 配列とforEachメソッドの使い方
• forEach()で配列のループ処理をおこなう
• forEachメソッドをラムダ式で記述する
• まとめ

forEachメソッドとは

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

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

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

[PR] コーディングで副業する方法とは

配列と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文は、配列以外にも、様々な処理を繰り返し実行することができます。

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

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コースを担当。

 

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

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