JavaScript

JavaScriptの条件分岐とは？if・else・switchの使い方を徹底解説

はじめに

JavaScriptでWebサイトやアプリを作るとき、
「もし○○だったらこうする」「そうでなければ××する」といった条件による分岐が必要になります。

たとえば、

  • ログインしている人だけにメッセージを表示する
  • 数値が一定以上なら合格、それ以下なら不合格と判定する
    など、「条件分岐（じょうけんぶんき）」を使うことで、プログラムに判断力を持たせることができます。

この記事では、初心者にもわかりやすく👇

✅ if・else・else ifの基本構文
✅ switch文の使い方
✅ よくあるエラーと注意点
をわかりやすい例つきで解説します！

条件分岐とは？

条件分岐とは、条件に応じて処理の流れを変える仕組みのことです。

📦 イメージ：

もし（条件が真）なら → Aを実行
そうでなければ → Bを実行

JavaScriptでは、主に次の2つの書き方があります👇

構文用途
if / else if / else基本的な条件分岐（最もよく使う）
switch条件が「複数の値」に分かれるときに便利

if文の基本構文

✅ 基本形

if (条件) {
  // 条件がtrueのとき実行される処理
}

📘 例：

let score = 80;

if (score >= 70) {
  console.log("合格です！");
}

💡解説：

  • if の後の ( ) の中に条件式を書く
  • 条件が true（真）なら { } の中の処理が実行されます

if〜else文：条件が違うときに別の処理を実行

let score = 60;

if (score >= 70) {
  console.log("合格です！");
} else {
  console.log("不合格です...");
}

🖥 結果：

不合格です...

💡 ポイント：

  • else は「ifの条件がfalseだったとき」に実行される処理を定義します。

else if文：条件が複数あるとき

let score = 85;

if (score >= 90) {
  console.log("A評価");
} else if (score >= 70) {
  console.log("B評価");
} else {
  console.log("C評価");
}

🖥 結果：

B評価

💡 ポイント：

  • 上から順番に条件がチェックされる
  • 最初にtrueになった条件の処理が実行され、残りはスキップされます

比較演算子を使って条件を作ろう

条件分岐では「比較演算子」を使って値を比較します👇

演算子意味例結果
==等しい（値だけ）5 == "5"true
===厳密に等しい（型も一致）5 === "5"false
!=等しくない10 != 5true
!==厳密に等しくない10 !== "10"true
>より大きい8 > 5true
<より小さい3 < 5true
>=以上5 >= 5true
<=以下4 <= 6true

💡 ポイント：
初心者は「==」と「===」の違いに注意！
基本的には 「===」を使う のがおすすめです。

複数の条件を組み合わせる（論理演算子）

条件を組み合わせるときには、以下のような「論理演算子」を使います👇

演算子意味例
&&かつ（AND）(score >= 70 && age >= 18)
| |または（OR）(score >= 70 | | age >= 18)
!否定（NOT）!(score >= 70)

📘 例：

let score = 80;
let attendance = 90;

if (score >= 70 && attendance >= 80) {
  console.log("合格！");
} else {
  console.log("不合格…");
}

🖥 結果：

合格！

switch文：複数の条件を整理して書く

switch 文は、特定の値に応じて処理を分けたいときに使います。
たとえば曜日やメニュー選択などに便利です。

📘 例：

let day = "月";

switch (day) {
  case "月":
    console.log("今週もがんばろう！");
    break;
  case "金":
    console.log("もうすぐ週末！");
    break;
  default:
    console.log("平日ですね");
}

💡 解説：

  • case は「条件に一致したら実行」
  • break; を忘れると次のcaseまで実行される
  • default はどの条件にも当てはまらない場合に実行

三項演算子で条件を1行にまとめる

短い条件分岐なら、「三項演算子」を使うとスッキリ書けます。

📘 構文：

条件 ? trueのときの処理 : falseのときの処理

📘 例：

let age = 20;
let result = (age >= 18) ? "大人" : "未成年";
console.log(result);

🖥 結果：

大人

よくあるミスと注意点

ミス原因対処法
= を使ってしまう代入と比較を間違える比較には == または === を使う
break; を書き忘れるswitch文で次のcaseまで実行される各caseの末尾に break; をつける
条件がtrueにならない文字列と数値を混同しているデータ型を確認する（===を使用）

まとめ：条件分岐でプログラムに「判断力」を持たせよう

条件分岐は、JavaScriptで動きのあるロジックを作るための基本中の基本です。

✅ 今日のまとめ

  • if / else / else if で条件に応じた処理を分ける
  • 複数の条件は && や || で組み合わせる
  • 値の比較は === を使うのが安全
  • switch で複数パターンを整理
  • 簡単な条件なら「三項演算子」でスッキリ書ける

-JavaScript