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

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

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

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

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

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

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文でも同じように書ける

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文で複数パターンに対応

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活用

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. 条件分岐をループの外に出すとコードがすっきり

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. 配列メソッド＋条件分岐で短く書く方法

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

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

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

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

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

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

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

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

まとめ

まとめ

ここまでJavaScriptにおけるループ（繰り返し処理）と条件分岐の組み合わせについて、基礎から実践的なテクニックまで詳しく解説してきました。プログラミングにおいて、この「繰り返しながら判断する」という一連の動作は、もっとも頻繁に登場するパターンの一つです。

ループ処理と条件分岐の重要ポイント

効率的で読みやすいコードを書くためには、単に動くコードを書くだけでなく、状況に応じて最適な制御構文を選択することが重要です。以下のポイントを意識することで、あなたのコードはよりプロフェッショナルなものに近づきます。

• 適切なループの選択： 配列の全要素を処理する場合は for...of 文がシンプルで間違いがありません。インデックス（何番目か）が必要な場合は従来の for 文を使いましょう。
• if文とswitch文の使い分け： 二択や範囲指定なら if 文、特定の値が複数ある場合は switch 文を使うと、コードの視認性が格段に向上します。
• 早期リターンとcontinue： continue を使うことで、不必要な処理を「スキップ」し、コードのネスト（入れ子）を深くせずに済みます。

さらに応用：TypeScriptでの型安全なループ処理

近年、JavaScriptに型定義を追加した TypeScript の利用が一般的になっています。TypeScriptを使うことで、ループ内の変数がどのようなデータを持っているかを厳密に定義でき、開発効率が上がります。例えば、特定の文字列のみを持つ配列をループで回す場合は、次のように記述します。

type Status = "success" | "error" | "pending";
const results: Status[] = ["success", "error", "pending", "success"];

for (const status of results) {
  if (status === "success") {
    console.log("処理は成功しました。");
  } else if (status === "error") {
    console.error("エラーが発生しました。");
  } else {
    console.log("処理を待機中です。");
  }
}

このように、型（Type）を定義しておくことで、スペルミスなどのケアレスミスをコンパイル時に防ぐことが可能になります。

実務で役立つテクニック：多重ループとラベル

少し高度な内容になりますが、ループの中にさらにループがある「多重ループ」の場合、特定の条件で全てのループを一気に抜け出したいことがあります。その際は「ラベル」という機能を使用します。

outerLoop: for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (i * j > 4) {
      console.log(`条件一致：i=${i}, j=${j} なので全てのループを終了します。`);
      break outerLoop;
    }
    console.log(`計算中：${i} × ${j} = ${i * j}`);
  }
}

計算中：1 × 1 = 1
計算中：1 × 2 = 2
計算中：1 × 3 = 3
計算中：2 × 1 = 2
計算中：2 × 2 = 4
条件一致：i=2, j=3 なので全てのループを終了します。

break や continue は、直近のループにしか作用しませんが、ラベルを使うことで外側のループまで制御できるため、複雑なデータ構造を扱う際に非常に便利です。

まとめとしての最終アドバイス

プログラミング学習において、最初は「どう書けば動くか」に集中しがちですが、慣れてきたら「どう書けば読みやすいか」を意識してみてください。今回紹介した filter メソッドによる簡略化や、条件式の関数化などは、チーム開発において非常に高く評価されるスキルです。 JavaScriptの柔軟性を活かしつつ、シンプルで美しいロジックを組めるよう、繰り返し練習していきましょう。