JavaScript のループ処理

Volardev 編集部 April 17, 2026

1. JavaScript のループ（Loops）

ループ（反復処理）を使用すると、コードブロックを複数回実行できます。
同じコードを、毎回異なる値を使用して繰り返し実行したい場合に非常に便利です。
特に配列（Arrays）を扱う際に、ループは多用されます。

例えば、以下のように記述する代わりに：

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

ループを使用すると、以下のように簡潔に記述できます。

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

2. For ループ（The For Loop）

for ステートメントは、3 つのオプションの**エクスプレッション（式）**を使用してループを作成します。

2.1 構文（Syntax）

for (式1; 式2; 式3) {
  // 実行されるコードブロック
}

式1：コードブロックの実行前に一度だけ実行されます。
式2：コードブロックを実行するための条件を定義します。
式3：コードブロックが実行された後に、毎回実行されます。

2.2 実装例

for (let i = 0; i < 5; i++) {
  text += "数値は " + i + "<br>";
}

式1：ループが始まる前に変数を設定します (let i = 0)。
式2：ループが実行される条件を定義します (i は 5 未満である必要があります)。
式3：コードブロックが実行されるたびに値を増加させます (i++)。

3. ループのスコープ（Loop Scope）

ループ内で let を使用するかどうかで、変数のスコープが大きく変わります。

3.1 外側の変数への影響

let i = 5;

for (i = 0; i < 10; i++) {
  // 何らかの処理
}

// ここで i は 10 になります

3.2 ブロックスコープの利用

let i = 5;

for (let i = 0; i < 10; i++) {
  // 何らかの処理
}

// ここで i は 5 のままです

最初の例では、let i = 5; がループの外側で宣言され、ループ内で再代入されています。
二番目の例では、ループ内で let i = 0; が宣言されています。ループ内で let または const を使用して宣言された変数は、そのループ内でのみ有効（可視）となります。

4. While ループ（The While Loop）

while ループは、指定された条件が true である限り、コードブロックをループし続けます。

4.1 構文（Syntax）

while (条件) {
  // 実行されるコードブロック
}

4.2 実装例

以下の例では、変数 i が 10 未満である限り、ループ内のコードが繰り返し実行されます。

while (i < 10) {
  text += "数値は " + i;
  i++;
}

条件に使用している変数を増加させるのを忘れると、ループが終了しなくなります。これは無限ループとなり、ブラウザがクラッシュする原因となります。

5. Do While ループ（The Do While Loop）

do while ループは、while ループのバリエーションです。
このループは、条件が true かどうかをチェックする前に、まずコードブロックを一度実行します。その後、条件が true である限りループを繰り返します。

5.1 構文（Syntax）

do {
  // 実行されるコードブロック
}
while (条件);

5.2 特徴と実装例

do while ループは、たとえ最初から条件が false であっても、少なくとも一度は必ず実行されます。これは、条件がテストされる前にコードブロックが実行されるためです。

do {
  text += "数値は " + i;
  i++;
}
while (i < 10);

while ループと同様に、条件に使用する変数を更新し忘れないように注意してください。そうしないとループが終わりません。