JavaScript の while 文を初心者向けにやさしく解説
最初はみんな「繰り返しってどう書けばいいの？」でつまずきます。焦らなくて大丈夫。ここでは while 文を「条件で繰り返す」道具として、手を動かしやすい例題つきで、丁寧に解きほぐします。
while 文の基本
- 役割: 条件が「真（true）」の間、同じ処理を何度も繰り返す。
- 書き方:
while (条件式) {
// 繰り返したい処理
}
- 動き方: 条件をチェック → 中身を実行 → 再び条件チェック… を繰り返す。条件が「偽（false）」になったら終了。
for 文との違い（イメージで覚える）
- for 文: 回数が決まっている繰り返しに向いている（例：「10回だけ実行したい」）。
- while 文: いつ終わるかは条件次第の繰り返しに向いている（例：「入力が正しいときに終わる」「合計が100以上になったら終わる」）。
- 覚え方:
- for は回数で繰り返す
- while は条件で繰り返す
まずは一番シンプルな例
- 目的: 3を掛け続けて、100未満の間だけ表示する
- ポイント: 条件を変えるための「更新」を忘れない
let num = 3;
while (num < 100) {
console.log(num);
num = num * 3; // ← 条件がいつか false になるように更新
}
console.log("end");
- 出力イメージ: 3 → 9 → 27 → 81 → end
- 学び: 更新がないと、ずっと num が 3 のままで「無限ループ」になるので要注意。
例題1：合計が 10 以上になるまで足し続ける
- 目的: total が 10 以上になったら止める
- 考え方: ループ中で「合計 total」と「足す数 count」を更新する
let total = 0;
let count = 1;
while (total < 10) {
total += count;
count++;
console.log(total);
}
console.log("end");
- 出力イメージ: 1 → 3 → 6 → 10 → end
- ポイント: 条件は「total < 10」。毎回 total と count が変化するから、いつか終わる。
例題2：ユーザー入力が「yes」になるまで聞き続ける（擬似コード）
ブラウザの prompt を使った例。実行環境によって動かないことがあるので、動きを理解するためのイメージです。
let answer = "";
while (answer !== "yes") {
answer = prompt("続けますか？ yes と入力してください");
}
console.log("ありがとう！");
- ポイント: 条件は「answer が yes ではない」。ユーザーが yes と入力したら終了。
例題3：偶数だけを 20 以下まで表示する
- 目的: 2, 4, 6, … 20 を出力
- 考え方: 「偶数だけ」にするために、2ずつ増やす
let n = 2;
while (n <= 20) {
console.log(n);
n = n + 2; // 偶数のまま進める
}
- ポイント: 増やし方（更新）で「何を列挙したいか」をコントロールできる。
よくあるつまずきと回避法
- 初期化の忘れ:
変数の初期値を用意しないと、条件が意図通りに動かない。
例：let count = 0; を忘れると比較ができない。 - 更新の忘れ（無限ループ）:
ループ中で値を変えないと、条件がずっと true のまま止まらない。
例：count++ を入れる。 - 条件の向き（不等号の向き）ミス:
n <= 10 と n < 10 は結果が1回分違う。終了タイミングを意識して選ぶ。 - 境界値をテストする:
ちょうど終わる瞬間（例：total が 10 になった瞬間）を頭の中でシミュレーションすると、バグが減る。
使い分けのコツ
- 回数がわかっている: for
- いつ終わるかは条件次第: while
- 無限ループにしたい（条件が外部で変わる想定）: while(true) と break を組み合わせる（上級者向け）
while (true) {
const val = getNext();
if (val === null) break; // 終了条件を中で判定
console.log(val);
}
練習問題（手を動かして覚える）
問題1：3の倍数を 30 まで表示
- 仕様: 3, 6, 9, … 30 を改行で表示する
- ヒント: 3から始めて、3ずつ増やす
let x = 3;
while (x <= 30) {
console.log(x);
x = x + 3;
}
問題2：合計が 100 を超えたら止める、1 から順に足す
- 期待する最後: 最終的な total と、最後に足した count を表示
let total = 0;
let count = 1;
while (total <= 100) {
total += count;
count++;
}
console.log("total:", total); // どこまでいった？
console.log("count:", count - 1); // 最後に足した数（1回分進んでいるので -1）
問題3：入力が「q」なら終了、それ以外はその文字列を表示
- ヒント: ループの最初で入力を受け取り、q なら break
while (true) {
const s = prompt("文字を入力（qで終了）");
if (s === "q") break;
console.log(s);
}
console.log("bye");
まとめ（要点だけ）
- while は「条件が true の間」繰り返す。
- 初期化・更新・終了条件の3点セットを必ず意識する。
- for は回数、while は条件で使い分ける。
- 境界（終わる瞬間）を頭でシミュレーションすると、無限ループを回避しやすい。