基礎から学ぶJavaScript入門 90日コース | JavaScriptを動かして慣れる － Day 10：while文

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 10：while文で「条件を満たすまで繰り返す」感覚を身につける
  2. while文の基本を理解する
    1. while文の基本構造
    2. 重要ポイントの深掘り
  3. do…while文の基本を理解する
    1. do…while文の基本構造
    2. while と do…while の違い
  4. break と continue の役割
    1. break：ループを途中で抜ける
    2. continue：その回の残りを飛ばして次の繰り返しへ
  5. 実践1：while文でカウントダウンを作る
    1. カウントダウンのイメージを言葉で整理する
    2. カウントダウンのコード例（コンソール表示）
    3. 重要ポイントの深掘り
  6. 実践2：条件を満たすまで繰り返す（while文）
    1. 「条件を満たすまで繰り返す」とは
    2. 例：合計値が 50 以上になるまでランダムな数を足し続ける
    3. ここでの重要ポイント
  7. 実践3：do…while で「最低1回は実行する」処理を書く
    1. 例：ユーザー入力を最低1回は処理する
    2. ここでの重要ポイント
  8. Day 10 前半の練習テンプレート
  9. Day 10 前半のまとめ
  10. Day 10：while文（後半）で「止め方」と「飛ばし方」を意識したループ設計を身につける
  11. while文を「いつ終わるか」という視点で考える
    1. while文の本質は「条件が false になるまで続ける」
    2. 無限ループを避けるためのチェックポイント
  12. break / continue を使って「ループの流れ」をコントロールする
    1. break：ループを途中で終了する
    2. continue：その回の残りを飛ばして次の繰り返しへ
  13. 実践：カウントダウンを「設計目線」で書き分ける
    1. パターン1：シンプルなカウントダウン
    2. パターン2：偶数だけカウントダウン表示（continueを活用）
  14. 実践：条件を満たすまで繰り返す処理を「安全に」設計する
    1. 例：ユーザーが正しい値を入力するまで繰り返す（do…while）
  15. Day 10 後半の練習テンプレート
  16. Day 10 後半のまとめ

Day 10：while文で「条件を満たすまで繰り返す」感覚を身につける

Day 10では、「条件を満たすまで繰り返す」タイプのループである while 文と do...while 文を学びます。 さらに、ループの途中で抜けるための break、一部の処理だけ飛ばして次の繰り返しに進む continue も扱います。

ここでは、

  • while と do...while の違い
  • 無限ループにならないための考え方
  • break / continue の使いどころ
  • カウントダウン
  • 条件を満たすまで繰り返す処理

を、初心者向けにかみ砕いて、ステップバイステップで説明していきます。

while文の基本を理解する

while文の基本構造

while 文は、「条件が true の間、ずっと繰り返す」という仕組みです。

while (条件) {
  // 条件が true の間、ここが繰り返し実行されます
}
JavaScript

例えば、「カウンターが 5 以下の間、表示し続ける」という処理は次のように書けます。

let count = 1; // カウンターを 1 からスタートさせます

while (count <= 5) { // count が 5 以下の間は繰り返します
  console.log(`count の値は ${count} です`);
  count++; // カウンターを 1 ずつ増やします（これを忘れると無限ループになります）
}

console.log('while文による繰り返しが終了しました。');
JavaScript

重要ポイントの深掘り

  • while (count <= 5) → 条件が true の間だけ、ループの中身が実行されます。
  • count++ を忘れると、count がずっと 1 のままになり、条件が永遠に true のままになってしまいます。 → 無限ループの典型パターンなので、必ず「どこかで条件が false になるように更新する」ことを意識してください。

do…while文の基本を理解する

do…while文の基本構造

do...while 文は、「最低1回は必ず実行される while文」です。

do {
  // まずここが1回実行されます
} while (条件);
JavaScript

例えば、「ユーザー入力を1回は必ず処理したい」というような場面で使われます。

let count = 1;

do {
  console.log(`do...while のループ内：count = ${count}`);
  count++;
} while (count <= 5);

console.log('do...while文による繰り返しが終了しました。');
JavaScript

