JavaScript

JavaScriptの配列をループで処理する【for・forEach】

どうも、つよぽんです!

今回は、JavaScriptの配列を使ったループ処理について解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • 配列を使ったループ処理の方法を知りたい
  • 配列のループ処理はどういう場面で利用できるか知りたい

配列のループ処理は学習のときはそこまで多く使わないかもしれませんが、実際に開発を始めると使う頻度がとても多い書き方となります。

Webサービスを例にすると、次のような一覧ページは配列のループ処理が行われていると考えて良いです。

配列のループ処理が行われている例
  • TwitterやFacebookなどのタイムライン
  • ブログ記事一覧ページ
  • Gmailなどメールの一覧表示

この記事では配列のループ処理の方法について解説していくので、この記事を読み終わる頃には次のことがわかるようになります。

この記事を読み終えた後のあなた
  • JavaScriptで配列のforを使ったループ処理を行う方法
  • JavaScriptの配列の組み込みメソッドであるforEachでループ処理を行う方法

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの配列でイテレーション処理をする今回はJavaScriptの配列を使ったイテレーション処理について解説します。イテレーションとは「反復」を意味します。配列の中の各値を先頭から順番に使って処理を行うことをイテレーションと呼び、プログラミングをしていく中で頻繁に書くことになる処理の1つです。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptの配列を使ったループ処理とは
  2. JavaScriptの配列を使ってループ処理をする方法

JavaScriptの配列を使ったループ処理とは

この章では、「配列のループ処理とは何か?」について解説します。

JavaScriptの配列のおさらい

配列について軽くおさらいすると、配列とは次の特徴をもったデータ構造のことを説明しました。(参考記事: 【入門】JavaScriptの配列(Array)の概念を理解する)

配列のおさらい
  1. 複数のデータを保存できる
  2. 順番という概念を持っている
  3. 配列内のデータは先頭から、「インデックス番号0, 1 ,2」と0からスタートする
  4. データを取得するときは、先頭は「配列[]」、その次は「配列[]」、その次は「配列[]」のように、「配列[インデックス番号]」 の形式で値を取得できる

配列の特徴を活かすとループ処理が可能となる

前の項目で説明した「配列のおさらい」の中の「④配列[インデックス番号]の形式で値を取得できる」に注目してください。

インデックス番号の値を「0, 1, 2」と返るだけで異なる値を取得できることがわかるかと思います。

そして、この「0, 1, 2」のように値が1ずつ増えていく処理をどこかで見た覚えは無いでしょうか?

「0, 1, 2」と1ずつ増えていく、つまりインクリメントされる処理は以前「forループ」の記事で解説しました。

あわせて読みたい
JavaScriptのforループの書き方【whileとの比較】前回の「while」に引き続き「for」を使ったループ処理について解説します。ループ処理を実装したいときには「while」よりも「for」を使うことのほうが多いです。whileよりもforを使うことが多い理由についても解説します。...

このforを使うことで、「0, 1, 2」という値が順番に取得できるので、この「0, 1, 2」を配列のインデックス番号にセットしてあげれば、配列内の全ての値を取得することが出来ます

このように配列とループ処理は相性が良いのです。

配列とループを使って同じ処理を繰り返すことを「イテレーション処理」と呼んだりもします。

それでは実際に、どのように配列のデータを使ってループ処理をするのかを次の章で解説していきます。

JavaScriptの配列を使ってループ処理をする方法

JavaScriptの配列を使った、よく使われるループ処理の方法は大きく分けて次の2通りあります。

配列でよく使われるループ処理の方法
  1. forを使う
  2. イテレーションを行う配列の組み込みメソッドを使う

①については、前の章の終わりでも説明したとおり「配列[インデックス番号]」で配列の特定の値を取得できるという特徴を利用します。

②については、「for」を使う代わりに配列の組み込みメソッドを使ってループ処理を実現します。今回は「forEach」という組み込みメソッドを例に解説していきます。

①forを使ってループ処理をする

以下の画像は、配列と「for」を組み合わせてループ処理を行っている様子をあらわしています。

forを使ってループ処理をするサンプルコードforを使ってループ処理をするサンプルコード

上の画像内でも説明していますが、配列と「for」を組み合わせるときは以下の点を意識しておけば良いです。

  1. 「配列.length」で要素数(=配列内に保存されているデータの数)を取得する
  2. 「配列[インクリメントされる変数]」でループ毎に違う値を取得する

①に関しては上の画像の赤枠内の部分が要素数を取得している部分で、これにより要素数分だけループが行なえます。

もし赤枠内の部分で「配列.length」の代わりに「10」「20」のように固定の数をセットすると、配列の数が1個とか2個のときに「配列[3]」以降にはデータが無いので無駄なループが発生します。

また、値が無いのに値を利用しようとするのでプログラムの不具合(=バグ)の原因ともなります。

②に関して上の画像でいうと緑枠の部分を指します。

「配列[]」「配列[]」のインデックス番号を「インクリメントされる変数」を使ってループ毎に変更しています。

上の画像で使っているサンプルコードは以下のリンクから直接確認できます

配列のイテレーション処理のサンプル1

②forEachを使ってループ処理をする

以下の画像は「forEach」を使って配列のループ処理を行っているコードとなります。

forEachを使ってループ処理をするサンプルコードforEachを使ってループ処理をするサンプルコード

「forEach」はメソッドになるので、通常のメソッド実行のように「配列.forEach()」と記述します。

そしてforEachはコールバック関数を引数に撮るので「配列.forEach(コールバック関数)」の形式で実装します。

コールバック関数がわからない方は、以前別記事で解説した以下の記事を参考にして頂けたらと思います。

JavaScriptのコールバック関数と高階関数の仕組みを覚える

「forEach」を使うと、内部的に「for」を使ってループ処理を行うように、配列の値を先頭から順番に最後まで取得することができます。

配列内の値と現在のループ回数はforEachメソッドのコールバック関数の引数経由で取得できます。

上のコードで赤枠内にあるコールバック関数の引数「name」が配列のループ毎の値、「index」が現在のループ数がセットされます。

forEachのより具体的な説明はMDNのドキュメントの「Array.prototype.forEach()
」を読むことをオススメします。

なお、MDNを使って初めて学習するメソッドを早く覚えるコツを以下の記事で解説しているので、そちらを参考にしながらドキュメントを読んで頂けたらと思います。

あわせて読みたい
JavaScriptの配列のpushを例に、メソッドを覚えるコツどうも、つよぽんです! 今回は、JavaScriptの配列メソッドを覚えるコツについて解説します。 今回の記事では配列を例に...

上の画像で使っているサンプルコードは以下のリンクから直接確認できます

配列のイテレーション処理のサンプル2

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • JavaScriptの配列はループ処理と相性が良い
  • JavaScriptの配列でループ処理を行う場合は次の2通りのやり方が代表的
    1. forを使う
    2. 配列の組み込みメソッドを使う

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの配列でイテレーション処理をする今回はJavaScriptの配列を使ったイテレーション処理について解説します。イテレーションとは「反復」を意味します。配列の中の各値を先頭から順番に使って処理を行うことをイテレーションと呼び、プログラミングをしていく中で頻繁に書くことになる処理の1つです。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です