【JavaScript入門】繰り返し処理：while文

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

繰り返し処理：while文

　JavaScript には、繰り返し処理を行うための構文として while 文 と do...while 文 が用意されています。どちらも「条件式が真の間は処理を繰り返す」という仕組みを持ちますが、do...while 文 は最初の1回は必ず実行されるという点で while 文 と異なります。ここでは、これら2つの構文を活用したサンプルコードを示しながら解説します。

１．while 文

1.1．基本構文

while (条件式) {
  // 条件式がtrueの間、何度も繰り返す処理
}

繰り返しを開始する前に条件式を評価し、true であれば {} 内の処理を実行、再度評価してまた true なら処理を継続します。
条件式が false になった時点でループを抜ける。

1.2．サンプル（HTML + JavaScript）

　ファイル名を「myWhileExample.html」として保存し、ブラウザで実行してください。開発者ツールのコンソールに結果が表示されます。

【myWhileExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myWhileExample.html</title>
</head>
<body>
  <h1>while 文のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開き、実行結果を確認してください。</p>

  <script>
    // 1) while 文の例
    console.log('=== while 文の例 ===');
    let i = 0;
    while (i < 3) {
      console.log('iの値は:', i);
      i++;
    }

    // 2) 配列を使う例
    console.log('=== 配列と while 文 ===');
    const arr = ['ココア', 'ジュース', 'お茶'];
    let index = 0;
    while (index < arr.length) {
      console.log(`index=${index}, 値=${arr[index]}`);
      index++;
    }
  </script>
</body>
</html>

デバックコンソールの出力

=== while 文の例 ===
iの値は: 0
iの値は: 1
iの値は: 2
=== 配列と while 文 ===
index=0, 値=ココア
index=1, 値=ジュース
index=2, 値=お茶

２．do...while 文

2.1．基本構文

do {
  // 実行される処理
} while (条件式);

最初に処理ブロックを一度実行 してから、最後に条件式を評価する。
そのため、条件式が最初から false でも、1回分の処理は必ず実行される。

2.2．サンプル（HTML + JavaScript）

ファイル名を「myDoWhileExample.html」にして、ブラウザで開いてみてください。

【myDoWhileExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myDoWhileExample.html</title>
</head>
<body>
  <h1>do...while 文のサンプル</h1>
  <p>開発者ツールのコンソールを確認してください。</p>

  <script>
    console.log('=== do...while 文の例 ===');
    let n = 5;
    do {
      console.log('nの値は:', n);
      n++;
    } while (n < 5);  // 最初から条件が false だが、一度は実行される

    // もう少し実用的な例
    console.log('=== do...while もう一つの例 ===');
    let count = 0;
    do {
      // 0〜3 の乱数を出す (例: 2.9999...→2)
      let randomValue = Math.floor(Math.random() * 4);
      count++;
      console.log(`乱数は ${randomValue} でした (count=${count})`);
      if (randomValue === 3) {
        console.log('3が出たので終了！');
        break;
      }
    } while(true);
  </script>
</body>
</html>

デバックコンソールの出力

=== do...while 文の例 ===
nの値は: 5
=== do...while もう一つの例 ===
乱数は 3 でした (count=1)
3が出たので終了！

動作のポイント

do...while では、ループ先頭で条件チェックをしないので、最低1回は {} の中が実行される。
その後 while(...) の条件が true の間は繰り返しを続ける。

まとめ

while(条件式) は、条件を先に評価 してから {} を繰り返すかどうかを決める。
do {...} while(条件式) は、先に一度実行 してから条件を評価する。条件が最初から false でも1回は必ず実行される。
while / do...while それぞれが用途によって使い分けられる。条件を先にチェックしたいときは while、先に1度だけ実行してから条件判断したいときは do...while。
無限ループを防ぐには、条件式が false になる仕組み（ループ内でカウンタ増加など）を必ず用意する。

　以上で、while 文と do...while 文の基本的な使い方が分かりました。必要に応じて、ほかの繰り返し構文（for, for...in, for...of など）と使い分けながらコードを整理していきましょう。