JavaScript【 while 】 ～ シンプルに記述できるループ処理

for文と同様に、while文も、ループ処理を行う場合に使用します。
ループとは、ある条件を満たす場合に同じ処理を繰り返し実行することです。
for文は、初期化式や増減式など、記述方法に形式的なルールがありますが、while文は、自由にシンプルに記述することができます。
今回は、ループ処理に使用するwhile文を紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. while 文とは

while文は、for文と同じように、ループ処理（ある条件を満たす場合に繰り返し実行する処理）を行う場合に使用する構文の１つです。

for文は、指定した回数だけループ処理を実行する場合に向いていますが、while文は、条件が満たされるまでループ処理を続けるような場合に向いています。

例えば、パスワードの入力画面で、正しいパスワードが入力されるまでループ処理を行う場合などは、while文が適しています。

while文は、次のように記述します。

while ( 条件式 ) {

　　繰り返し行う処理内容
}

while文は、まず条件式を評価します。

条件式がtrueの場合は、ブロック内のループ処理を実行します。

ブロック（ { } ）は、while文で必ず必要というわけではありませんが、ブロックを記述しない場合は、「while(条件式)」の直後に記述された一文のみがループ処理の内容となります。
ですので、ループ処理として複数の文を実行したい場合は、ブロックが必要となります。
また、仮にループ処理の内容が一文のみの場合でも、ブロックで囲んだ方が範囲が明確で読みやすいソースコードとなります。

そして再度先頭に戻って、改めて条件式を評価します。
条件式がtrueの場合は、再度ブロック内のループ処理を実行し、falseの場合は、while文を終了します。

while文は、for文のように初期化式や増減式が構文として組み込まれていないので、それらは必要に応じて自由に記述します。

但し、for文の増減式のような処理を記述しないと、無限ループとなってしまうので、注意が必要です。

また、ループ処理に変数を使用する場合は、その初期化をどこで行うか（ブロック内で初期化するとループの度に初期化されます）という点にも注意が必要です。

▲目次へ戻る

2. while 文の使い方

次のサンプルは、入力された数字の約数を出力するプログラムです。
数字を入力してOKボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function loop() {

    let num = document.getElementById("dat");
    document.getElementById("dat2").value = "約数：";
    let i = 1;

    while ( i <= num ) {

        if (num % i == 0){
            document.getElementById("dat2").value += i + "　";
        }
        i++;
    }
}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <div style="display:inline-flex">　
          　<input type="text" id="dat" size="10">
          　<input type="button" value="OK" onClick="loop()">
        </div>
　
        <input type="text" id="dat2" value="約数：">
    </form>
</div>

　
このサンプルは、次のような処理手順で実行されます。

　
上のサンプルコードでは、while文でループする処理を、loop()というユーザ定義関数に記述しています。

そして、OKボタンをクリックすると、イベントハンドラのonClickによって、loop()が呼び出され、while文が実行される仕組みです。
　
　
while文に入る前に、入力データの取得と変数の初期化を行います。

    let num = document.getElementById("dat");
    document.getElementById("dat2").value = "約数：";
    let i = 1;

入力データは、テキストボックスのID名を指定して、「document.getElementById(“ID名”).value」で取得できます。
これを、変数numに代入します。

実行結果として表示する予定のテキストボックスの内容も、「document.getElementById(“ID名”).value = “約数：”」として初期化しています。
この処理をしないと、while文の中で、記号「+=」を使用して、このテキストボックスの内容をどんどん足していく処理をしているため、一度実行した後、二度目や三度目に実行する場合に、過去の表示内容が残ったまま、新しいデータが足されて表示されてしまいます。

変数 i は、入力データの約数を求めるために使用する数値として宣言しています。
約数は1から検討するので、i に初期値1を指定します。
　
　
そして、while文の中で、入力データが、1から1ずつ増える変数iで割り切れるかどうかを評価します。
割り切れる場合（true）は、i が入力データの約数となるので、i を出力します。

    while ( i <= num ) {

        if (num % i == 0){
            document.getElementById("dat2").value += i + "　";
        }
        i++;
    }

入力データの約数の最大値は、入力データと同じ値となるため、i が入力データ以下の間この処理をループし、処理を行う毎に i をインクリメントします。

▲目次へ戻る