【JavaScript】配列のループ処理を徹底解説します！

配列の各要素に対して何らかの処理を行いたい場合は、while文やfor文といった記法を使って反復処理を実装するのが、最もスタンダートな方法でしょう。しかし、for文やwhile文を使う他にも、配列のループ処理向けに特化した構文があるのをご存じでしょうか？

今回は、配列に対してループ処理を適用する方法について解説します。while文、for文を用いた実装方法の他に、ループ処理に特化した構文・メソッドの使い方についても紹介します。配列のループ処理について理解し使いこなせるようになりたい人は、ぜひ参考にしてください。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

配列とは？

ループ処理の実装方法を解説する前に、配列の基本について理解しておきましょう。

配列とは、データを入れる箱である変数が複数個連続で並んでいるようなデータ構造です。JavaScriptに関わらず、ほとんどのプログラミング言語に備えられており、関連のあるまとまった情報を保管するために利用されます。

例えば、学校のとあるクラスで実施したテストについて、クラス全体の平均点を求めたいとしましょう。平均点を求めるためにはクラス全員分のテストの点数を、データとして持っておかなければなりません。

配列を使わずに処理を実装する場合、JavaScriptでは以下のように書く必要があります。

let score_1 = 0, score_2 = 0, score_3 = 0, score_4 = 0, ...;

変数定義をクラスの人数分記述するという、負担の大きい作業を強いられるのは明らかです。このように、大量のデータが何らかの関連性を持っているのであれば、配列を利用するのが最も有効的です。JavaScriptでは、配列を以下のように定義します。

let score = new Array(40); // クラス人数分の点数データを定義

「new Array(40)」は、要素数が40の配列を新しく定義することを意味します。クラス全体で30人いるのであれば、コンストラクタの引数は30を設定するだけで良いわけです。このように、配列を使えば大量にあるデータを受け入れる箱を、スマートに定義することができます。

【基礎編】for文を使ってループ処理を実装しよう

配列は、関連するデータの集まりであるため、配列の各要素に対して同じ処理を適用したい場面が頻繁に訪れます。

各要素に対して何らかの処理を行いたい場合は、for文やwhile文を使って反復処理を実装しましょう。まずは、for文を使うやり方を解説していきましょう。

例として、数値が格納された配列の各要素に対して累乗を適用し、配列に入れ直す処理を考えてみましょう。この処理をfor文を使ってプログラミングしたものが、以下の通りです。

// 処理対象の配列
let source_data = [4, 7, 32, 75, 2];

// 処理適用後の配列
let dist_data = new Array(source_data.length);

for (let i=0; i<source_data.length; i++) {
  // 要素にアクセスするには、添字を指定
  dist_data[i] = source_data[i] * source_data[i];
}

console.log(dist_data); // 結果：[16, 49, 1024, 5625, 4]

処理対象の配列は要素数が5であるため、for文を5回ループするように条件式を設定します（7行目）。今回は、配列の各要素に対して累乗処理を適用したいため、配列の各要素に何の値が入っているのか、参照する必要があります。

また、配列の要素を参照するには、添字を指定しましょう。サンプルコードの8行目のように、角カッコの中に数値を設定することで、任意の要素にアクセス可能です。

1回目のループ処理であれば、変数iには0が設定されているのでsource_dataの1番目の要素にアクセスするように動作します。次のループでは、変数iがインクリメントされるので、source_dataの2番目の要素にアクセスします。

これをループ回数分行うことで、配列の各要素ごとに処理を適用することができるのです。

【基礎編】while文を使ってループ処理を実装しよう

次に、while文を使ってループ処理を実装してみましょう。ここでは例として、文字列が格納された配列の各要素を取り出して、コンソール出力する処理を考えてみます。実装したプログラムを以下に示します。

// 処理対象の文字列
let fruits_str = ['Apple', 'Banana', 'Melon', 'Orange', 'Peach'];

let i = 0;
while (i < fruits_str.length) {
  // 添字を指定し要素にアクセス
  console.log('I like ' + fruits_str[i] + '.');
  // 次の要素に映るためにインクリメント
  i++;
}

while文であっても、配列の要素の値を取り出すために、添字を指定するのは変わりありません。注意点として、9行目の添字指定用の変数をインクリメントすることを忘れないようにしましょう。

9行目の処理がない状態では、while文のループ処理が無限に続いてしまうからです。

【応用編】for文/while文以外を使ってループ処理を実装しよう