while と do…while の違い

  • while → 最初に「条件」をチェックしてから、ループの中身を実行します。 → 条件が最初から false の場合、1回も実行されません。
  • do...while → 先にループの中身を1回実行してから、最後に「条件」をチェックします。 → 条件が最初から false でも、最低1回は実行されます。

この違いを意識しておくと、「必ず1回は実行したい処理」かどうかで使い分けられるようになります。

break と continue の役割

break：ループを途中で抜ける

break は、ループを途中で終了させるためのキーワードです。

let count = 1;

while (count <= 10) {
  console.log(`count = ${count}`);

  if (count === 5) {
    console.log('count が 5 になったので、ループを終了します。');
    break; // ここで while ループを抜けます
  }

  count++;
}

console.log('whileループの外に出ました。');
JavaScript
  • break が実行された瞬間、ループ全体から抜けます。
  • 「ある条件になったら、もうこれ以上繰り返さなくてよい」という場面で使います。

continue：その回の残りを飛ばして次の繰り返しへ

continue は、その回の残りの処理をスキップして、次の繰り返しに進むためのキーワードです。

let count = 0;

while (count < 10) {
  count++;

  if (count % 2 === 1) {
    // count が奇数のときは、ここで残りをスキップして次のループへ
    continue;
  }

  console.log(`偶数だけ表示します：count = ${count}`);
}

console.log('偶数の表示が完了しました。');
JavaScript
  • continue が実行されると、その回の残りの処理は実行されず、次のループに進みます。
  • 「特定の条件のときだけ処理を飛ばしたい」という場面で使います。

実践1：while文でカウントダウンを作る

カウントダウンのイメージを言葉で整理する

「カウントダウン」とは、次のような動きです。

  • 10からスタートして
  • 0になるまで
  • 1ずつ減らしながら
  • 毎回その数字を表示する

これは、while 文で自然に書けるパターンです。

