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

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

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


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

配列とは?

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

配列とは、データを入れる箱である変数が複数個連続で並んでいるようなデータ構造です。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文で記述できるようなループ処理を、一行で記述できるのが大きなメリットです。コールバック関数の書き方に慣れる必要があるものの、使いこなすことができれば、ソースコードの可読性を向上させることができます。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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

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