JavaScript の While ループ

1. while ループ（While Loops）

while ループは、指定された条件（condition）が true である限り、コードブロックを繰り返し実行します。
JavaScript には、主に 2 種類の while ループが存在します。

• while ループ
• do while ループ

1.1 while 文

while 文は、指定した条件が true の間、コードブロック内をループします。

構文（Syntax）

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

実装例

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

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

重要： 条件に使用している変数を更新（増加など）させるのを忘れると、ループが永遠に終了しません。これは無限ループと呼ばれ、ブラウザをクラッシュさせる深刻な原因となります。

2. do while 文

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

構文（Syntax）

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

特徴

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

実装例

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

この場合も、条件変数のインクリメントを忘れないでください。そうしないとループは終わりません！

3. for 文と while 文の比較

構造的に見ると、while ループは for ループから「式 1（初期化）」と「式 3（更新）」を省略したものとほぼ同じです。

for ループを使用した例

cars 配列から車の名前を収集する場合：

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

// 式 1 と 式 3 をループの括弧外に配置
for (;cars[i];) {
  text += cars[i];
  i++;
}

while ループを使用した例

同じ処理を while で記述すると、より直感的になります：

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

while (cars[i]) {
  text += cars[i];
  i++;
}

どちらを使うべきかはケースバイケースですが、反復回数が明確な場合は for、特定の条件が満たされるまで繰り返したい場合は while を選択するのが、クリーンなコードを書くためのセオリーですね。