JavaScriptのwhile文の使い方｜基本構文から無限ループの回避方法まで

2026年5月27日

基礎知識

JavaScriptにおける繰り返し処理は、プログラミングの効率を大幅に向上させる重要な要素です。

その中でも「while文」は、特定の条件が満たされている間だけ処理を継続するという、非常にシンプルかつ柔軟な仕組みを持っています。

初心者の方はもちろん、中級者以上の方にとっても、条件分岐と組み合わせた高度な反復処理を実装する上で欠かせない知識となります。

この記事では、JavaScriptのwhile文の基本的な書き方から、実務で役立つ応用テクニック、そして多くの開発者が陥りやすい無限ループの回避方法について詳しく解説します。

目次 [ close ]

JavaScriptのwhile文とは

while文は、指定した条件式がtrue（真）である限り、ブロック内のコードを繰り返し実行する制御構文です。

for文と似ていますが、while文は「回数が決まっていない繰り返し」に適しているという特徴があります。

例えば、特定のデータが見つかるまで探し続ける場合や、ユーザーが正しい値を入力するまで再試行を促す場合などに多用されます。

JavaScriptのプログラムにおいて、柔軟なフロー制御を実現するためには、while文の性質を正しく理解することが不可欠です。

while文の基本構文

while文の構造は非常にシンプルで、直感的に理解することができます。

基本的な書き方は以下の通りです。

JavaScript

while (条件式) {
  // 条件式がtrueの間、この処理が実行される
}

この構文では、まず最初に括弧内の「条件式」が評価されます。

もし条件が最初からfalseであれば、中の処理は一度も実行されません。

条件がtrueであればブロック内の処理が実行され、処理が終わると再び条件式の評価に戻ります。

具体的な使用例：カウントアップ

まずは、数値を順番に表示する簡単なプログラムを見てみましょう。

JavaScript

// 変数の初期化
let count = 0;

// countが5未満の間、繰り返し実行する
while (count < 5) {
  console.log("現在のカウントは: " + count);
  
  // カウンタ変数を更新（これを忘れると無限ループになる）
  count++;
}

実行結果

現在のカウントは: 0
現在のカウントは: 1
現在のカウントは: 2
現在のカウントは: 3
現在のカウントは: 4

この例では、変数countが5になった時点で条件式がfalseとなり、ループが終了します。

while文とfor文の使い分け

JavaScriptには繰り返し処理を行うための構文として「for文」も存在します。

どちらを使うべきか迷うことがありますが、一般的には以下のような基準で使い分けます。

特徴	while文	for文
反復回数	決まっていない場合に適している	決まっている場合に適している
変数の初期化	ループの外で行う必要がある	構文内で完結できる
主な用途	フラグ監視、ユーザー入力待機、非同期処理の待機	配列の操作、決まった回数の計算

for文が適しているケース

ループの回数が明確な場合は、for文を使用するのが一般的です。

変数の初期化、条件式、更新処理を1行にまとめられるため、コードの見通しが良くなります。

while文が適しているケース

「いつ終わるか正確にはわからないが、ある条件が満たされたら終了したい」というケースではwhile文が非常に強力です。

例えば、ネットワークからのレスポンスを待機する場合や、乱数を使ったシミュレーションなどが挙げられます。

無限ループの回避方法と注意点

while文を使用する際に最も注意しなければならないのが「無限ループ」です。

条件式が永遠にfalseにならない場合、プログラムは停止することなく実行され続け、最終的にブラウザやシステムがフリーズしてしまいます。

無限ループが発生する原因

無限ループが発生する主な原因は、ループ内で条件を変化させる処理を忘れていることです。

以下のコードは、無限ループの典型的な失敗例です。

JavaScript

let i = 0;
while (i < 10) {
  console.log(i);
  // iを増やす処理（i++）がないため、iはずっと0のまま
}

このようなミスを防ぐためには、ループを書き始める際に「どうすればこのループは終了するか」を最初に設計することが重要です。

安全なループを記述するための対策

無限ループを防ぐための具体的な対策をいくつか紹介します。

