先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのループって繰り返し処理ですよね？でも、条件によって処理を変えたりスキップしたりできるんでしょうか？」

先生

「そうですね。ループと条件式を組み合わせることで、もっと便利に繰り返し処理をコントロールできます。たとえば、ある条件に当てはまるときだけ特別な処理をしたり、逆にスキップしたりすることができますよ。」

生徒

「具体的にはどんな書き方をするんですか？」

先生

「では、わかりやすい例を使って順番に説明しましょう！」

1. ループ処理と条件式の基本

JavaScriptのループ処理とは、同じ処理を何度も繰り返す仕組みです。forやwhileがよく使われます。条件式とは、ある条件が「正しい（true）」か「正しくない（false）」かを判定して、処理の流れを変えるための式です。

たとえば、「1から10までの数字のうち、偶数だけ表示したい」という場合、ループで1から10まで繰り返しながら条件式で偶数かどうかを判定します。

2. if文で条件を判定する

if文は「もし〜なら」という条件分岐の書き方です。ループの中で使うと、繰り返しごとに条件に合うかどうかを調べられます。


for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {  // iが2で割り切れる（偶数）のとき
    console.log(i + "は偶数です");
  }
}

このコードは1から10までの数字を順番に調べて、偶数だけを画面に表示します。

3. elseを使って条件に合わない場合の処理も書ける

if文にはelseという「もし条件に合わなかったら」という場合の処理も書けます。これで条件に合う場合と合わない場合の両方を扱えます。


for (let i = 1; i <= 5; i++) {
  if (i % 2 === 0) {
    console.log(i + "は偶数です");
  } else {
    console.log(i + "は奇数です");
  }
}

偶数と奇数で表示内容を変えて、わかりやすくしています。

4. continueで処理をスキップする

continueは「このループの今の回はここで終わりにして、次の回に進んでね」という意味です。たとえば、奇数のときは処理をスキップしたいときに使います。


for (let i = 1; i <= 5; i++) {
  if (i % 2 !== 0) {
    continue;  // 奇数はスキップ
  }
  console.log(i + "は偶数です");
}

このコードでは、奇数の場合は処理を飛ばして偶数だけ表示しています。

5. breakでループを途中で終わらせる

breakは「ループをそこで完全に終わらせる」という命令です。条件を満たしたら、もう繰り返しを続けたくない場合に使います。


for (let i = 1; i <= 10; i++) {
  if (i > 5) {
    break;  // iが5を超えたらループ終了
  }
  console.log(i);
}

このコードは1から5までの数字だけ表示します。6以上は表示しません。

6. 複数の条件を組み合わせる

条件は&&（そして）や||（または）を使って複数の条件を組み合わせられます。

たとえば、「1から10までのうち、偶数かつ5以下の数字だけ表示したい」場合はこう書きます。


for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0 && i <= 5) {
    console.log(i + "は偶数で5以下です");
  }
}

7. 実践的な例：配列とループと条件式の組み合わせ

配列は複数のデータをまとめて扱う便利な仕組みです。ループと条件式を組み合わせて、配列の中から条件に合うものだけを処理できます。


const fruits = ["りんご", "バナナ", "みかん", "ぶどう"];

for (let i = 0; i < fruits.length; i++) {
  if (fruits[i] === "みかん") {
    console.log("みかんは好きな果物です！");
  } else {
    console.log(fruits[i] + "も美味しいですね。");
  }
}

このコードは果物のリストから「みかん」のときだけ特別なメッセージを表示し、それ以外は普通のメッセージを表示しています。