JavaScriptのwhile文の基本構文と使いどころを学ぼう

1. while文とは？

1. while文とは？

while文は「〇〇の間だけ繰り返す」という条件があるループ処理です。for文と比べて、回数ではなく条件を重視します。例えば「お腹が空いている間だけ食べる」と同じイメージです。

2. while文の基本構文

2. while文の基本構文

JavaScriptのwhile文は次のように書きます。

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

ここで、条件とは＜true＞か＜false＞を返す式（しき）のことです。たとえば「数字が10未満ならくり返す」というようなものです。

3. 実際にwhile文を使ってみよう

3. 実際にwhile文を使ってみよう

たとえば、「数字を0から順に足して、合計が10より小さい間くり返す」コードは次のようになります。

let sum = 0;
let num = 0;
while (sum < 10) {
  sum += num;
  console.log("合計：" + sum);
  num++;
}

実行すると、sumが10未満の間だけ繰り返され、数字がどんどん足されていきます。

合計：0
合計：1
合計：3
合計：6
合計：10

4. while文の各部分をわかりやすく解説

4. while文の各部分をわかりやすく解説

• let sum = 0; → 合計を0に初期化
• let num = 0; → 足す数字も0からスタート
• while (sum < 10) → 「合計が10未満」の間だけくり返す
• sum += num; → sum = sum + numと同じ意味で、合計に数字を足す
• num++; → 数字を1ずつ増やす

このように条件に応じてループが止まるので、for文よりも柔軟に使えます。

5. do...while文とのちがい

5. do...while文とのちがい

似た構文にdo...while文があります。こちらは一度必ず中の処理を実行してから条件を確かめます。

let num2 = 0;
do {
  console.log("num2=" + num2);
  num2++;
} while (num2 < 1);

num2=0

違いは、while文は最初に条件をチェックして必要なければ一度も実行しない点にあります。

6. 無限ループに注意しよう

6. 無限ループに注意しよう

無限ループとは、条件がいつまでもtrueのままで終わらないループのことです。たとえば次のような書き方は永遠にくり返します。

let count = 0;
while (count < 3) {
  console.log(count);
  // count++ を忘れると無限ループになる
}

処理が止まらず、ブラウザが固まるので必ずcount++などの更新処理を入れましょう。

7. while文の使いどころ

7. while文の使いどころ

while文は以下のような場面で役立ちます：

• ユーザーの入力が正しいまでくり返す
• データを条件付きで順に取り出す
• 条件がくり返す回数ではなく状況で決まるとき

たとえば「パスワードを正しく入力するまで繰り返す」といった処理に使えます。

8. 実際のコードにwhile文を使う例

8. 実際のコードにwhile文を使う例

たとえば、配列から条件に合う値が出るまで探し続けるような実用例は次のようです。

const nums = [3, 7, 2, 9, 5];
let idx = 0;
while (nums[idx] !== 9 && idx < nums.length) {
  console.log("調査中：" + nums[idx]);
  idx++;
}
console.log("見つかった値：" + nums[idx]);

調査中：3
調査中：7
調査中：2
調査中：9
見つかった値：9

このように、値が見つかるまでくり返す処理が簡単に書けます。

まとめ

まとめ

ここまでJavaScriptにおけるwhile文の基礎から応用、そして注意点までを詳しく解説してきました。プログラミングにおいて「繰り返し処理」は避けては通れない非常に重要な要素です。特にwhile文は、あらかじめ繰り返す回数が決まっていない場面や、特定の状態が変化するまで処理を継続させたい場合に、その真価を発揮します。

while文の重要ポイントの再確認

記事を通じて学んだ最も大切なことは、while文が「条件ありき」の構文であるということです。for文が「10回繰り返す」といった回数指定に適しているのに対し、while文は「フラグが降りるまで」「ユーザーが正しい値を入力するまで」といった、不確定な回数のループに最適です。

また、初心者の方が最初につまずきやすいポイントとして「無限ループ」があります。プログラムが意図せず永遠に動き続けてしまう現象は、Webブラウザのフリーズを招くため、必ず条件式をfalseにするための更新処理（変数のカウントアップなど）を忘れないようにしましょう。

実践的なサンプルプログラムの紹介

学んだ知識を定着させるために、もう少し実用的なコードを見てみましょう。例えば、ランダムな数字を生成し、特定の数字が出るまで繰り返す「おみくじ」のようなロジックを考えてみます。

// 「大吉」が出るまで引き続けるプログラム
let result = "";
let count = 0;

while (result !== "大吉") {
  const randomNum = Math.floor(Math.random() * 5); // 0から4の乱数
  
  if (randomNum === 0) {
    result = "大吉";
  } else if (randomNum === 1) {
    result = "吉";
  } else {
    result = "末吉";
  }
  
  count++;
  console.log(count + "回目：結果は" + result + "でした。");
}

console.log("おめでとう！" + count + "回目で大吉が出ました！");

このコードの実行結果は、ランダムな要素が含まれるため毎回変わります。

1回目：結果は末吉でした。
2回目：結果は吉でした。
3回目：結果は大吉でした。
おめでとう！3回目で大吉が出ました！

このように、いつ終わるかわからない処理をスマートに記述できるのがwhile文の強みです。また、記事内で紹介したdo...while文についても、最低1回は必ず実行したい処理（例えば、最初に必ず一度は入力を促すフォームなど）で役立つため、状況に応じて使い分けができるようになると、JavaScriptのスキルは一段と向上します。

これからの学習に向けて

JavaScriptには他にも配列を操作するforEachやmapといった便利な繰り返しメソッドがありますが、すべての基本はこのwhile文やfor文にあります。まずは基礎をしっかりと固め、自分でコードを書いて動かしてみることが上達への近道です。もし無限ループになってしまったら、落ち着いてブラウザを再読み込みすれば大丈夫。失敗を恐れずに、様々な条件式を試してみてくださいね。