JavaScriptの繰り返し処理（while文）の使い方を完全ガイド！初心者でもわかる基本
新人
「JavaScriptで繰り返し処理を使いたいんですが、どんな方法がありますか？」
先輩
「繰り返し処理にはいくつか方法がありますが、while文を使うと、指定した条件が満たされている間、繰り返し処理を行うことができます。」
新人
「具体的にはどうやって使うんですか？」
先輩
「それでは、while文を使った基本的な使い方を見ていきましょう！」
1. while文とは？
while文は、条件式が真（true）の間、繰り返し処理を実行し続ける構文です。条件が偽（false）になると、繰り返しが終了します。
次のコードでは、xの値が10より小さい間、繰り返し処理を実行します。
<script>
let x = 0;
while (x < 10) {
document.write(x + "<br>");
x++;
}
</script>
このコードでは、xが10未満の間、document.write()でxの値が表示され、x++でxが1ずつ増加していきます。繰り返し処理が終了すると、xが10以上になり、繰り返しが止まります。
2. while文の使い方の注意点
while文は条件が真の間ずっと繰り返し処理を行いますが、条件を変更しないままだと、無限ループに陥ることがあります。無限ループに入ってしまうと、プログラムが停止しないため注意が必要です。
例えば、次のコードはxが増えないため、無限に繰り返し処理を行います：
<script>
let x = 0;
while (x < 10) {
document.write(x + "<br>");
// x++を忘れると無限ループになる
}
</script>
このコードでは、x++を記述しないため、xが増加せず、繰り返し処理が終わりません。このように、条件が必ず変化するように注意しましょう。
3. while文を使った実際の例
次に、実際の問題でwhile文を使った例を見てみましょう。例えば、1から10までの合計を計算するプログラムです。
<script>
let x = 1;
let sum = 0;
while (x <= 10) {
sum += x; // sum = sum + x
x++;
}
document.write("1から10までの合計は: " + sum);
</script>
このコードでは、1から10までの数字を1つずつ加算し、最終的な合計をdocument.write()で表示しています。繰り返し処理が終了すると、合計が表示されます。
4. 条件を工夫したwhile文の使い方
while文では、条件式を工夫することでさまざまな繰り返し処理を実現できます。単純な数値の比較だけでなく、複数の条件を組み合わせることも可能です。
例えば、ある範囲内の数値だけを表示するような処理も簡単に書くことができます。
<script>
let num = 1;
while (num <= 20) {
if (num % 2 === 0) {
document.write(num + "<br>");
}
num++;
}
</script>
この例では、1から20までの中で偶数だけを表示しています。条件を組み合わせることで、柔軟な処理が可能になります。
5. break文で繰り返しを途中終了する
while文は条件が真の間繰り返し処理を行いますが、途中で処理を終了したい場合はbreakを使います。
特定の条件を満たしたときにループを抜けることで、無駄な処理を減らすことができます。
<script>
let num = 1;
while (true) {
document.write(num + "<br>");
if (num === 5) {
break;
}
num++;
}
</script>
このコードでは、5まで表示した時点で繰り返し処理を終了します。無限ループを防ぐためにも重要な使い方です。
6. continue文で処理をスキップする
continueを使うと、特定の条件のときにその回の処理だけをスキップし、次の繰り返しに進むことができます。
これにより、不要な処理を避けながら効率よく繰り返しを行うことができます。
<script>
let num = 1;
while (num <= 10) {
if (num === 5) {
num++;
continue;
}
document.write(num + "<br>");
num++;
}
</script>
このコードでは、5のときだけ表示をスキップしています。条件に応じた細かい制御ができる点が特徴です。
