初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】while、do whileの使い方【繰り返し処理】

【JavaScript】while シンプルな繰り返し処理

whileは最もシンプルな繰り返し構文です。
シンプルなので残念ながら、どうしても複雑な処理に対応できるforや、配列の繰り返しに強いforEachにその場面は奪われがち。

ただ知っておくと便利であることには間違い無いので、今回はそんなwhileの使い方について説明していきます。

forやforEachについてはこちら

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空の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について分からない方はこちら

悲報、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>