三項演算子とは何か
三項演算子は「条件式 ? 真の場合の値 : 偽の場合の値」という形で、1行で条件分岐と値の選択を行う書き方です。if文で値を代入する処理を、短く読みやすく表現できます。結果は「式の値」になるため、変数代入や関数の引数、テンプレート文字列の中でも使えます。
const age = 20;
const label = age >= 18 ? "成人" : "未成年";
console.log(label); // "成人"
基本構文と評価の流れ
「条件式 ? A : B」という形で書き、条件式が真なら A、偽なら B が返ります。A と B は値でも式でも構いません。返り値はその場で使えます。
const isMember = true;
const price = isMember ? 1000 : 1500; // 真なら1000、偽なら1500
const msg = (price > 1200) ? "高い" : "安い"; // 条件に応じて文字列を返す
console.log(msg);
三項演算子は「式」なので、return の中や関数引数にも直接書けます。
function shipFee(total) {
return total >= 5000 ? 0 : 500;
}
truthy / falsy と組み合わせる
条件式は true/false 以外でも評価され、truthy なら真、falsy なら偽として扱われます。空文字や 0 をどう扱うかは要件に合わせて条件を定義しましょう。
const name = "";
const display = name ? name : "ゲスト"; // 空文字は falsy → "ゲスト"
0 を有効値として残したい場合、単純な truthy 判定では意図が崩れます。より厳密な条件にしましょう。
const count = 0;
const label = (count !== null && count !== undefined) ? String(count) : "N/A";
console.log(label); // "0"
実用例で理解する
簡単なラベル付け
const score = 72;
const result = score >= 60 ? "合格" : "不合格";
console.log(result); // "合格"
クラス名やスタイルの切り替え
const active = false;
const className = active ? "btn btn-primary" : "btn btn-outline";
テンプレートで条件表示
const isAdmin = true;
console.log(`権限: ${isAdmin ? "管理者" : "一般"}`);
関数引数の選択
const useCache = true;
const data = (useCache ? getFromCache : fetchFromAPI)();
ネスト（入れ子）と可読性のコツ
三項演算子は入れ子にできますが、増えるほど読みにくくなります。複雑になりそうなら、括弧でグループ化するか if 文に切り替えます。
const score = 85;
const grade = score >= 90 ? "A"
: score >= 80 ? "B"
: score >= 70 ? "C"
: score >= 60 ? "D"
: "F";
console.log(grade); // "B"
入れ子が3段以上になるなら、素直に if/else へ書き換えたほうが保守しやすくなります。
よくある落とし穴と回避策
値の型がブレる
真と偽で型が違うと後続処理で困ることがあります。可能なら同じ型を返しましょう。
// 良くない例：数値か文字列が返る
const fee = isMember ? 0 : "未登録";
// 推奨：どちらも同じ型
const fee2 = isMember ? 0 : 500;
副作用を入れすぎない
三項演算子は「値を選ぶ」ための道具。console.log などの副作用を条件ごとに書き始めると読みにくくなります。副作用は if 文で分岐するほうが明快です。
複雑条件は括弧で明示
AND/OR と組み合わせる場合、優先順位（! → && → ||）を理解したうえで、括弧で意図を明確にします。
const canUse = (age >= 18 && isMember) ? "OK" : "NG";
三項演算子と他の手段の使い分け
- 短く「値の選択」をしたいときは三項演算子が最適。
- 条件が複数段階で長くなる、または副作用が多い場合は if/else にする。
- デフォルト値の付与は OR（||）や null 合体（??）が向く場面もある。要件（0 や “” を有効値にするか）で使い分ける。
// デフォルト値は ?? が安全（null/undefined だけを置換）
const name = inputName ?? "ゲスト";
まとめ
三項演算子は「条件に応じて1行で値を選ぶ」ためのコンパクトな表記です。基本構文は「条件 ? 真の値 : 偽の値」。truthy/falsy の特性を理解し、型をそろえ、複雑になったら if 文に切り替える。括弧で意図を明示すれば、短くても読みやすい条件式が書けます。
