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つです。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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