【JavaScript】while文による「条件を満たす間」の繰り返し制御

2026年1月23日

概要

あらかじめ繰り返す回数が決まっている for 文に対し、while 文は「特定の条件が満たされている間」処理を繰り返すループ構造です。「ユーザーが正解を入力するまで」「データの読み込みが完了するまで」といった、回数が不確定な処理に適しています。本記事では、while 文の基本的な記述方法と、ループ処理における変数の更新（無限ループ防止）について解説します。

仕様（入出力）

入力: バッテリー残量の初期値（0%）
出力:
1. 目標値（100%）に達するまでの経過ログ
2. 完了メッセージ

基本の使い方

while (条件式) { 処理 } という構文を使用します。条件式が true である限り、ブロック {} 内の処理が実行され続けます。処理の中で**条件を変化させる記述（変数の更新など）**を行わないと、永久にループし続ける点に注意が必要です。

コード全文（HTML / JavaScript）

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while文デモ</title>
    <script src="while-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>充電プロセスのログが出力されています。</p>
    </div>
</body>
</html>

JavaScript (while-demo.js)

バッテリーが100%になるまで充電処理を繰り返すシミュレーションです。

/**
 * while文を使用した充電シミュレーション
 * 目標値に達するまで処理を繰り返します。
 */
const startCharging = () => {
    let currentPercent = 0; // 現在のバッテリー残量
    const maxPercent = 100; // 目標値

    console.log("--- 充電を開始します ---");

    // currentPercent が maxPercent 未満である間繰り返す
    while (currentPercent < maxPercent) {
        console.log(`現在: ${currentPercent}% - 充電中...`);
        
        // 重要: 条件を変化させる処理
        // これがないと無限ループになります
        currentPercent += 25; 
    }

    console.log(`現在: ${currentPercent}% - 充電完了！`);
};

startCharging();

カスタムポイント

条件式の変更: while (item !== null) のように、数値の大小だけでなく、状態の一致・不一致を条件にすることも可能です。
do…while文: 「条件に関わらず、最低1回は必ず実行したい」場合は、do { 処理 } while (条件); という構文を使用します。

注意点

無限ループ（Infinite Loop）: 最も注意すべき点です。ブロック内で変数を更新し忘れたり（例: currentPercent += 25 を書き忘れる）、条件式が常に真になる（例: while (true)）設定にすると、ブラウザがフリーズします。必ず「いつか条件が false になる」設計にしてください。
実行タイミング: while 文は「前判定」ループです。最初の時点で条件が false（例: 最初からバッテリー100%）だった場合、ブロック内の処理は一度も実行されません。

応用

ランダムな値が出るまで繰り返す

回数が読めない処理の代表例です。乱数を使って特定の数値が出るまでループさせます。

let dice = 0;
let count = 0;

// 6が出るまでサイコロを振り続ける
while (dice !== 6) {
    // 1〜6の乱数を生成
    dice = Math.floor(Math.random() * 6) + 1;
    count++;
    console.log(`${count}回目: ${dice}`);
}

console.log("6が出たので終了します。");