JavaScript while文の使い方：実務で役立つループ制御と無限ループを防ぐ実装パターン

2026年5月6日2026年5月8日

制御構文

JavaScriptにおけるプログラミングにおいて、繰り返し処理は避けては通れない非常に重要な要素です。

その中でも while文は、特定の条件が満たされている間、処理を継続するという柔軟なループ制御を可能にします。

配列の要素を順番に処理する for 文とは異なり、ループ回数が事前に決まっていない場合や、特定のステータスが変化するまで待ちたい場合などに真価を発揮します。

しかし、その柔軟性ゆえに「無限ループ」を引き起こすリスクも孕んでおり、実装には細心の注意が必要です。

本記事では、JavaScriptの while 文の基礎から、実務で役立つ応用パターン、そしてバグを防ぐための安全な実装方法まで、テクニカルライターの視点で詳しく解説します。

目次 [ close ]

JavaScriptのwhile文の基本構造

while 文は、指定された条件式を評価し、その結果が 真（true）である限り ブロック内のコードを繰り返し実行します。

基本的な構文

JavaScript

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

条件式は、各ループの開始前に評価されます。

したがって、最初から条件式が false であった場合、中の処理は 一度も実行されない ことに注意が必要です。

基本的な数値カウントの例

以下のコードは、変数 count が5未満である間、値をコンソールに出力するシンプルな例です。

JavaScript

let count = 0;

while (count < 5) {
  console.log("現在のカウント:", count);
  // カウンタを変数させないと無限ループになる
  count++;
}

console.log("ループ終了");

実行結果

現在のカウント: 0
現在のカウント: 1
現在のカウント: 2
現在のカウント: 3
現在のカウント: 4
ループ終了

この例では、ループのたびに count++ によって変数が更新され、最終的に条件式が偽となることでループが終了します。

while文とfor文の使い分け

JavaScriptには複数のループ構文が存在しますが、特に for 文との使い分けに迷うことがあります。

実務においては、以下の基準で判断するのが一般的です。

for文が適しているケース

繰り返す回数が事前に決まっている場合 や、配列の全要素を走査する場合に適しています。

配列の処理 (ただし現在は forEach や for...of が主流)
指定回数（10回など）の繰り返し

while文が適しているケース

終了条件が動的に変化する場合や、特定のイベントが発生するまで続けたい場合に適しています。

ユーザーからの入力が正しい値になるまで繰り返す
ファイルの終端に達するまでデータを読み込む
特定のAPIレスポンスが得られるまでポーリング（定期的な問い合わせ）を行う
連結リスト（Linked List）などのデータ構造を辿る

項目	for文	while文
繰り返し回数	事前に判明していることが多い	不明なことが多い
終了条件	カウンタ変数に基づくことが多い	状態の変化に基づくことが多い
記述の簡潔さ	初期化・条件・更新を1行に書ける	条件のみを記述するためシンプル

実務で役立つ実装パターン

while 文は、単純なカウントアップ以外にも、実務の複雑なロジックで多用されます。

ここでは代表的な3つのパターンを紹介します。

1. キュー（Queue）の処理

スタックやキューのようなデータ構造を処理する際、while 文は非常に強力です。

配列から要素を取り出し続け、配列が空になるまで処理を継続する というロジックは頻出します。

JavaScript

const taskQueue = ["メール送信", "データ同期", "ログ出力", "バックアップ"];

while (taskQueue.length > 0) {
  // 配列の先頭からタスクを取り出す
  const task = taskQueue.shift();
  console.log("実行中のタスク:", task);
  
  // 個別の処理ロジック
}

console.log("すべてのタスクが完了しました");

実行結果

実行中のタスク: メール送信
実行中のタスク: データ同期
実行中のタスク: ログ出力
実行中のタスク: バックアップ
すべてのタスクが完了しました

2. 非同期処理のポーリング（待機）

サーバー側のステータスが「完了」になるまで待ちたい場合など、非同期処理と組み合わせた while ループも活用されます。

ただし、ブラウザのメインスレッドをブロックしないよう、async/await と併用するのが鉄則です。

JavaScript

