この記事の要点

if / else if / else が基本。条件式は truthy / falsy で判定される 三項演算子 cond ? a : b は短い分岐を式として書くときに便利 switch は === 比較。fall-through (break 忘れ) に注意 Null 合体 ?? と Optional Chaining ?. は null / undefined だけを判定（0 や "" は通す） 論理代入演算子 ||= / &&= / ??= は条件付き代入を簡潔に書ける

JavaScript の条件分岐の基本

// if / else
if (score >= 80) {
    console.log("A");
} else if (score >= 60) {
    console.log("B");
} else {
    console.log("C");
}

// ブロックを省略すると 1 文だけが対象 (バグの温床)
if (cond) doA();
else      doB();

// 必ず波括弧で書く方が安全
if (cond) {
    doA();
} else {
    doB();
}

truthy / falsy

JavaScript では条件式の値が真偽以外でも、truthy / falsy として評価されます。

falsy な値	truthy な値
false	左以外すべて
0 / -0 / 0n	1, -1
"" (空文字)	"0", "false" (文字列)
null	[] (空配列)
undefined	{} (空オブジェクト)
NaN	関数

// 注意: 空配列・空オブジェクトは truthy
if ([])  console.log("truthy");  // 出力される！
if ({})  console.log("truthy");  // 同上

// 配列の中身を見るなら length
if (arr.length > 0) { ... }

// "0" は truthy だが Number("0") は 0 で falsy
if ("0")            console.log("truthy");    // 出る
if (Number("0"))    console.log("truthy");    // 出ない

三項演算子

// cond ? a : b
const label = (age >= 20) ? "成人" : "未成年";

// 入れ子 (読みづらいので 2 段以上は if に置き換える)
const grade = score >= 80 ? "A"
            : score >= 60 ? "B"
            : "C";

// React の条件レンダリング
return (
    <div>
        {isLoggedIn ? <Dashboard /> : <Login />}
    </div>
);

switch / case

switch (status) {
    case "active":
        showActive();
        break;          // ← 必ず付ける
    case "pending":
    case "review":      // fall-through で複数 case をまとめる
        showWaiting();
        break;
    case "banned":
        showBanned();
        break;
    default:
        showUnknown();
}

// switch は === 比較 (型まで一致が必要)
switch (1) {
    case "1":           // ← マッチしない！
        ...
}

// パターンとして「式」を使うトリック (ES6)
switch (true) {
    case score >= 80:
        return "A";
    case score >= 60:
        return "B";
    default:
        return "C";
}

論理演算子 (&& / || / !)

// 短絡評価 (short-circuit)
const a = obj && obj.name;        // obj が truthy なら obj.name、falsy ならその値
const b = name || "ゲスト";        // name が truthy なら name、falsy なら "ゲスト"
const c = !done;                  // 否定

// 副作用利用
isLoggedIn && console.log("welcome");   // true のときだけ実行
err || console.log("ok");                // err が falsy なら実行

Null 合体演算子 ?? (ES2020)

|| と似ていますが、null / undefined のときだけ代替値を使います。0 や 空文字 は通します。

const a = undefined ?? "default";   // "default"
const b = null      ?? "default";   // "default"
const c = 0         ?? "default";   // 0       (?? は 0 を通す)
const d = ""        ?? "default";   // ""      (?? は "" を通す)
const e = "value"   ?? "default";   // "value"

// 比較: || は 0 や "" も falsy 扱い
const f = 0  || "default";   // "default" ← 0 を捨てるので注意
const g = "" || "default";   // "default" ← 空文字を捨てる

// 推奨: 「未定義のとき」を表現したいなら ?? を使う
function greet(name) {
    const display = name ?? "ゲスト";  // null/undefined だけデフォルト
    return `こんにちは ${display}`;
}

Optional Chaining ?. (ES2020)

// 従来: ネストしたプロパティ参照は null チェック地獄
const city = user && user.address && user.address.city;

// ES2020: Optional Chaining
const city = user?.address?.city;

// メソッド呼び出し
const name = obj?.getName?.();

// 配列インデックス
const first = arr?.[0];

// 組み合わせ
const cityOrDefault = user?.address?.city ?? "東京";

論理代入演算子 (ES2021)

// ||= : 左が falsy のときだけ代入
let a = "";
a ||= "default";       // "default" (空文字は falsy)

// &&= : 左が truthy のときだけ代入
let b = "hello";
b &&= b.toUpperCase(); // "HELLO"

// ??= : 左が null/undefined のときだけ代入
let c = 0;
c ??= 100;             // 0 (?? は 0 を通すので代入されない)

let d;
d ??= "default";       // "default"

// 実用: オブジェクトのデフォルト値設定
function init(opts = {}) {
    opts.timeout ??= 30;
    opts.retries ??= 3;
    return opts;
}

等価比較 (== vs ===)

// == は型変換あり (推奨しない)
0 == "0"        // true
0 == false      // true
null == undefined  // true
"" == false     // true

// === は厳密比較 (型まで一致)
0 === "0"       // false
0 === false     // false
null === undefined  // false

// 常に === を使うべき
if (status === "active") { ... }

// 唯一の例外: null/undefined を同時にチェックするとき
if (value == null) { ... }   // null と undefined の両方をカバー
// または明示的に
if (value === null || value === undefined) { ... }

分岐パターンのベストプラクティス

やりたいこと	推奨
2 つの値からどちらか	三項 ?:
3 段以上の分岐	if / else if
1 つの変数を多くの値と比較	switch または Map ルックアップ
null/undefined を代替値に	??
falsy 全般を代替値に	||
深いプロパティアクセス	?.
条件付きで一度だけ代入	??=

FAQ

Q: switch と if/else if、どちらが速い？
A: 現代の JS エンジンでは差はわずか。可読性で選ぶのが鉄則。多くの値と等価比較するなら switch、範囲比較や複雑な条件なら if。

Q: ?? と || の使い分けは？
A: 0 や 空文字を有効値として扱いたいなら必ず ??。|| は「未入力」を「空文字」と同一視して問題ないときに限定。

Q: TypeScript で if (x) はどう判定される？
A: 型ガードとして機能し、ブロック内では x が non-null と推論されます。Optional Chaining と組み合わせると安全に書けます。