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

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

はじめに

この記事を読めば、JavaScriptで繰り返し処理を使いこなすことができるようになります。

繰り返し処理の基本から応用例、注意点、カスタマイズ方法まで、初心者にも分かりやすいサンプルコードとともに解説します。

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

JavaScriptでは、繰り返し処理を行うためにいくつかの構文が用意されています。

それぞれの構文の特徴と使い方を下記で紹介します。

○for文

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

基本的な書き方は下記のようになります。

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

○while文

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

基本的な書き方は下記のようになります。

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

○do-while文

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

基本的な書き方は下記のようになります。

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

○for…in文

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

基本的な書き方は下記のようになります。

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

○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]);
}

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

下記のサンプルコードでは、while文を使って条件が満たされるまで繰り返し処理を行っています。

let num = 0;

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

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

下記のサンプルコードでは、do-while文を使ってユーザーが正しい入力値を入力するまで繰り返し処理を行っています。

let userInput;

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

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

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

下記のサンプルコードでは、for…in文を使ってオブジェクトのプロパティ名と値を表示しています。

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

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

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

下記のサンプルコードでは、for…of文を使って配列の要素を順番に表示しています。

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

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

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

繰り返し処理を応用したいくつかのサンプルコードを紹介します。

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

下記のサンプルコードでは、二次元配列の要素を順番に表示しています。

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

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

○サンプルコード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}`);
}

○サンプルコード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以上の場合、繰り返しを終了
  }
}