while文の実務で使うコードサンプル集
ここでは、JavaScript の while 文を、「実務でどう使うか」に焦点を当ててわかりやすく紹介します。
単なる繰り返しではなく、「いつ止めるか」を自分でコントロールする点がポイントです。
1. ユーザー入力のバリデーション（再入力チェック）
✅ 実務で最もよくあるパターン：「正しい入力が来るまで繰り返す」
let input = "";
while (!input || input.length < 3) {
input = prompt("ユーザー名を3文字以上で入力してください：");
}
console.log(`登録されたユーザー名：${input}`);
🧠 ポイント
- 条件を満たさない限り、何度でも繰り返す。
whileは「条件が真である間、実行」なので、ユーザー入力チェックにぴったり。- 実際のWebフォームではこのロジックを
onSubmit内などで使う。
2. APIやサーバー通信の「リトライ処理」
✅ ネットワーク不安定時など、「成功するまで試す」実務的な使い方。
let success = false;
let retryCount = 0;
const MAX_RETRY = 3;
while (!success && retryCount < MAX_RETRY) {
try {
console.log(`API通信を試行中... (${retryCount + 1}回目)`);
const res = await fetch("https://example.com/api/data");
if (!res.ok) throw new Error("通信エラー");
const data = await res.json();
console.log("成功:", data);
success = true;
} catch (e) {
console.error("失敗:", e.message);
retryCount++;
}
}
if (!success) {
console.warn("3回試しても通信に失敗しました。");
}
🧠 ポイント
- 実務では「失敗したらもう1回」「3回で諦める」などの制御がよくある。
whileでリトライロジックを明快に表現できる。forより柔軟な「条件ベース制御」が可能。
3. データベースやファイルの一括処理（1件ずつ処理）
✅ データがある限り繰り返す。配列操作やバッチ処理で使う。
const queue = ["タスクA", "タスクB", "タスクC"];
while (queue.length > 0) {
const task = queue.shift(); // 先頭を取り出す
console.log(`実行中：${task}`);
// 実際はここでAPIやDB処理などを行う
}
console.log("すべてのタスクが完了しました！");
🧠 ポイント
shift()で1件ずつ取り出して処理。- 配列の残りがなくなったら自動的に終了。
- 実務では「キュー処理」「メール送信」「ジョブ管理」などに応用。
4. ページング付きAPIを「最後のページまで」自動取得
✅ while で「次のページがある限り取得」を表現。
let page = 1;
let hasNext = true;
let allData = [];
while (hasNext) {
console.log(`ページ${page}を取得中...`);
const res = await fetch(`https://api.example.com/users?page=${page}`);
const data = await res.json();
allData = allData.concat(data.items);
if (data.nextPage) {
page++;
} else {
hasNext = false; // 次がないので終了
}
}
console.log(`全${allData.length}件のユーザーを取得しました`);
🧠 ポイント
- ページネーション付きのAPIでよく登場。
- 取得データがなくなるまで自動でループ。
- 実務の「APIデータ統合」「自動収集」に直結。
5. サーバー監視や定期ポーリング処理
✅ 5秒ごとに状態をチェックする、リアルな監視スクリプト例。
let attempts = 0;
while (true) {
console.log("サーバー状態を確認中...");
const res = await fetch("https://example.com/health");
const data = await res.json();
if (data.status === "OK") {
console.log("サーバーは正常です ✅");
break; // 正常なら終了
}
attempts++;
if (attempts >= 5) {
console.error("5回連続で異常。アラートを送信します 🚨");
break;
}
await new Promise(resolve => setTimeout(resolve, 5000)); // 5秒待機
}
🧠 ポイント
- 無限ループに見えるが、
breakで明示的に止めて安全。 - 現場の「監視」「自動再試行」「バックグラウンド処理」でよく登場。
setTimeoutよりも制御がわかりやすい。
6. 練習問題（実務応用）
問題：
while を使って、ユーザーが "exit" と入力するまで名前を入力させ、すべての名前を配列に保存して最後に一覧表示してください。
💡ヒント：
prompt()を使って入力を受け取る"exit"が入力されたら終了- 配列に追加しておく
解答例＋ステップ解説
let names = [];
let input;
while (true) {
input = prompt("名前を入力してください（終了するには 'exit' と入力）：");
if (input === "exit") break;
names.push(input);
}
console.log("入力された名前一覧：", names);
📘 ステップ解説
- 無限ループ
while (true)で繰り返しを定義 prompt()で入力を受け取る"exit"のときにbreakでループを抜ける- それ以外は
push()で配列に追加 - 最後に一覧を表示
まとめ：while文が実務で活きる場面
| シーン | 使いどころ | よくある代替 |
|---|---|---|
| 入力バリデーション | 正しい値が来るまで繰り返す | do...while |
| 通信リトライ | 成功するまで試行 | for + try/catch |
| キュー処理 | データが残っている間 | for...of |
| ページング取得 | 次のページが存在する間 | for + break |
| 監視処理 | 状態変化を監視 | setInterval |