JavaScriptでは、for文やwhile文をそのまま用いる以外にも、ループ処理に特化した構文などを利用することで、よりエレガントにループ処理を実装可能です。ここでは、ループ処理の応用編として、3つの手法を解説していきます。

for…in構文を使う

1つ目は、for…in構文を使ったループ処理です。for…in構文は、JavaScriptのオブジェクトの中で定義された各プロパティに対してループ処理を適用したい場合に用います。オブジェクトのループ処理に特化しているというわけです。どのように使えばよいのか、以下のサンプルコードで解説していきます。

// 処理対象のオブジェクト
let products = {
  'Pencil' : 500,
  'Note' : 300,
  'Book' : 2500,
  'Pencil case': 1500,
};

// itemにはプロパティ名が設定される
for (let item in products) {
  console.log(item + ':' + products[item]);
}

for…in構文では、「let プロパティ名を格納する変数 in オブジェクト」の形で条件式を記述します。プロパティ名を順に取り出すことができれば、プロパティに対応する値も、配列の添字指定と同じように記述することでアクセスできます。

実際の動作では、1回目のループ時に、最初に定義されたプロパティ名が取り出されます。次に2回目のループでは、2番目に定義したプロパティ名といったように、添字を指定せず自動的に要素が取り出せることがfor…in構文の大きなメリットと言えます。

for…of構文を使う

2つ目は、for…of構文を使ったループ処理です。for…in構文と似ていますが、for…of構文は配列のループ処理に特化しているのが特徴です。用法を確認してみましょう。

// 処理対象の配列
let source_data = [4, 7, 32, 75, 2];

// 処理適用後の配列
let dist_data = new Array();

for (let source_item of source_data) {
  // 要素にアクセスするには、添字を指定
  dist_data.push(source_item * source_item);
}

console.log(dist_data); // 結果：[16, 49, 1024, 5625, 4]

基礎編で掲示した累乗の処理について、添字指定を一切行わずに同様の処理を実装しています。for…of構文もfor…in構文の場合と同様に「let 各要素を入れる変数 of 配列」の形で条件式を書けば、添字をわざわざ指定しなくても配列の要素を参照できます。

また、for…of構文を使う際には、Array.entries()メソッドと併用するのもおすすめです。Array.entries()は、配列のインデックス番号と対応する値を順番に取り出すために使われるメソッドで、ループ処理を実装する際に有用です。記述方法は、以下のサンプルコードをご覧ください。

// 処理対象の配列
let source_data = [4, 7, 32, 75, 2];

// 処理適用後の配列
let dist_data = new Array();

for (let [source_index, source_value] of source_data.entries()) {
  // 要素にアクセスするには、添字を指定
  console.log('source_data[' + source_index + '] = ' + source_value);
}

Array.entries()メソッドは、インデックス番号と要素の中身を同時に取得するため、[インデックス番号を格納する変数, 要素の中身を格納する変数]の形で記述します。

Array.forEachを使う

Array.forEachは配列処理のためのメソッドで、for文やwhile文のようなループ処理を行う機能を持ちます。早速使い方を見てみましょう。

// 処理対象の配列
let source_data = [4, 7, 32, 75, 2];

// 処理適用後の配列
let dist_data = new Array();

// 累乗処理
source_data.forEach(item => dist_data.push(item * item));

console.log(dist_data); // 結果：[16, 49, 1024, 5625, 4]

基礎編で掲示した累乗処理を、forEach()メソッドで実装しています。実行結果も、for文を使った場合と変わらないことが分かります。

forEach()メソッドの大きな特徴は、引数に関数を設定することです。引数として与える関数は「コールバック関数」とも呼ばれています。

8行目のコールバック関数で記述されている「item」は、配列source_dataの要素の中身を格納するための変数で、矢印の右側にて、その変数を使ったループ処理の内容を記述します。

forEach()メソッドは、for文やwhile文で記述できるようなループ処理を、一行で記述できるのが大きなメリットです。コールバック関数の書き方に慣れる必要があるものの、使いこなすことができれば、ソースコードの可読性を向上させることができます。

最後に

さて、ここまでJavascriptでの配列のループ処理について解説してきましたがいかがでしたか？

今回の記事でご紹介した通り、一口に「ループ処理」と言ってもその実装方法は様々存在しています。

これまでfor文やwhile文しか使ったことのなかった方も、少しずつその他の構文・メソッドを使用してみるようにしましょう。慣れればきっと開発効率がグンと上がってくれるはずです。

今回の記事でしっかりとマスターして、今後の開発でも積極的に使っていってくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。