【2020年版】JavaScriptのwhileループ徹底ガイド

do...whileループは、コードブロックを一度実行し、条件がtrueと評価され続ける限り処理を続けることができます。whileループとdo...whileループは、特定の条件が満たされている間だけコードブロックを実行したい場合に非常に便利です。

ループはプログラミングの中核となる機能で、似たようなタスクを自動化するために使われます。例えば、学生名簿に登録された全員の名前を出力したい場合、ループを作成すればこの作業を自動化できます。

JavaScriptには、繰り返し処理を何度も実行するための主要なループが2種類あります。1つ目はforループで、指定した回数だけステートメントを実行します。2つ目はwhileループで、条件がtrueと評価されるかどうかに基づいて実行されます。

このチュートリアルでは、JavaScriptにおけるwhileループの基礎を解説します。whileループの構文、do...whileループの作成方法を学び、実際のコード例もいくつか見ていきましょう。

JavaScriptのwhileループとは

JavaScriptのwhileループは、条件がtrueと評価される間、コードブロックを実行し続けます。条件がfalseになると実行を停止します。whileループを使えば、コードをコピー&ペーストすることなく、同じコードブロックを何度でも繰り返せます。

whileループは、実行回数が事前に決まっていない場合によく使われます。一方、forループは、ループの実行回数がすでに分かっている場合や計算できる場合に適しています。

JavaScriptのwhileループの基本構文は以下の通りです。

while (condition_is_true) {
   // コードを実行
}

whileステートメントは、JavaScriptのforステートメントと非常によく似た形をしています。

なお、常にtrueと評価される条件を指定すると無限ループが発生します。プログラムを手動で停止するまでループを回し続けたいのでない限り、条件が必ずfalseになるように設計してください。

whileループの実例

ここでは、限定パーティーを開催するケースを想定してみましょう。パーティーには同時に40人までしか招待できません。

現在、すでに35人が会場にいます。誰かを招待するたびに、上限に達するまであと何人招待できるかを計算したいとします。whileループを使ってこの計算を行うプログラムの例がこちらです。

var limit = 40;
var current_attendees = 35;
while (current_attendees < limit) {
   var current_attendees = current_attendees + 1;
   var spaces_left = limit - current_attendees;
   console.log(`パーティーの残り枠は${spaces_left}人です。`);
}

このコードを実行すると、以下のように出力されます。

パーティーの残り枠は4人です。
パーティーの残り枠は3人です。
パーティーの残り枠は2人です。
パーティーの残り枠は1人です。
パーティーの残り枠は0人です。

コードの冒頭2行では、2つの変数を宣言しています。limit変数はパーティーに参加できる最大人数を表し、current_attendees変数は現在の参加者数を追跡します。

次に、現在の参加者数が設定した上限未満である限り実行され続けるwhileループを作成します。

ループ内では、プログラムがcurrent_attendeesに1を加算し、limitからcurrent_attendeesを引くことで残りの空き枠を計算します。最後に、パーティーの責任者へ向けて残り枠を知らせるメッセージをコンソールに出力します。

このwhileループは、参加者が40人未満である限り実行され続けます。ループが1回実行されるごとにcurrent_attendeesが1ずつ増加し、参加者が40人に達した時点でループは停止します。

whileループのもう一つの例

別の例でもwhileループの動作を確認してみましょう。以下の例では、パーティーのVIP名簿(配列)に含まれるすべての名前を出力するwhileループを作成しています。

var vips = ['Robert De Niro', 'Will Smith', 'Brad Pitt', 'Denzel Washington'];
var counter = 0;
while (counter < vips.length) {
   console.log(vips[counter]);
   var counter = counter + 1;
}

このコードを実行すると、以下のように出力されます。

Robert De Niro
Will Smith
Brad Pitt
Denzel Washington

このループは、カウンター変数が配列の長さ(vips.length)より小さい間、vips配列を順番に反復処理していきます。

JavaScriptのdo...whileループとは

JavaScriptのdo...whileループは、まずステートメントを一度実行してから、条件がtrueかどうかを判定します。条件がtrueであればループは再度実行され、そうでなければコードの実行は終了します。

whileループとdo...whileループの大きな違いは1点です。do...whileループは、条件が一度もtrueと評価されなくても、必ず最低1回は実行されます。一方、whileループは条件がtrueと評価された場合にのみ実行されます。

JavaScriptのdo...whileループの基本構文は以下の通りです。

do {
   // コードを実行
} while (condition_is_true);

do...whileループ内のコードは、必ず少なくとも1回は実行されることになります。

do...whileループの実例

do...whileループの動作を理解するために、具体例を見てみましょう。ここでは数当てゲームを作成するとします。ユーザーが正しい数字を入力するまで、プログラムに数字の入力を求め続けさせたいのです。

この数当てゲームを実現するプログラムの例がこちらです。

var number_to_guess = 7;
var guessed_number = 0;
do {
   var input = prompt("1から10までの数字を入力してください。");
   var guessed_number = parseInt(input);
} while (guessed_number != number_to_guess);

このプログラムは、guessed_numberがnumber_to_guessと一致しない限り、ユーザーに1から10までの数字の入力を求め続けます。ただし、プログラムは条件を初めて判定する前に、doブロックの内容を先に実行する点に注意してください。

条件がfalseになった時点で、ループの実行は停止します。

まとめ

whileループは、条件がtrueと評価される間、繰り返し処理のコードブロックを実行するために使えます。do...whileループは、コードブロックを一度実行した後、条件がtrueであり続ける限り処理を継続します。

whileループとdo...whileループは、特定の条件が満たされている間だけコードブロックを実行したい場合に役立つ強力なツールです。

このチュートリアルでは、JavaScriptでwhileループとdo...whileループを作成する方法を解説しました。また、それぞれのループがどのような場面で活躍するのか、実際のコード例も通じて確認しました。これであなたも、JavaScriptのエキスパートのようにwhileループを自在に使いこなせるはずです!

おすすめのJavaScript学習リソースや講座については、「How to Learn JavaScript」の記事もぜひ参考にしてみてください。