カウントダウンのコード例（コンソール表示）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 前半：while文でカウントダウン</title>
</head>
<body>
  <h1>while文でカウントダウンする</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    let count = 10; // カウントダウンの開始値

    while (count >= 0) { // count が 0以上の間は繰り返します
      console.log(`カウントダウン：${count}`);
      count--; // 毎回 1 ずつ減らします
    }

    console.log('カウントダウンが完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

  • let count = 10; → カウンターを「10からスタート」させています。
  • while (count >= 0) → count が 0以上の間は繰り返します。 → 10, 9, 8, …, 0 まで表示されます。
  • count--; → 毎回 1 ずつ減らすことで、いつか条件が false になり、ループが終了します。 → これを忘れると、count がずっと 10 のままになり、無限ループになります。

実践2：条件を満たすまで繰り返す（while文）

「条件を満たすまで繰り返す」とは

while 文は、「条件が true の間、ずっと繰り返す」という仕組みなので、 言い換えると 「条件が false になるまで繰り返す」とも言えます。

例えば、「ある値が 50 以上になるまで、ランダムな数を足し続ける」というような処理は、 while 文で自然に書けます。

例：合計値が 50 以上になるまでランダムな数を足し続ける

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 前半：条件を満たすまで繰り返す</title>
</head>
<body>
  <h1>条件を満たすまで繰り返す（while文）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    let total = 0; // 合計値を 0 からスタートさせます
    let count = 0; // 何回足したかを数えるカウンターです

    // total が 50 未満の間は繰り返します
    while (total < 50) {
      // 1〜10 のランダムな整数を生成します
      const randomValue = Math.floor(Math.random() * 10) + 1;

      total += randomValue; // 合計値にランダムな数を足します
      count++;              // 足した回数をカウントします

      console.log(`第${count}回目：${randomValue} を足しました。現在の合計は ${total} です。`);
    }

    console.log(`合計が 50 以上になったので終了します。最終合計：${total} / 足した回数：${count} 回`);
  </script>
</body>
</html>

ここでの重要ポイント

  • while (total < 50) → 合計値 total が 50 未満の間は繰り返します。 → 50以上になった瞬間に、条件が false になり、ループが終了します。
  • total += randomValue; → 合計値を更新することで、いつか条件が false になるようにしています。
  • 「条件を満たすまで繰り返す」という考え方が、while 文の本質です。

実践3：do…while で「最低1回は実行する」処理を書く

例：ユーザー入力を最低1回は処理する

ここでは、簡易的に「入力値が 0 ならもう一度入力させる」というようなイメージで、 do...while の動きを確認します（実際の入力は prompt を使います）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 前半：do...while の例</title>
</head>
<body>
  <h1>do...while文で最低1回は実行する処理を書く</h1>
  <p>ブラウザで動かすと、ダイアログが表示されます。</p>

  <script>
    let value;

    // 少なくとも1回は入力を促し、その後「0でない限り」繰り返します
    do {
      value = prompt('数値を入力してください（0を入力すると終了します）：');

      console.log(`入力された値：${value}`);
    } while (value !== '0');

    console.log('0 が入力されたので、do...while のループを終了しました。');
  </script>
</body>
</html>

ここでの重要ポイント

  • do { ... } while (条件); → ブロック内が 必ず1回は実行されることが保証されています。
  • 「最低1回は必ず処理したい」場面では、while よりも do...while が自然な選択になります。

Day 10 前半の練習テンプレート

最後に、Day 10前半の内容をまとめた練習用テンプレートを示します。 このファイルを保存してブラウザで開くと、カウントダウンと「条件を満たすまで繰り返す」処理を試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 前半：while / do...while / break / continue 練習テンプレート</title>
</head>
<body>
  <h1>Day 10 前半：while文の基本と実践</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- while文でカウントダウン ---');

    let countDown = 10;

    while (countDown >= 0) {
      console.log(`カウントダウン：${countDown}`);
      countDown--;
    }

    console.log('カウントダウンが完了しました。');

    console.log('--- while文で条件を満たすまで繰り返す ---');

    let total = 0;
    let times = 0;

    while (total < 30) {
      const randomValue = Math.floor(Math.random() * 10) + 1;
      total += randomValue;
      times++;

      console.log(`第${times}回目：${randomValue} を足しました。現在の合計は ${total} です。`);
    }

    console.log(`合計が 30 以上になったので終了します。最終合計：${total} / 足した回数：${times} 回`);

    console.log('--- break の例：5で終了 ---');

    let n = 1;

    while (n <= 10) {
      console.log(`n = ${n}`);

      if (n === 5) {
        console.log('n が 5 になったので、ループを終了します。');
        break;
      }

      n++;
    }

    console.log('break によるループ終了を確認しました。');

    console.log('--- continue の例：偶数だけ表示 ---');

    let m = 0;

    while (m < 10) {
      m++;

      if (m % 2 === 1) {
        // 奇数のときは残りをスキップして次のループへ
        continue;
      }

      console.log(`偶数だけ表示：m = ${m}`);
    }

    console.log('continue によるスキップを確認しました。');
  </script>
</body>
</html>

Day 10 前半のまとめ

Day 10前半では、次のことを学びました。

  • while 文：条件が true の間、繰り返し続けるループ
  • do...while 文：最低1回は必ず実行されるループ
  • break：ループを途中で終了するためのキーワード
  • continue：その回の残りをスキップして次の繰り返しに進むためのキーワード
  • カウントダウンや「条件を満たすまで繰り返す」処理を通して、 「条件が false になるように更新する」というループ設計の感覚をつかんだこと

ここまでのコードを自分で書き換えながら試してみると、 while文が「怖いもの」ではなく、「条件に合わせて柔軟に繰り返しを設計できる道具」に感じられてくるはずです。 条件・更新・終了タイミングを意識しながら、少しずつ応用パターンを試してみてください。

Day 10：while文（後半）で「止め方」と「飛ばし方」を意識したループ設計を身につける

Day 10後半では、前半で学んだ while / do…while / break / continue を、もう一歩踏み込んで使いこなしていきます。 単に「動くループ」を書くだけでなく、どこで止めるか・どこを飛ばすかを意識して設計できるようになることが目標です。

ここでは、

  • 無限ループを避けるための「終了条件」の考え方
  • break / continue を使った「ループの制御」
  • カウントダウンのバリエーション
  • 条件を満たすまで繰り返す処理の設計

を、初心者向けにかみ砕いて、ステップバイステップで解説していきます。

while文を「いつ終わるか」という視点で考える

while文の本質は「条件が false になるまで続ける」

while 文は、

while (条件) {
  // 条件が true の間、ここが繰り返し実行されます
}
JavaScript

という形でした。 ここで大事なのは、「いつ条件が false になるのか」を必ず意識することです。

例えば、次のコードは危険なパターンです。

let count = 1;

while (count <= 5) {
  console.log(count);
  // count++ を書き忘れている！
}
JavaScript

この場合、count はずっと 1 のままなので、count <= 5 は永遠に true のままです。 結果として、無限ループになってしまいます。

無限ループを避けるためのチェックポイント

ループを書くときは、次の3つを必ず確認する癖をつけると安全です。

  1. 初期値：スタート地点はどこか
  2. 条件：どの状態まで続けるのか
  3. 更新：1回ごとにどう変化させるのか（条件がいつか false になるようになっているか）

この3つがそろって初めて、「終わりのあるループ」になります。

break / continue を使って「ループの流れ」をコントロールする

break：ループを途中で終了する

break は、ループを途中で抜けるためのスイッチです。 「ある条件になったら、もうこれ以上繰り返さなくてよい」という場面で使います。

例：カウントダウン中に特定の値で止める

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 後半：breakでカウントダウンを途中終了</title>
</head>
<body>
  <h1>breakでカウントダウンを途中で止める</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    let count = 10; // カウントダウンの開始値

    while (count >= 0) {
      console.log(`カウントダウン：${count}`);

      if (count === 5) {
        console.log('count が 5 になったので、ここでカウントダウンを終了します。');
        break; // ループを途中で終了します
      }

      count--; // 毎回 1 ずつ減らします
    }

    console.log('break によってカウントダウンが途中終了しました。');
  </script>
</body>
</html>
ここでの重要ポイント
  • if (count === 5) の条件が true になった瞬間に break が実行されます。
  • break は「そのループ全体」から抜けるので、以降の繰り返しは行われません。
  • 「特定の値に達したら終了する」という制御を、ループの途中に差し込めるのが強みです。

continue：その回の残りを飛ばして次の繰り返しへ

continue は、その回の残りの処理をスキップして、次のループに進むためのスイッチです。

例：カウントダウン中に特定の値だけ表示を飛ばす

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 後半：continueで特定の値を飛ばす</title>
</head>
<body>
  <h1>continueで特定の値だけ表示をスキップする</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    let count = 10;

    while (count >= 0) {
      // 先に減らしてから判定します
      console.log(`現在のカウント：${count}`);

      if (count === 5) {
        console.log('count が 5 のときは表示をスキップします。');
        count--;   // 次のループに進むために更新は忘れずに行います
        continue;  // この回の残りをスキップして次のループへ
      }

      // ここは count が 5 のときには実行されません
      console.log(`表示対象の値：${count}`);

      count--; // 毎回 1 ずつ減らします
    }

    console.log('continue を使ったスキップ付きカウントダウンが完了しました。');
  </script>
</body>
</html>
ここでの重要ポイント
  • continue が実行されると、その回の残りの処理は実行されず、次のループに進みます。
  • ただし、更新処理（ここでは count--）を忘れると無限ループの原因になるので注意が必要です。
  • 「特定の条件のときだけ処理を飛ばしたい」という場面で、continue はとても便利です。

実践：カウントダウンを「設計目線」で書き分ける

パターン1：シンプルなカウントダウン

let count = 10;

while (count >= 0) {
  console.log(`カウントダウン：${count}`);
  count--;
}
JavaScript
  • 10から0まで、すべての値を表示します。

パターン2：偶数だけカウントダウン表示（continueを活用）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 後半：偶数だけカウントダウン表示</title>
</head>
<body>
  <h1>偶数だけカウントダウン表示する（continueの活用）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    let count = 10;

    while (count >= 0) {
      if (count % 2 === 1) {
        // 奇数のときは表示せず、次のループへ
        count--;
        continue;
      }

      console.log(`偶数のカウントダウン：${count}`);
      count--;
    }

    console.log('偶数だけのカウントダウンが完了しました。');
  </script>
</body>
</html>
ここでの重要ポイント
  • if (count % 2 === 1) で奇数を判定しています。
  • 奇数のときは continue で残りをスキップし、偶数のときだけ表示しています。
  • 「どの値を対象にするか」を、ループの中で柔軟にコントロールできることがわかります。

実践：条件を満たすまで繰り返す処理を「安全に」設計する

例：ユーザーが正しい値を入力するまで繰り返す（do…while）

ここでは、do...while を使って「最低1回は入力させる」処理を考えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 後半：正しい入力が来るまで繰り返す</title>
</head>
<body>
  <h1>正しい入力が来るまで繰り返す（do...while）</h1>
  <p>ブラウザで動かすと、入力ダイアログが表示されます。</p>

  <script>
    let value;

    // 少なくとも1回は入力を促し、「1〜10の数値」が入力されるまで繰り返します
    do {
      value = prompt('1〜10の数値を入力してください：');

      // 入力がキャンセルされた場合（null）も考慮します
      if (value === null) {
        console.log('入力がキャンセルされました。処理を終了します。');
        break; // ループを終了します
      }

      console.log(`入力された値：${value}`);
    } while (Number(value) < 1 || Number(value) > 10 || Number.isNaN(Number(value)));

    console.log('1〜10の範囲の正しい値が入力されたか、キャンセルされました。');
  </script>
</body>
</html>
ここでの重要ポイント
  • do...while によって、最低1回は必ず入力処理が実行されます。
  • 条件部分では、「1〜10の範囲外」または「数値でない」場合に繰り返すようにしています。
  • break を使って、「キャンセルされたら即終了」という安全な出口を用意しています。

Day 10 後半の練習テンプレート

最後に、Day 10後半の内容をまとめた練習用テンプレートを示します。 このファイルを保存してブラウザで開くと、カウントダウン・break・continue・条件を満たすまで繰り返す処理をまとめて試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 10 後半：while / do...while / break / continue 実践テンプレート</title>
</head>
<body>
  <h1>Day 10 後半：while文の応用とループ制御</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- シンプルなカウントダウン ---');

    let countDown = 10;

    while (countDown >= 0) {
      console.log(`カウントダウン：${countDown}`);
      countDown--;
    }

    console.log('シンプルなカウントダウンが完了しました。');

    console.log('--- break を使った途中終了付きカウントダウン ---');

    let countBreak = 10;

    while (countBreak >= 0) {
      console.log(`カウントダウン（break版）：${countBreak}`);

      if (countBreak === 5) {
        console.log('countBreak が 5 になったので、ここでループを終了します。');
        break;
      }

      countBreak--;
    }

    console.log('break による途中終了付きカウントダウンが完了しました。');

    console.log('--- continue を使った偶数だけカウントダウン ---');

    let countEven = 10;

    while (countEven >= 0) {
      if (countEven % 2 === 1) {
        // 奇数のときは表示せず、次のループへ
        countEven--;
        continue;
      }

      console.log(`偶数のカウントダウン：${countEven}`);
      countEven--;
    }

    console.log('偶数だけのカウントダウンが完了しました。');

    console.log('--- 条件を満たすまで繰り返す（合計が 30 以上になるまで） ---');

    let total = 0;
    let times = 0;

    while (total < 30) {
      const randomValue = Math.floor(Math.random() * 10) + 1;
      total += randomValue;
      times++;

      console.log(`第${times}回目：${randomValue} を足しました。現在の合計は ${total} です。`);
    }

    console.log(`合計が 30 以上になったので終了します。最終合計：${total} / 足した回数：${times} 回`);

    console.log('--- do...while を使った最低1回実行の例（簡易版） ---');

    let x = 0;

    do {
      console.log(`do...while のループ内：x = ${x}`);
      x++;
    } while (x < 3);

    console.log('do...while による最低1回実行の例が完了しました。');
  </script>
</body>
</html>

Day 10 後半のまとめ

Day 10後半では、次のことを意識して学びました。

  • while文を「いつ終わるか」という視点で設計すること
  • break で「途中終了」、continue で「一部スキップ」というループ制御ができること
  • カウントダウンを題材に、終了条件・更新・スキップ・途中終了を組み合わせて考える力を育てたこと
  • 条件を満たすまで繰り返す処理を、安全に設計する感覚を身につけたこと

ここまで来ると、ループは単なる「繰り返し」ではなく、 「流れを自分でデザインできる仕組み」として見えてきます。 終了条件・break・continueを意識しながら、少しずつ複雑なロジックにも挑戦してみてください。

スポンサーリンク
タイトルとURLをコピーしました