for文とwhile文でJavaScriptの「繰り返し処理」を体験しよう！

作成ファイル・保存場所

js-basic フォルダに以下のファイルを作成してください。

ファイル名	内容
js-basic04.html	ループ処理（for, while）の体験用HTMLファイル

基本コード(HTML)は下記からコピー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 04</title>
</head>
<body>
  <h1>繰り返し処理（for / while）を体験しよう</h1>

  <script>
    // for文：0〜4までの数値を繰り返し表示
    console.log('for文のループ：');


    // while文：条件が 5になるまでの間だけループ
    console.log('while文のループ：');


  </script>
</body>
</html>

👉 JavaScriptは <script> タグの中に直接書きましょう（内部JS）

今回のテーマ

プログラムでは「同じことを何度も繰り返す」ことがよくあります。
JavaScriptでは for 文や while 文を使って、繰り返し処理（ループ）を記述できます。

目的

for 文を使って「決まった回数」繰り返す書き方を学ぶ
while 文を使って「条件を満たす間」繰り返す書き方を学ぶ
ループ内で console.log() を使って繰り返しの流れを確認する
条件・カウントの変化を観察して、ロジックの流れを理解する

チェックポイント

for (初期値; 条件; 更新) の3つの要素を理解できているか
while (条件) の使い方と終了条件がわかっているか
変数の値がどう変化していくかをログで確認できているか
無限ループにならないように、終了条件を正しく書けているか

解説ポイント

for文とは？

決まった回数だけ繰り返したいときに使う、最も基本的な繰り返し構文です。
「初期値 → 条件 → 更新」を1行でまとめて書けるのが特徴で、処理の流れがわかりやすく、数を数えながら何かを繰り返すときによく使われます。

for (初期値; 繰り返す条件; 更新処理) {
  // 繰り返したい処理
}

例：for (let i = 0; i < 5; i++)

初期値：i = 0
条件：i < 5 の間だけ実行
更新：i++（iを1ずつ増やす）

for (let i = 0 ;i < 5 ; i++) {
  console.log(i);
}

while文とは？

条件を満たす間だけ処理を繰り返す構文です。
あらかじめ回数が決まっていないときや、「条件を満たしている限り繰り返したい」場合に使います。
条件が false のときは、一度も実行されないこともあるのが特徴です。

let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

前判定（実行前に判定）であることに注意
条件が true なら繰り返し、false になったら終了

for文とwhile文の違い

比較項目	for文	while文
主な用途	繰り返す回数が決まっているとき	回数が決まっていないが、条件を満たす間繰り返したいとき
書き方の特徴	初期値・条件・更新処理を1行にまとめて書く	条件のみを書く。初期化や更新は別に記述する
実行前の判定	条件を判定 → 成功なら処理を実行（前判定）	同じく、処理の前に条件を判定する（前判定）
処理の流れの見やすさ	流れが明確で繰り返しの全体像が見やすい	柔軟だが、書き方を間違えると無限ループになりやすい
例（0〜4まで表示）	`for (let i = 0; i < 5; i++) { ... }`	`let i = 0; while (i < 5) { ...; i++; }`

使い分けの目安

for文：
→「〇回繰り返す」「何回目かを数えながら処理する」など、明確な回数のループ
while文：
→「何かの状態が続く限り繰り返す」など、終了条件に柔軟に対応したいとき

補足：インクリメント（++）とデクリメント（–）とは？

書き方	意味	例
`i++`	`i = i + 1`（1つ増やす）と同じ	`i` が 1 → 2 に変化
`count--`	`count = count - 1`（1つ減らす）と同じ	`count` が 10 → 9 に変化

これを「インクリメント」「デクリメント」と呼びます。 for や while などのループでは非常によく使われる書き方です

無限ループに注意！

ループでは「止める条件が正しく書けているか」「カウントをきちんと増減させているか」を確認しましょう。

無限ループとは、繰り返し処理の終了条件が正しく設定されておらず、止まらずにずっと処理が続いてしまう状態のことをいいます。

特にブラウザ上で実行していると、処理が終わらずに画面が固まったり、応答しなくなる（フリーズする）ことがあります。結果、ブラウザの応答停止、開発ツールの強制停止、メモリ消費などに繋がります。

よくある例

let i = 0;
while (i < 5) {
  console.log(i);
  // i++; ← これを忘れるとずっと0のまま
}

i++;を忘れると、 i の値が増えない ので、i < 5 がずっと true のまま → 無限ループ！

for( let i = 0; i > 10; i++){
  console.log(i);
}
// このループは1回も実行されません（i > 10 が最初から false）

開始時点で条件が false の場合は、ループは1度も実行されません。

HTML/JavaScriptトレーニング

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS Practice 04</title>
</head>
<body>
  <h1>繰り返し処理（for / while）を体験しよう</h1>

  <script>
    // for文：0〜4までの数値を繰り返し表示
    console.log('for文のループ：');
    for (let i = 0; i < 5; i++) {
      console.log('iの値は ' + i);
    }

    // while文：条件が true の間だけループ
    console.log('while文のループ：');
    let count = 0;
    while (count < 5) {
      console.log('countの値は ' + count);
      count++;
    }
  </script>
</body>
</html>

応用トレーニング

while 文で 10 から 1 までカウントダウンしよう

解答

let count = 10;
while (count >= 1) {
  console.log(count);
  count--;
}

1から10までの数値の繰り返しの中で、if 文と組み合わせて、変数 i が「2で割り切れるかどうか」を true / false で判定してみよう

解答

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i + ' は 2で割り切れる → true');
  } else {
    console.log(i + ' は 2で割り切れない → false');
  }
}