ループカウンタの更新を必ずブロックの最後、または最初に記述する。
条件式が確実に変化するロジックになっているか確認する。
万が一のために、最大反復回数を設定して強制終了させる仕組みを取り入れる。

JavaScript

let count = 0;
const MAX_ITERATIONS = 1000; // 安全のための上限

while (someCondition) {
  // 処理を実行
  
  count++;
  if (count > MAX_ITERATIONS) {
    console.error("安全装置が作動しました：無限ループの可能性があります");
    break;
  }
}

break文とcontinue文による高度な制御

while文の中では、breakやcontinueといった制御命令を使用することで、より複雑な動きを実現できます。

break文：ループの強制終了

break文を使用すると、条件式の結果に関わらず、その時点でループを即座に終了させることができます。

JavaScript

let i = 0;
while (true) { // 意図的な無限ループ
  if (i === 10) {
    break; // iが10になったらループを抜ける
  }
  i++;
}
console.log("終了しました");

この手法は、複数の条件に基づいてループを抜け出したい場合に非常に便利です。

continue文：現在の回の処理をスキップ

continue文を使用すると、現在の回（イテレーション）の残りの処理を飛ばして、次の条件評価へ移ります。

JavaScript

let i = 0;
while (i < 5) {
  i++;
  if (i === 3) {
    continue; // 3のときだけ、下のconsole.logを実行しない
  }
  console.log(i + "を表示中");
}

実行結果

1を表示中
2を表示中
4を表示中
5を表示中

特定の条件に合致するデータだけを除外して処理を続けたい場合に活用されます。

do…while文との違い

while文のバリエーションとして「do…while文」があります。

これら二つの大きな違いは、「条件判定を行うタイミング」にあります。

種類	判定タイミング	最低実行回数
while文	処理の前（前判定）	0回（最初からfalseなら実行されない）
do…while文	処理の後（後判定）	1回（条件に関わらず一度は実行される）

ユーザーに最低一度は何らかの入力を求め、その内容によって継続を判断するようなUIロジックではdo…while文が適しています。

実戦で役立つwhile文の活用パターン

現代のJavaScript開発（2026年時点）においても、while文は特定のアルゴリズムにおいて重要な役割を果たします。

データのパースやスタックの処理

配列の内容が空になるまで処理を続けるような「スタック処理」では、while文が最も簡潔に記述できます。

JavaScript

const tasks = ["タスクA", "タスクB", "タスクC"];

while (tasks.length > 0) {
  const currentTask = tasks.shift(); // 先頭の要素を取り出す
  console.log(currentTask + "を実行しています...");
}

この方法は、動的に追加されるタスクリストを順番に消化するキューのようなシステムを構築する際に非常に役立ちます。

非同期処理のポーリング

サーバー上のステータスが完了になるまで定期的にチェックを行う「ポーリング処理」でもwhile文が使われます。

JavaScript

async function checkStatus() {
  let isComplete = false;
  
  while (!isComplete) {
    const response = await fetch('/api/status');
    const data = await response.json();
    
    if (data.status === 'success') {
      isComplete = true;
      console.log("完了しました！");
    } else {
      // 1秒待機してから再試行
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
}

このように、モダンなasync/awaitと組み合わせることで、複雑な待機処理もシンプルに記述することが可能です。

ベストプラクティス：読みやすいwhile文を書くために

while文は自由度が高い反面、コードが乱雑になりやすいという側面もあります。

読みやすくメンテナンス性の高いコードを書くためのポイントをいくつか挙げます。

まず、条件式を複雑にしすぎないことが大切です。

もし条件が複雑になる場合は、あらかじめ真偽値を計算して変数に代入するか、判定用の関数を用意しましょう。

JavaScript

// 読みづらい例
while (user.isActive && !user.isBanned && retryCount < MAX_RETRY) { ... }

// 読みやすい例
const shouldRetry = () => user.isActive && !user.isBanned && retryCount < MAX_RETRY;
while (shouldRetry()) { ... }

また、ループ内でしか使わない一時的な変数は、できるだけスコープを限定するように心がけてください。