実際に書いてみる!JavaScriptでforeach文を使う方法【初心者向け】

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

今回は、JavaScriptでforeachを使う方法について解説します。

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

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

foreachとは

プログラムを作っていると、同じような処理を、何度も繰り返し実行したい場面があるのではないでしょうか。そんな時に便利なのが、foreach関数です。

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

foreach関数は、配列の各データに対して、同じような処理を実行することができます。

実際の開発現場では、多くのデータを整えたり、計算をしたりする時に使います。

 

foreachの書き方

基本的なプログラムは以下のようになります。対象となる配列の後ろに「.」ピリオドを付けて記載します。コールバック関数とは、配列の各データに対して行う処理のことです。

配列.foreach( コールバック関数 )

 

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

foreachで繰り返し処理をおこなう

この記事では、foreachで繰り返し処理をおこなう方法について解説します。

まずは、簡単な関数を用意します。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
    // foreachのサンプル1
    var cats = [ 'シャム', 'ペルシャ', 'ベンガル', 'ロシアンブルー' ];
    cats.forEach(function( cat ) {
      console.log( cat );
    });

    //foreachのサンプル2
    var runners = [ '太郎', '次郎', '三郎', '四郎' ];
    runners.forEach(function( runner, index ) {
      console.log( (index + 1) + "位は、" + runner + "さんです。" );
    });
    </script>
  </body>
</html>

実行すると次のようになります。

では、それぞれの内容を詳しく見ていきましょう。

 

foreachのサンプル1

var cats = [ 'シャム', 'ペルシャ', 'ベンガル', 'ロシアンブルー' ];
cats.forEach(function( cat ) {
  console.log( cat ); 
}); 

「cats」という配列を用意し、foreachで配列の各データに対して処理(function)を行います。functionは配列の各データをcatという変数で受け取り、console.logで出力します。これを配列のデータ数分繰り返します。

その結果、以下の文字列が出力されます。

シャム
ペルシャ
ベンガル
ロシアンブルー

foreachのサンプル2

var runners = [ '太郎', '次郎', '三郎', '四郎' ]; 
runners.forEach(function( runner, index ) { 
  console.log( (index + 1) + "位は、" + runner + "さんです。" ); 
}); 

コールバック関数は、データのインデックス番号を引数として取得できます。

「runners」という配列を用意し、foreachで配列の各データに対して処理(function)を行います。functionは配列の各データをrunner、データのインデックス番号をindeという変数で受け取り、console.logで出力します。これを配列のデータ数分繰り返します。

その結果、以下の文字列が出力されます。

1位は、太郎さんです。
2位は、次郎さんです。
3位は、三郎さんです。
4位は、四郎さんです。

 

今回の記事は以上です。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

分かりました〜。

 

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

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