while文を使った繰り返し処理

JavaScript で繰り返し処理を行う方法のひとつである while 文の使い方について解説します。 while 文では条件式が true を返すあいだ、繰り返し処理を行います。

(Last modified: 2023年02月03日)

while文の基本書式

while 文では括弧()の中に記述した条件式が true を返すあいだ、繰り返し処理を行います。書式は次の通りです。

while (条件式){
  実行する文1;
  実行する文2;
  ...
}

繰り返し実行する文が 1 つだけだった場合にはブロックを表す {} を省略することができます。

while (条件式)
  実行する文;

for 文が指定した回数だけ繰り返す場合に主に利用されるのに対して、 while 文は指定した条件が満たされなくなるまで回数に制限なく繰り返しを行う場合に主に利用されます。

また for 文と異なり初期化式や変化式といったものがありません。その為、 while 文で繰り返し実行されるブロックの中で、条件式が変化するように自分で何らかのコードを記述する必要があります。

簡単なサンプルをみてください。

let num = 3;

while (num < 100){
  console.log(num);
  num = num * 3;
}

console.log('end');

while 文では初期化式のようなものありませんので、必要な変数の宣言や初期化などは while 文の外で行います。

let num = 3;

while (num < 100){
  console.log(num);
  num = num * 3;
}

while 文ではまず条件式を一度評価します。条件式は num < 100 の部分です。

while (num < 100){
  console.log(num);
  num = num * 3;
}

条件式を評価した結果として true が返された場合には while 文のブロックの中の処理を順に実行します。 false が返された場合には while 文の次へ処理が移ります。

for 文の場合と異なり、 while 文は自分で条件式が変化する処理を記述しなければなりません。今回の場合であれば num = num * 2; の文なければ while 文はいつまでも条件式が true のままなので無限ループとなります。

while (num < 100){
  console.log(num);
  num = num * 3; // 条件式が変化する文が必要となる
}

ブロック内の処理をすべて実行したら最初に戻り、再び条件式を評価します。 true が返された場合には while 文のブロックの中の処理を実行します。これを 条件式が false を返すまで繰り返します。

それでは while 文が実行されてから while 文の次へ処理が移るまでを実際にひとつずつ見てみます。

1) 変数 num に初期値 3 を代入

-- 繰り返し処理 1 回目 --
2) 条件式 num < 100 が true
3) console.log(num); が実行される
4) 変数 num に格納されている値が 3 倍となり 9 になる

-- 繰り返し処理 2 回目 --
5) 条件式 num < 100 が true
6) console.log(num); が実行される
7) 変数 num に格納されている値が 3 倍となり 27 になる

-- 繰り返し処理 3 回目 --
8) 条件式 num < 100 が true
9) console.log(num); が実行される
10) 変数 num に格納されている値が 3 倍となり 81 になる

-- 繰り返し処理 4 回目 --
11) 条件式 num < 100 が true
12) console.log(num); が実行される
13) 変数 num に格納されている値が 3 倍となり 243 になる

-- 繰り返し処理 5 回目 --
14) 条件式 num < 100 が false
15) while 文の実行が終了し次の処理へ

16) console.log('end'); が実行される

実際に先ほどのサンプルを実行してみると、次のようにコンソールに出力されます。

let num = 3;

while (num < 100){
  console.log(num);
  num = num * 3;
}

console.log('end');
>> 3
>> 9
>> 27
>> 81
>> end

while文のいろいろな使い方

while 文は条件式が true の間は回数に関係なく繰り返しますので、繰り返し回数が決まっていないような処理に向いています。

下記のサンプルでは数字の 1 から順に加算していき、合計の値が 10 を超えるまで繰り返します。

let total = 0;
let count = 1;

while (total < 10){
  total += count;
  count ++;
  console.log(total);
}

console.log('end');
>> 1
>> 3
>> 6
>> 10
>> end

繰り返しになりますが、 while 文が無限ループとならないように条件式が false となる場合があることをよくご確認ください。

-- --

JavaScript で繰り返し処理を行う方法のひとつである while 文の使い方について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。