async function waitForStatus(targetId) {
  let isComplete = false;
  let retryCount = 0;

  while (!isComplete && retryCount < 10) {
    console.log(`チェック中... (${retryCount + 1}回目)`);
    
    // 擬似的なAPIリクエスト
    const response = await fetchStatus(targetId);
    
    if (response.status === "done") {
      isComplete = true;
      console.log("完了しました！");
    } else {
      retryCount++;
      // 1秒待機してから再試行
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
}

// 擬似API関数
function fetchStatus(id) {
  return new Promise(resolve => {
    // 3回目以降にdoneを返すシミュレーション
    setTimeout(() => resolve({ status: Math.random() > 0.7 ? "done" : "pending" }), 100);
  });
}

waitForStatus("job_123");

3. do…while文による最低1回の実行保証

while 文の派生として do...while 文があります。

これは、条件判定を処理の後に行うため、どのような状況でも必ず1回はブロック内のコードが実行されます。

JavaScript

let input;
do {
  // ユーザー入力を取得する（擬似コード）
  input = prompt("10以上の数字を入力してください");
} while (input !== null && Number(input) < 10);

console.log("有効な入力値:", input);

このパターンは、初期値の設定とユーザー入力による検証を同時に行いたい場合に非常に効率的です。

ループ制御の重要テクニック：breakとcontinue

ループをより細かく制御するために、break と continue を使いこなす必要があります。

breakによる強制終了

特定の条件を満たした時点で、ループ全体を即座に終了させたい場合は break を使用します。

検索処理などで、目的のデータが見つかった瞬間にループを抜ける際などに便利です。

JavaScript

let i = 0;
while (true) { // 意図的な無限ループ
  if (i === 42) {
    console.log("ターゲット発見:", i);
    break; // ループを脱出
  }
  i++;
}

continueによる現在の回のスキップ

特定の条件において、その回の処理だけをスキップして次のループへ進みたい場合は continue を使用します。

JavaScript

let n = 0;
while (n < 5) {
  n++;
  if (n % 2 === 0) {
    // 偶数の場合はログを出さずに次のループへ
    continue;
  }
  console.log("奇数です:", n);
}

実行結果

奇数です: 1
奇数です: 3
奇数です: 5

無限ループを防ぐための実装パターン

while 文を扱う上で最も警戒すべきは 無限ループ です。

ブラウザのフリーズやサーバーリソースの枯渇を招くこの問題は、以下のルールを守ることで回避できます。

1. 更新式の記述を忘れない

もっとも多いミスは、ループ内で条件式に関わる変数を更新し忘れることです。

JavaScript

let i = 0;
while (i < 10) {
  console.log(i);
  // i++ を書き忘れると無限ループになる
}

2. 最大試行回数（セーフティガード）の設定

外部APIの応答待ちや複雑な計算を行う場合、理論上は終了するはずであっても、予期せぬ事態に備えて 最大ループ回数 を制限しておくことが推奨されます。

JavaScript

let iterations = 0;
const MAX_ITERATIONS = 1000;

while (shouldContinue()) {
  if (iterations >= MAX_ITERATIONS) {
    console.error("異常なループ回数を検知したため強制終了しました");
    break;
  }
  
  doSomething();
  iterations++;
}

3. 条件式の評価を確実に「偽」にする

浮動小数点の計算結果を条件式に使うと、計算誤差によっていつまでも一致（===）せず、ループが止まらなくなることがあります。

数値比較を行う際は、厳密な一致よりも「以上・以下」の比較演算子を使うのが安全です。

パフォーマンスとメモリ管理の視点

JavaScriptエンジン（V8など）は非常に高度な最適化を行いますが、ループの書き方次第でパフォーマンスに影響が出ることがあります。

メインスレッドのブロック回避

JavaScriptはシングルスレッドで動作するため、重い処理を伴う長い while ループを実行すると、画面の更新やユーザー操作が一切受け付けられなくなります（いわゆる「固まった」状態）。

数千件以上の重い計算を行う場合は、Web Workers を使用して別スレッドで処理するか、あるいは requestIdleCallback や setTimeout を利用して処理を分割実行することを検討してください。

メモリリークへの配慮

ループ内で大きなオブジェクトやクロージャを生成し続けると、メモリリークの原因になります。

JavaScript

while (condition) {
  // ループのたびに関数オブジェクトが生成される（非効率）
  const processor = (data) => { /* 処理 */ };
  processor(data);
}

上記のようなコードは、関数の定義をループの外に出すだけでメモリ効率が改善されます。

モダンな代替手段との比較

2026年現在のJavaScript開発において、while 文が常に最適解とは限りません。

配列操作においては、より宣言的なメソッドが好まれます。

配列メソッドとの使い分け

JavaScript

// while文によるフィルタリング（命令的）
let results = [];
let i = 0;
while (i < items.length) {
  if (items[i].active) results.push(items[i]);
  i++;
}

// filterメソッド（宣言的・推奨）
const results = items.filter(item => item.active);

宣言的な記述は、「何をしたいか」が明確になり、バグが入り込む余地を減らせるため、配列の処理にはこれらを用いるのが標準的です。

一方で、データのストリーム処理や、階層構造を持つデータの探索など、「どこまで続くか事前には分からない」ケースにおいては、依然として while 文が最も適したツールとなります。