条件分岐とは？プログラムの流れを制御する基本構文の使い方

はじめに

「もし〜なら、〜する」というような判断は、私たちの日常でもプログラムでも非常に重要です。たとえば、ユーザーがログインしていればメイン画面を表示し、していなければログイン画面へ遷移する――このようなプログラムの流れを分ける処理を「条件分岐」といいます。本記事では条件分岐の基本文法、バリエーション、注意点まで幅広く解説します。

基本情報・概要

条件分岐（Conditional Statements）とは、ある条件に基づいて実行する処理を選択する構文です。JavaScriptでは主に以下のような構文が利用されます。

if (条件) {
    // 条件がtrueのときの処理
} else {
    // それ以外の処理
}

if (score >= 80) {
    console.log("合格");
} else {
    console.log("不合格");
}

比較・分類・特徴の表形式まとめ

if (x > 0) { ... }

else if (x === 0)

switch (status) { case "ok": }

let msg = x > 0 ? "OK" : "NG";

深掘り解説

if / else / else if の基本

const age = 18;

if (age >= 20) {
    console.log("成人です");
} else if (age >= 13) {
    console.log("未成年（ティーン）です");
} else {
    console.log("子どもです");
}

複数の条件を

else if

switch文による分岐

const color = "blue";

switch (color) {
    case "red":
        console.log("赤です");
        break;
    case "blue":
        console.log("青です");
        break;
    default:
        console.log("その他の色です");
}

switch

三項（条件）演算子

1行で条件分岐したい場合には三項演算子が便利です。

const isMember = true;
const fee = isMember ? 500 : 1000;
console.log(fee); // 500

構文は

(条件) ? 真の場合の値 : 偽の場合の値

応用・発展的な使い方

複数条件の評価

&&

||

if (age >= 18 && hasID) {
    console.log("入場可能");
}

ネストされた条件分岐

条件分岐の中にさらに条件を書くことも可能ですが、複雑になると可読性が低下するため注意が必要です。

if (user) {
    if (user.isAdmin) {
        console.log("管理者ページへ");
    }
}

オブジェクトによる分岐の代替

switchやifを連続するより、オブジェクトで関数を管理するテクニックもあります。

const handlers = {
    login: () => console.log("ログイン処理"),
    logout: () => console.log("ログアウト処理")
};

const action = "login";
handlers[action]?.();

よくある誤解と注意点

• =

  （代入）と

  ==

  /

  ===

  （比較）の混同に注意

• switch

  の

  break

  を忘れると後続の処理まで実行されてしまう
• 三項演算子をネストすると可読性が悪くなるので控えめに使う
• JavaScriptでは

  false

  ,

  0

  ,

  ""

  ,

  null

  ,

  undefined

  ,

  NaN

  はすべて

  false

  と評価される（Falsy）

まとめ

条件分岐はプログラムの挙動を柔軟に制御するために欠かせない基本構文です。

if / else

switch