JavaScriptのwhile文とは?for文との違いを解説

JavaScriptのwhile文とfor文の違いを表現した繰り返し処理のイメージ
JavaScriptのwhile文とfor文の違いをイメージしたループ処理の概念図

JavaScriptでは、同じ処理を繰り返すために「繰り返し処理(ループ)」を使用します。
代表的な繰り返し構文には for文while文 などがあります。

その中でも while文 は「条件が満たされている間、処理を繰り返す」構文であり、シンプルなループ処理を実装する際に使用されます。

この記事では、

  • while文の基本
  • while文の書き方
  • for文との違い
  • while文を使うべき場面

について、初心者でも理解できるように解説します。

なお、JavaScriptの基本的な文法については、先に以下の記事を確認しておくと理解が深まります。

関連記事
[JavaScriptの基本と仕組みを理解する]

while文とは

while文とは、条件がtrueである間、処理を繰り返す構文です。

基本的な考え方は次の通りです。

条件がtrue → 処理を実行
条件がtrue → もう一度処理
条件がfalse → 繰り返し終了

つまり、条件が成立している限り、同じ処理を何度も実行します。

while文の基本構文

while文の基本構文は以下の通りです。

while (条件式) {
  繰り返し処理
}

処理の流れは次の通りです。

  1. 条件式を評価する
  2. trueなら処理を実行
  3. 再び条件式を確認
  4. falseになるまで繰り返す

while文の基本例

簡単な例として、1〜5までの数字を表示するコードを見てみます。

let i = 1;

while (i <= 5) {
  console.log(i);
  i++;
}

実行結果

1
2
3
4
5

処理の流れ

  1. i = 1
  2. i <= 5 → true
  3. console.log(i) を実行
  4. i++ で数字を増やす
  5. 条件を再チェック
  6. i > 5 になったら終了

このように 条件が成立している間だけ処理が続きます。

無限ループに注意

while文では 条件が永遠にtrueになると無限ループ になります。

let i = 1;

while (i <= 5) {
  console.log(i);
}

このコードでは iが増えないため条件がずっとtrue になります。

結果として

1
1
1
1
1
1
...

と処理が終わらなくなります。

そのため、while文では 条件がいつfalseになるのかを必ず設計することが重要です。

do…while文との違い

JavaScriptには do…while文 という似た構文もあります。

do…whileの構文

do {
  処理
} while (条件);

違いは 条件の判定タイミング です。

構文特徴
while最初に条件を確認
do…while1回実行してから条件確認

let i = 10;

do {
  console.log(i);
} while (i < 5);

この場合、条件はfalseですが 1回だけ実行されます。

for文との違い

繰り返し処理では for文while文 の使い分けが重要です。

for文の基本については、以下の記事で詳しく解説しています。

関連記事
[JavaScriptの繰り返し処理(for文)とは?基本から解説]

for文の構文

for (初期化; 条件; 更新) {
  処理
}

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

while文との違い

比較while文for文
構造シンプルループ用に最適化
用途条件ベースのループ回数が決まったループ
可読性やや低い場合あり読みやすい

while文が向いている場面

while文は 繰り返し回数が決まっていない場合 に向いています。

  • ユーザー入力が正しいまで繰り返す
  • 条件を満たすまで処理を続ける
  • 外部データを処理する

let input = "";

while (input !== "OK") {
  input = prompt("OKと入力してください");
}

このように 終了条件が不明確な処理 ではwhile文が適しています。

for文が向いている場面

for文は 回数が決まっているループ に適しています。

  • 配列を処理する
  • 指定回数の繰り返し
  • カウンターループ

for (let i = 0; i < 10; i++) {
  console.log(i);
}

このように 回数が明確な場合はfor文が一般的です。

while文の実務での使用例

実際の開発では、while文は次のような場面で使われます。

データ処理ループ

let i = 0;

while (i < data.length) {
  console.log(data[i]);
  i++;
}

条件成立までの処理

while (!isLoaded) {
  checkStatus();
}

このように 条件に応じて処理を続ける場面 で活用されます。

まとめ

while文は、JavaScriptの基本的な繰り返し構文のひとつです。

ポイントを整理します。

  • while文は 条件がtrueの間処理を繰り返す
  • 条件がfalseになると処理が終了
  • 無限ループに注意する必要がある
  • 回数が決まっている場合は for文
  • 条件ベースの処理では while文

繰り返し処理はJavaScriptの基礎文法の中でも特に重要な要素です。

JavaScriptの基礎を体系的に理解するには、以下の記事もあわせて読むと理解が深まります。

関連記事