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

生徒

「JavaScriptでループの中に『もし～なら』という条件を入れて処理を変えたいです…どう書いたらいいですか？」

先生

「ループ内で条件分岐をするには、if文やswitch文を使います。目的や見やすさで使い分けると良いですね。」

生徒

「if文とswitch文って何が違うんですか？わかりやすく教えてください！」

先生

「もちろんです！初心者の方にも使えるように、一つずつ例を見ながら説明しますね。」

1. ループと条件分岐の組み合わせとは？

ループとは、同じ処理をくり返す仕組みです。条件分岐とは「if（もし～なら）」や「switch」を使って、条件によって処理を変える方法です。

たとえば「配列をひとつずつ見て、偶数なら〇〇、奇数なら××と表示する」といったケースで使います。

2. for文＋if文で偶数・奇数を分ける例


const nums = [1, 2, 3, 4, 5];
for (let i = 0; i < nums.length; i++) {
  const num = nums[i];
  if (num % 2 === 0) {
    console.log(num + " は偶数です");
  } else {
    console.log(num + " は奇数です");
  }
}


1 は奇数です
2 は偶数です
3 は奇数です
4 は偶数です
5 は奇数です

ここでは、if文を使って「条件（偶数かどうか）」をチェックしています。

3. for...of文でも同じように書ける


const nums = [10, 15, 20, 25];
for (let num of nums) {
  if (num % 10 === 0) {
    console.log(num + " は10の倍数です");
  } else {
    console.log(num + " は10の倍数ではありません");
  }
}


10 は10の倍数です
15 は10の倍数ではありません
20 は10の倍数です
25 は10の倍数ではありません

for...of文なら、配列の中身を直接numで扱えるので書きやすいです。

4. switch文で複数パターンに対応

「もし値が〇なら〇、△なら△…」という複数パターンがあるときには、switch文が見やすくておすすめです。


const items = ["red", "blue", "green", "yellow"];
for (let color of items) {
  switch (color) {
    case "red":
      console.log("赤が見つかりました");
      break;
    case "blue":
      console.log("青ですね");
      break;
    default:
      console.log(color + "ですね");
  }
}


赤が見つかりました
青ですね
greenですね
yellowですね

caseで値を振り分けて、defaultがすべてのパターンに当てはまらない場合の処理です。

5. 実行前に「早く戻る」方法：continue活用

continue文を使うと、不要な処理をスキップして次のループに進めます。効率的に書けます。


const nums = [1, -2, 3, -4, 5];
for (let num of nums) {
  if (num < 0) {
    continue; // マイナスは飛ばす
  }
  console.log(num + " は正の数です");
}


1 は正の数です
3 は正の数です
5 は正の数です

このようにマイナスの数だけ無視して進むと、読みやすくなります。

6. 条件分岐をループの外に出すとコードがすっきり

ループ内で複雑な条件を毎回書くと読みにくくなるので、関数にまとめるときれいに整理できます。


function isEven(num) {
  return num % 2 === 0;
}
const nums = [2, 5, 8];
for (let num of nums) {
  if (isEven(num)) {
    console.log(num + " は偶数です");
  } else {
    console.log(num + " は奇数です");
  }
}

条件だけを関数に切り出すことで、ループがシンプルになります。

7. 配列メソッド＋条件分岐で短く書く方法

filterやmapといった配列メソッドと組み合わせて使うと、条件分岐を簡潔に書けます。


const nums = [1, 2, 3, 4, 5];
const evenNums = nums.filter(num => num % 2 === 0);
console.log(evenNums); // [2,4]

こうすると「偶数だけ取り出す」という処理が一行で書けます。

8. 失敗しない条件分岐のコツ

ifの順番に注意：可能性が高い条件を先に書くと効率的
ネストを浅く：ifを入れ子にしすぎない
条件は関数に分ける：繰り返し使うなら関数にしておく

こうした工夫で、初心者でも読みやすく、バグが少ないコードになります。

JavaScriptのループ内で条件分岐を行うコツを学ぼう