while文を使った繰り返しを学ぼう
学習の目標
本章では、以下の内容を学習します。
while文の基本的な構文と動作原理を理解するfor文との違いと使い分け方法を習得するdo-while文の特徴と使用場面を学ぶ- 無限ループの防止方法を身につける
はじめに
前の章ではfor文を使った繰り返し処理を学びました。そして、決まった回数だけ処理を繰り返す場合にfor文が便利だということも確認しましたね。
一方で、「条件が満たされている間は処理を続けたい」という場面もあります。例えば、「ユーザーが正しい値を入力するまで繰り返す」「特定の条件が満たされるまで計算を続ける」といった場合です。このような条件ベースの繰り返し処理には、while文が適しています。
while文の基本的な書き方
while文の基本的な構文は以下のとおりです。
while (条件) { // 条件が true の間、繰り返し実行される処理}実際にコードを書いて試してみましょう。まずはHTMLファイルを作成してください。
index.html
<!DOCTYPE html><html><head> <title>while文を学ぼう</title></head><body> <h1>while文を学ぼう</h1> <script src="script.js"></script></body></html>script.js
let count = 1;
while (count <= 5) { console.log(`${count}回目の処理です`); count++;}
console.log('while文終了');HTMLファイルをブラウザで開いて、開発者ツールのコンソールを確認してみてください。以下のような結果が表示されるはずです。
1回目の処理です2回目の処理です3回目の処理です4回目の処理です5回目の処理ですwhile文終了このwhile文では、countが5以下の間は処理を繰り返し、毎回countを1ずつ増やしています。そして、countが6になると条件がfalseになり、繰り返しが終了します。
while文とfor文の違いを理解しよう
同じ処理をfor文で書くとどうなるか比較してみましょう。
// while文版let count = 1;while (count <= 5) { console.log(`while文: ${count}回目`); count++;}
// for文版for (let i = 1; i <= 5; i++) { console.log(`for文: ${i}回目`);}実行結果：
while文: 1回目while文: 2回目while文: 3回目while文: 4回目while文: 5回目for文: 1回目for文: 2回目for文: 3回目for文: 4回目for文: 5回目結果は同じですが、while文の方がより柔軟な条件設定ができます。また、for文は回数が明確な場合に適していて、while文は条件が複雑な場合や回数が不明な場合に適しています。
条件による繰り返しを試してみよう
while文の真価は、より複雑な条件での繰り返し処理で発揮されます。次に、条件が満たされるまで繰り返す例を見てみましょう。
let number = 1;
while (number < 100) { number = number * 2; console.log(`2倍した結果: ${number}`);}
console.log('100以上になったので終了');実行結果：
2倍した結果: 22倍した結果: 42倍した結果: 82倍した結果: 162倍した結果: 322倍した結果: 642倍した結果: 128100以上になったので終了この例では、数値が100未満の間は2倍にする処理を繰り返しています。そして、何回繰り返すかは事前にはわからず、条件によって決まります。
無限ループに注意しよう
while文を使う際に最も注意すべきことは、無限ループです。条件が永続的にtrueになってしまうと、処理が終わらなくなってしまいます。
// 危険な例（実行しないでください）// let count = 1;// while (count <= 5) {// console.log(count);// // count++を忘れると無限ループになる// }上記のコードでは、countの値が変更されないため、count <= 5が永続的にtrueとなり、無限ループが発生します。また、while文を使う際は、必ずループ内で条件を変化させる処理を含めるようにしましょう。
正しい例を見てみましょう。
let count = 1;
while (count <= 5) { console.log(`安全な繰り返し: ${count}`); count++; // 必ず条件を変化させる}
console.log('正常に終了');実行結果：
安全な繰り返し: 1安全な繰り返し: 2安全な繰り返し: 3安全な繰り返し: 4安全な繰り返し: 5正常に終了do-while文も知っておこう
while文には、do-while文という変種もあります。これは、最低でも1回は処理を実行してから条件をチェックします。
let input = 0;
do { input++; console.log(`処理を実行: ${input}`);} while (input < 3);
console.log('do-while文終了');実行結果：
処理を実行: 1処理を実行: 2処理を実行: 3do-while文終了通常のwhile文と比較してみましょう。
let value = 5;
// 通常のwhile文while (value < 3) { console.log('通常のwhile文で実行');}
// do-while文do { console.log('do-while文で実行');} while (value < 3);
console.log('比較終了');実行結果：
do-while文で実行比較終了通常のwhile文では条件が最初からfalseなので一度も実行されませんが、do-while文では最低1回は実行されます。
配列の処理にwhile文を使ってみよう
while文は配列の処理にも使えます。次に、配列の要素を順番に処理する例を見てみましょう。
const colors = ['赤', '青', '緑', '黄'];let index = 0;
while (index < colors.length) { console.log(`${index + 1}番目の色: ${colors[index]}`); index++;}
console.log('全ての色を表示しました');実行結果：
1番目の色: 赤2番目の色: 青3番目の色: 緑4番目の色: 黄全ての色を表示しましたまた、特定の条件で配列の処理を途中で止めることもできます。
const numbers = [2, 4, 7, 8, 10];let i = 0;
while (i < numbers.length) { if (numbers[i] % 2 !== 0) { console.log(`奇数${numbers[i]}が見つかりました`); break; } console.log(`偶数: ${numbers[i]}`); i++;}
console.log('処理終了');実行結果：
偶数: 2偶数: 4奇数7が見つかりました処理終了この例では、配列から最初の奇数を見つけるまで処理を続け、見つかったらループを終了しています。
複雑な条件でwhile文を使ってみよう
while文では、複数の条件を組み合わせることもできます。
let attempts = 0;let success = false;
while (attempts < 5 && !success) { attempts++;
// ランダムに成功するかどうかを決める（50%の確率） const random = Math.random();
if (random > 0.5) { success = true; console.log(`${attempts}回目で成功しました！`); } else { console.log(`${attempts}回目は失敗...`); }}
if (!success) { console.log('5回試しても成功しませんでした');}
console.log('チャレンジ終了');実行結果（実行するたびに結果が変わります）：
1回目は失敗...2回目は失敗...3回目で成功しました！チャレンジ終了この例では、「最大5回まで」かつ「成功するまで」という2つの条件を組み合わせています。そして、どちらかの条件が満たされなくなるとループが終了します。
まとめ
この章では、while文を使った繰り返し処理について学びました。また、for文との違いや、do-while文についても確認しました。
while文は条件ベースの繰り返し処理に適していて、特に繰り返し回数が事前に分からない場合に有効です。さらに、複雑な条件を組み合わせることで、より柔軟な制御が可能になります。
Starterプランでより詳しく学習
この先のコンテンツを読むにはStarterプラン以上が必要です。より詳細な解説、実践的なサンプルコード、演習問題にアクセスして学習を深めましょう。