whileは最もシンプルな繰り返し構文です。
シンプルなので残念ながら、どうしても複雑な処理に対応できるforや、配列の繰り返しに強いforEachにその場面は奪われがち。
ただ知っておくと便利であることには間違い無いので、今回はそんなwhileの使い方について説明していきます。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。
それでは本文へ、レッツゴー！
whileの基本的な使い方
whileの基本構文は、このようになります。
while(条件){
実行される処理;
}条件が真であり続ける限り処理が繰り返されます。
そのため処理の中に、条件を終わらせるための何らかの記述が必要となってきます。
シンプルが故に発生する無限ループに注意
処理の中に、条件を終わらせるための記述をしないと、条件が無限に真であり続け、無限ループが発生してしまいます。
無限ループの響きはかっこいいですが、百害あって一利なし。
ひたすらパソコンやサーバーに負担をかけ続けてしまいます。
ではどのように条件を終わらせるのでしょうか。
サンプルコードで見ていきましょう。
サンプルコード
変数numが10になるまで、コンソールで吐き出し続けるコードです。
<script>
const num = 0;
while(num <= 10){
console.log(num);
num++;
}
</script>constについて分からない方はこちら
console.logについて分からない方はこちら
変数numに1を繰り返し足し続けることで、条件が偽になるタイミングが発生するようになっています。
注目するのは、num++;の位置
地味に注目してほしいのが、num++;の位置。
サンプルコードでは console.log(num); の下にいますが、上に移動させることにより、consoleに出力される値が変わります。
これは上から順に処理が実行されるため、当たり前なのですが、地味に大切なことです。
好奇心旺盛な君は、無限ループを体験しよう！
num++;をコメントアウトすることで、無限ループ体験をすることができます！やったね！
ただパソコンが固まる可能性が十分にあり得ますので、大事なものは必ず保存してから実行しましょう。
せっかくなのでforに置き換えてみよう！
先ほどのサンプルコードをforに置き換えてみましょう。
<script>
// whileでの繰り返し（先ほどのサンプルコード）
const num = 0;
while(num <= 10){
console.log(num);
num++;
}
// forに置き換え
for(let i = 0; i <= 10; i++){
console.log(i);
}
</script>
悲報、forの方が記述が2行短くなる。
さようならwhile、また逢う日まで。
forには負けないぞ！do whileの使い方
あっさりforに出番を奪われたwhileですが、そんなwhileにもforには真似できな芸当があります。
それが「do while」
whileと同じような繰り返し処理を行うのですが、初回から条件を満たさずとも最低1回は処理を実行するという動きをします。
do{
実行したい処理;
}while(条件)おそらく何かしらdo whileを必要とする場面は出てくると思うのですが、僕自身は使ったことはないです。ごめんなさいdo while。
サンプルコード
初回から条件を満たしていませんが、1度だけコンソールで出力されています。
<script>
let num2 = 99999999;
do{
console.log(num2);
num2++;
}while(num2 <= 10)
</script>
