JavaScriptでWhileループとDo...Whileループを使用する

序章

自動化は、システムを自動的に動作させる手法です。プログラミングでは、loopsを使用して反復タスクを自動化します。ループはプログラミング言語の最も便利な機能の1つです。この記事では、JavaScriptのwhileおよびdo...whileループについて学習します。

JavaScriptのwhileおよびdo...whileステートメントは、条件ステートメントに似ています。これらは、指定された条件がtrueになった場合に実行されるコードのブロックです。。一度だけ評価されるifステートメントとは異なり、条件がtrueと評価されなくなるまで、ループは複数回実行されます。

発生するもう1つの一般的なタイプのループは、forステートメントです。これは設定された回数実行されます。 whileおよびdo...whileループは条件付きであるため、ループが何回実行されるかを事前に知る必要はありません。

Whileループ

JavaScriptでは、whileステートメントは、指定された条件がtrueと評価される限り実行されるループです。

以下に示すように、構文はifステートメントと非常によく似ています。

while (condition) {
    // execute code as long as condition is true
}

whileステートメントは、JavaScriptで構築する最も基本的なループです。

例として、人口制限のある水族館があるとしましょう。ループの反復ごとに、1匹の魚を追加します。水族館に10の魚がいると、個体数の制限に達し、プログラムは魚の追加を停止します。

aquarium.js

// Set population limit of aquarium to 10
const popLimit = 10;

// Start off with 0 fish
let fish = 0;

// Initiate while loop to run until fish reaches population limit
while (fish < popLimit) {
    // add one fish for each iteration
    fish++;
    console.log("There's room for " + (popLimit - fish) + " more fish.");
}

上記のプログラムを実行すると、次の出力が表示され、条件がtrueとして評価されなくなるまで、whileループを介したプログラムの反復が示されます。

OutputThere's room for 9 more fish.
There's room for 8 more fish.
There's room for 7 more fish.
There's room for 6 more fish.
There's room for 5 more fish.
There's room for 4 more fish.
There's room for 3 more fish.
There's room for 2 more fish.
There's room for 1 more fish.
There's room for 0 more fish.

この例では、whileループを、魚の数が水族館の個体数制限より少ない限り実行するように設定しました。すべての10スポットが埋まるまで、反復ごとに1匹の魚が水族館に追加されます。その時点で、ループは実行を停止します。

無限ループ

無限ループは、その名前が示すように、永久に実行され続けるループです。誤って無限ループを起こした場合、ブラウザやコンピュータがクラッシュする可能性があります。無限ループを回避できるように注意することが重要です。

whileステートメントの条件がtrueに設定されている場合、一般的な無限ループが発生します。以下は、永久に実行されるコードの例です。無限ループをテストする必要はありません。

infiniteLoop.js

// Initiate an infinite loop
while (true) {
    // execute code forever
}

無限ループは永久に実行されますが、プログラムはbreakキーワードで終了できます。

以下の例では、ifステートメントをwhileループに追加し、その条件が満たされたときに、breakでループを終了します。

PolarBears.js

// Set a condition to true
const iceCapsAreMelting = true;
let polarBears = 5;

// Initiate infinite loop
while (iceCapsAreMelting) {
  console.log(`There are ${polarBears} polar bears.`);
  polarBears--;
  // Terminate infinite loop when following condition is true
  if (polarBears === 0) {
    console.log("There are no polar bears left.");
    break;
  }
}

上記のコードを実行すると、出力は次のようになります。

OutputThere are 5 polar bears.
There are 4 polar bears.
There are 3 polar bears.
There are 2 polar bears.
There are 1 polar bears.
There are no polar bears left.

これは必ずしもループを作成および終了するための実用的な方法ではありませんが、breakは知っておくと便利なキーワードであることに注意してください。

Do…WhileLoop

whileループについてはすでに学習しました。このループは、指定された条件が真である限り、コードのブロックを実行します。その上に構築されているのはdo...whileステートメントです。これはwhileと非常によく似ていますが、主な違いは、条件が真にならない場合でも、do...whileループが常に1回実行されることです。。

以下に、do...whileループの構文を示します。

do {
    // execute code
} while (condition);

ご覧のとおり、ループのdo部分が最初に来て、次にwhile (condition)が続きます。コードブロックが実行され、通常のwhileループの状態で条件がテストされます。

これをテストするには、変数を0に設定し、doステートメント内でインクリメントして、条件をfalseに設定します。

falseCondition.js

// Set variable to 0
let x = 0;

do {
    // Increment variable by 1
    x++;
    console.log(x);
} while (false);

Output1

出力は1に出力されました。これは、失敗したwhile条件によって停止される前に、コードブロックがループを1回（0から）繰り返されたことを意味します。

ループは少なくとも1回繰り返されることに注意してください。ただし、do...whileループは、whileループと同じ目的で使用できます。

結論

このチュートリアルでは、JavaScriptのwhileループ、do...whileループ、および無限ループについて学習しました。

反復タスクの自動化はプログラミングの非常に重要な部分であり、これらのループはプログラムをより効率的かつ簡潔にするのに役立ちます。

詳細については、MozillaDeveloperNetworkのwhileおよびdo...whileループについてお読みください。