JavaScriptで繰り返し処理をしよう！8選の使い方・サンプルコード解説

●JavaScriptにおける繰り返し処理の基本
●繰り返し処理のサンプルコードと使い方
●応用例とサンプルコード
●注意点・対処法・カスタマイズ
まとめ

●JavaScriptにおける繰り返し処理の基本

JavaScriptプログラミングにおいて、繰り返し処理は非常に重要な役割を果たします。

様々なタスクを効率的に実行するために、複数の繰り返し構文が用意されています。

ここでは、主要な繰り返し構文の特徴と使い方を詳しく解説していきます。

○for文

for文は、指定した回数だけ繰り返し処理を行うための構文です。

初期化式、条件式、更新式を1行で記述できるため、コードがシンプルになります。

基本的な書き方は次の通りです。

for (初期化式; 条件式; 更新式) {
  // 繰り返し処理
}

for文は、配列の要素を順番に処理する場合や、特定の回数だけ処理を繰り返す場合に適しています。

○while文

while文は、指定した条件式が真(true)である間、繰り返し処理を行う構文です。

条件式が偽(false)になるまで処理を続けるため、柔軟な制御が可能です。

基本的な書き方は次の通りです。

while (条件式) {
  // 繰り返し処理
}

while文は、条件が満たされる限り処理を継続したい場合や、終了条件が動的に変化する場合に適しています。

○do-while文

do-while文は、while文と似ていますが、少なくとも1回は繰り返し処理が実行されることが保証されています。

この特性により、最初の1回は必ず実行したい処理に適しています。基本的な書き方は以下の通りです。

do {
  // 繰り返し処理
} while (条件式);

do-while文は、ユーザー入力の検証など、少なくとも1回は処理を実行してから条件をチェックしたい場合に便利です。

○for…in文

for…in文は、オブジェクトのプロパティを順番に処理するための構文です。

オブジェクトの各プロパティに対して繰り返し処理を行うことができます。基本的な書き方は以下の通りです。

for (プロパティ名 in オブジェクト) {
  // 繰り返し処理
}

for…in文は、オブジェクトのプロパティを動的に処理したい場合や、オブジェクトの構造を探索する場合に適しています。

○for…of文

for…of文は、配列や文字列の要素を順番に処理するための構文です。

イテラブルオブジェクトの各要素に対して繰り返し処理を行うことができます。

基本的な書き方は次の通りです。

for (要素 of 配列や文字列) {
  // 繰り返し処理
}

for…of文は、配列や文字列の要素を簡潔に処理したい場合や、イテラブルオブジェクトの要素を順番に扱いたい場合に適しています。

●繰り返し処理のサンプルコードと使い方

それぞれの繰り返し処理の構文について、具体的なサンプルコードと使い方を解説します。

例を通じて、各構文の特徴と適用場面をより深く理解していきましょう。

○サンプルコード1：for文を使った配列の要素表示

for文は、配列の要素を順番に処理するのに適しています。

次のサンプルコードでは、果物の名前を格納した配列の各要素をコンソールに出力しています。

const fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

この例では、配列のインデックスを利用して各要素にアクセスしています。

配列の長さ(fruits.length)を条件式に使用することで、配列の要素数が変わっても対応できます。

○サンプルコード2：while文を使った条件判定

while文は、特定の条件が満たされる間、処理を繰り返す場合に適しています。

次のサンプルコードでは、numが5未満の間、その値を出力し続けます。

let num = 0;

while (num < 5) {
  console.log(num);
  num++;
}

この例では、numの値を1ずつ増やしながら、5未満である間は処理を続けます。

条件式が偽になった時点で、ループが終了します。

○サンプルコード3：do-while文を使ったユーザー入力

do-while文は、最低1回は処理を実行してから条件をチェックしたい場合に適しています。

次のサンプルコードでは、ユーザーが正しい入力値を入力するまで、入力を促し続けます。

let userInput;

do {
  userInput = prompt("0から9までの整数を入力してください");
} while (userInput < 0 || userInput > 9);

console.log("正しい入力値:", userInput);

この例では、ユーザーが0から9までの整数を入力するまで、入力プロンプトを表示し続けます。

正しい入力が得られた場合にのみ、ループを抜けて結果を表示します。

○サンプルコード4：for…in文を使ったオブジェクトのプロパティ表示

for…in文は、オブジェクトのプロパティを順番に処理するのに適しています。

次のサンプルコードでは、人物の情報を格納したオブジェクトのプロパティ名と値を表示しています。

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

この例では、personオブジェクトの各プロパティに対して繰り返し処理を行い、プロパティ名とその値を出力しています。

○サンプルコード5：for…of文を使った配列の要素表示

for…of文は、配列や文字列の要素を順番に処理するのに適しています。

次のサンプルコードでは、果物の名前を格納した配列の各要素をコンソールに出力しています。

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}

この例では、fruitsの各要素に対して繰り返し処理を行い、それぞれの果物の名前を出力しています。

for…of文を使用することで、インデックスを気にせずに要素を順番に処理できます。

●応用例とサンプルコード

繰り返し処理の基本を理解したら、次は応用例を見ていきましょう。

例を通じて、繰り返し処理をより複雑な状況でどのように活用できるかを学んでいきましょう。

○サンプルコード6：二次元配列の要素表示

二次元配列は、表やマトリックスのようなデータ構造を表現するのに適しています。

次のサンプルコードでは、3×3の行列の要素を順番に表示しています。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (const row of matrix) {
  for (const element of row) {
    console.log(element);
  }
}

この例では、外側のfor…of文で行を順番に処理し、内側のfor…of文で各行の要素を処理しています。

このように、繰り返し処理をネストすることで、多次元の配列も効率的に処理できます。

○サンプルコード7：連想配列の要素表示

連想配列（オブジェクトの配列）は、複数の関連するデータをまとめて扱うのに便利です。

次のサンプルコードでは、車の情報を格納した連想配列の要素を順番に表示しています。

const cars = [
  {brand: 'Toyota', model: 'Camry'},
  {brand: 'Honda', model: 'Civic'},
  {brand: 'Nissan', model: 'Altima'}
];

for (const car of cars) {
  console.log(`${car.brand} ${car.model}`);
}

この例では、for…of文を使用して車の情報を順番に処理しています。

各要素がオブジェクトであるため、ドット記法を使ってプロパティにアクセスしています。

○サンプルコード8：break文とcontinue文の活用

繰り返し処理の制御に使用されるbreak文とcontinue文は、特定の条件下で処理をスキップしたり、ループを終了したりするのに役立ちます。

次のサンプルコードでは、これらの制御文を使用して繰り返し処理を制御しています。

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // 偶数の場合、次の繰り返しにスキップ
  }

  console.log(i);

  if (i >= 5) {
    break; // iが5以上の場合、繰り返しを終了
  }
}

この例では、continue文を使用して偶数をスキップし、break文を使用してiが5以上になったときにループを終了しています。

これにより、1,3,5の値だけが出力されます。