三項演算子 — 条件を一行で
このトピックを修了すると
三項演算子の構造を理解し、if/elseを一行に置き換えられるようになり、どのような状況で三項演算子が適切で、どのような状況で読みにくくなるかを判断できるようになります。
4行のif文を1行に
「成人の場合は入場、それ以外は入場不可」のような単純な分岐をif/elseで記述すると、次のようになります。
let message;
if (age >= 18) {
message = "入場可能";
} else {
message = "未成年者のアクセスは不可";
}三項演算子を使うと、一行で記述できます。
const message = age >= 18 ? "入場可能" : "未成年者のアクセスは不可";構造：条件 ? 真の場合の値 : 偽の場合の値
重要な点は、三項演算子は値を返すということです。ifは文（ステートメント）であり、値を返しませんが、三項演算子は式（エクスプレッション）であり、変数に直接格納できます。
基本的なパターン
// パターン1：変数の代入
const status = score >= 60 ? "合格" : "不合格";
// パターン2：関数の引数
console.log(isLoggedIn ? "ようこそ" : "ログインしてください");
// パターン3：テンプレートリテラルの内部
const greeting = `${hour < 12 ? "午前" : "午後"} ${hour % 12}時です`;共通点：「2つの値のいずれかを選択する必要がある」状況で、その選択自体が一行で完結する場合、三項演算子が自然です。
React/JSXにおける三項演算子
Reactでは、三項演算子はほぼ必須です。JSX内ではif文を使用できないためです。
function UserGreeting({ isLoggedIn, name }) {
return (
<div>
{isLoggedIn ? (
<h1>{name}さん、ようこそ</h1>
) : (
<button>ログイン</button>
)}
</div>
);
}JSXの波括弧 {} 内には、**式（エクスプレッション）**のみを記述できます。if/elseは文（ステートメント）であるため、記述できません。三項演算子は、インラインでの条件分岐を行うための唯一の手段です。
入れ子になった三項演算子 — 誘惑と落とし穴
2回以上分岐する場合、三項演算子を入れ子にしたいという誘惑が生じます。
// ❌ 読みにくい
const label = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";このコードは動作しますが、6か月後に読んでも解釈に時間がかかります。入れ子になった三項演算子は、インデントを付けても可読性が悪くなります。
代替案1 — if/else：
// ✅ 明確
let label;
if (score >= 90) label = "A";
else if (score >= 80) label = "B";
else if (score >= 70) label = "C";
else label = "F";代替案2 — オブジェクトのマッピングまたは関数抽出：
function getGrade(score) {
if (score >= 90) return "A";
if (score >= 80) return "B";
if (score >= 70) return "C";
return "F";
}
const label = getGrade(score);三項演算子 vs &&（論理AND）
Reactで、「条件が真の場合はレンダリングし、偽の場合は何もレンダリングしない」という場合：
// 三項演算子 — nullを明示的に返す
{isAdmin ? <AdminPanel /> : null}
// &&演算子 — より簡潔
{isAdmin && <AdminPanel />}&& は、偽の場合にレンダリングするものが何もない場合に、三項演算子よりも簡潔です。ただし、注意点があります。
// ⚠️ 危険：countが0の場合、画面に "0" がレンダリングされる
{count && <ItemList />}
// ✅ 安全：明示的にブール値に変換
{count > 0 && <ItemList />}0 はfalsyですが、Reactは数値 0 を画面にレンダリングします。&& の左側が数値の場合、比較演算子を使用してブール値にする必要があります。
Nullish Coalescing (??) との違い
// 三項演算子：条件に応じて2つの値のいずれかを選択
const display = value !== null ? value : "デフォルト値";
// ??：nullまたはundefinedの場合のみ置換
const display = value ?? "デフォルト値";?? は、null と undefined のみをフィルタリングします。0、""、false などのfalsy値はそのまま通過させます。三項演算子は、どのような条件でも使用できるため、汎用的であり、?? は「値がない場合にデフォルト値」という狭い用途に特化しています。
判断基準
| 状況 | 推奨 |
|---|---|
| 2つの値のいずれかを選択して代入 | ✅ 三項演算子 |
| JSXインライン条件付きレンダリング | ✅ 三項演算子または && |
| 3段以上の分岐 | ❌ if/else または関数抽出 |
| 副作用（API呼び出しなど）を含む | ❌ if/else |
| null/undefinedの置換のみ | ❌ ??演算子 |
三項演算子は、「2つの選択肢、1行、値の返却」のすべてが当てはまる場合にのみ使用します。1つでも当てはまらない場合は、if/elseの方が適切です。
重要なポイント: 三項演算子は
条件 ? A : B— 2つの値のいずれかを選択する式（エクスプレッション）です。入れ子にすると読みにくくなるため、分岐が増えた場合はif/elseに戻りましょう。