JavaScript：while文を用いたループ処理の基本とコツを１分で

JavaScriptにおけるwhile文は、指定した条件がtrueである間コードブロックを繰り返し実行するために使用されます。この構文は、繰り返しの回数が事前に不明な場合や、条件が満たされるまで処理を継続する必要がある場合に特に有用です。

let count = 0;

while (count < 5) {
  console.log(count);
  count++; // カウンタを1増やす
}

↑の例では、countの値が5になるまでカウンタの値をコンソールに表示し続けます。つまり、カウンタは0から始まり4になるまでの間（＝5になる前まで）、「console.log(count);」の処理を５回繰り返し続けるということ。

このページではJavascriptにおけるwhile文の基本的な使い方やコツ、利用する際の注意点を実践的なコードを交えて１からわかりやすく解説します。

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

ループ処理（繰り返し処理）とは？

ループ処理（繰り返し処理）とは、その名の通り同じ処理を複数回繰り返す処理のことです。

例えば、「こんにちは！」という文字を１００回表示させたい場合。この場合、ループ処理を用いないと「こんにちは！」という処理を１００個記述しなければなりません。

ループ処理を用いることで、複数回必要とする処理も１回の記述で行うことができます。プログラムの中では、このように同じ処理を複数回繰り返す必要があるシーンがよく登場します。この繰り返し処理をマスターできないと、非常に冗長なわかりづらいコードとなってしまうのです。

ここからは、具体的に繰り返し処理の１つ「while文」の使い方・書き方を解説します。

JavaScript：while文

JavaScriptでのwhileループとdo...whileループは、プログラム内で繰り返し処理を行う際に用いられる重要な構文です。これらは似ていますが、実行されるタイミングに重要な違いがあります。初心者に向けて、これらのループの構文ルールと実践的な使い方を解説します。

whileループ

while (条件) {
  // 実行するコードブロック
}

条件がtrueである間、コードブロックが繰り返し実行されます。

whileループは、条件がfalseになるまでコードブロックを繰り返します。例えば、特定の回数だけ処理を繰り返したい場合や、ある条件を満たすまでループさせたい場合に適しています。

サンプルコード　数を数える

let count = 0;

while (count < 5) {
  console.log(count);
  count++; // カウンターを1増やすことで、いずれループから抜け出せる
}

参考　let(変数) / 比較演算子

このコードは、countが5になるまで、カウントを1ずつ増やしながら数を表示します。

do...whileループ

do {
  // 実行するコードブロック
} while (条件);

do while文を用いると、先に処理を行い、処理が完了したタイミングで条件式を判定します。

do...whileループは、最低一度はコードブロックを実行したい場合に適しています。条件の評価は各繰り返しの後に行われるため、少なくとも1回は処理が保証されます。

サンプルコード　ユーザー入力の処理

let input;

do {
  input = prompt("10より大きい数を入力してください。終了するには10を入力してください。");
  console.log(`入力された値: ${input}`);
} while (input <= 10);

このコードは、ユーザーが10を入力するまで、または10より大きい数を入力するまで、繰り返しユーザーに数値の入力を求めます。do...whileループのおかげで、少なくとも一度はpromptが表示されます。

実際のプログラミングでは、これらのループをうまく使い分けることが重要です。初心者の方は、まずこれらの基本的なサンプルコードを試してみて、ループの動作を体感してみてください。

whileループ / do whileループ を利用する際の注意点

whileループとdo...whileループを使用する際には、特に初心者にとっていくつかの重要な注意点があります。これらのポイントを理解することで、無限ループや予期せぬ挙動を避けることができます。

以下に、注意点とそれぞれの実践的なサンプルコードを示します。

注意点1: 無限ループの防止

ループ条件が常にtrueと評価されるようなコードを書くと、無限ループが発生し、ブラウザがフリーズするか、プログラムが強制終了する原因となります。

サンプルコード　無限ループの例

// NG例
let count = 0;

while (count < 5) {
  // countが増加しないため、条件は常にtrueとなる
  console.log("このループは終了しない");
}


// OK例
let count = 0;

while (count < 5) {
  console.log(count);
  count++; // countを増加させることで、ループが終了する条件を作る
}

注意点2: 条件の変化を確認する

whileループやdo...whileループ内で、ループの条件に影響を与える変数が変化するようにしてください。変数がループ内で更新されない場合、ループが終了しない可能性があります。

サンプルコード　条件の変化

let i = 0;

do {
  console.log(i);
  i++; // この行でiの値を更新し、ループの終了条件に近づける
} while (i < 5);

注意点3: do...whileループは最低一度は実行される

do...whileループでは、条件がfalseであっても、ループのコードブロックが最低一度は実行されることを覚えておきましょう。これは、ループの前に条件を評価しないためです。

サンプルコード　do...whileの挙動確認

let result = 10;

do {
  console.log("このコードは最低一度は実行されます。");
  result++;
} while (result < 5);

このコードでは、resultの初期値は既に条件result < 5を満たしていませんが、do...whileループの性質上、コードブロックは一度実行されます。

let count = 0;
while (count < 5) {
  console.log(count);
  count++; // カウンターの更新
}

let result = 0;
do {
  console.log(result);
  result++;
} while (result < 5);