【JavaScript】三項演算子の使い方｜if-elseとの違い・実務パターン・注意点まで解説

この記事で学べること

• 三項演算子の基本構文とif-elseとの違い
• 変数代入・テンプレートリテラル・JSXなど実務で使うパターン
• ネスト（入れ子）の書き方と避けるべき理由
• 短絡評価（&& / ||）やNull合体演算子（??）との使い分け
• よくあるミスと注意点

// 三項演算子の基本構文
条件式 ? 真の場合の値 : 偽の場合の値

const age = 20;
const message = age >= 18 ? '成人です' : '未成年です';

console.log(message); // "成人です"

成人です

const score = 75;
let result;

if (score >= 60) {
  result = '合格';
} else {
  result = '不合格';
}

console.log(result); // "合格"

const score = 75;
const result = score >= 60 ? '合格' : '不合格';

console.log(result); // "合格"

ポイント：三項演算子を使うと、let → const に変更できるケースが多くあります。constを使えば変数が再代入されないことが保証され、コードの安全性と可読性が向上します。

「式」と「文」の違いが最も重要です。三項演算子は式なので、変数の右辺、関数の引数、テンプレートリテラルの中、JSXの中など、値が必要なあらゆる場所に書くことができます。

// ユーザーの権限に応じたリダイレクト先
const redirectUrl = user.isAdmin ? '/admin/dashboard' : '/user/home';

// 在庫状況の表示テキスト
const stockText = stock > 0 ? '在庫あり' : '在庫切れ';

// 割引の適用
const price = isMember ? basePrice * 0.9 : basePrice;

// 配列の要素数に応じたメッセージ
const label = items.length === 1 ? '1 item' : `${items.length} items`;

// classList の切り替え
element.classList.add(isActive ? 'active' : 'inactive');

// console.log の条件付き出力
console.log(isValid ? 'バリデーション成功' : 'バリデーション失敗');

// fetch の URL を条件で切り替え
const response = await fetch(
  isDev ? 'http://localhost:3000/api' : 'https://api.example.com'
);

const userName = '田中太郎';
const isLoggedIn = true;

// テンプレートリテラル内での条件分岐
const greeting = `こんにちは、${isLoggedIn ? userName : 'ゲスト'}さん`;
console.log(greeting);

// HTML文字列の動的生成
const html = `
  <div class="card">
    <h2>${title}</h2>
    ${imageUrl ? `<img src="${imageUrl}" alt="${title}">` : ''}
    <p>${description}</p>
  </div>
`;

こんにちは、田中太郎さん

function UserGreeting({ isLoggedIn, userName }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>ようこそ、{userName}さん</p>
      ) : (
        <p>ログインしてください</p>
      )}
    </div>
  );
}

// ボタンの表示テキストを切り替え
function ToggleButton({ isOpen, onClick }) {
  return (
    <button onClick={onClick}>
      {isOpen ? '閉じる' : '開く'}
    </button>
  );
}

JSXでは {} の中に式しか書けません。if文は文なので使えませんが、三項演算子は式なのでそのまま埋め込めます。これがReactで三項演算子が多用される理由です。

// 三項演算子でデフォルト値を設定
const displayName = user.name ? user.name : '匿名ユーザー';

// Null合体演算子（??）で書いた場合
const displayName = user.name ?? '匿名ユーザー';

// 重要な違い：falsy値の扱い
const count = 0;

// 三項演算子: 0はfalsyなのでデフォルト値が使われる
const result1 = count ? count : 10;
console.log(result1); // 10（意図しない結果）

// ??: nullとundefinedのみデフォルト値が使われる
const result2 = count ?? 10;
console.log(result2); // 0（意図通り）

10
0

注意：0、""（空文字列）、falseをfalsy値として扱いたくない場合は、三項演算子ではなくNull合体演算子（??）を使いましょう。?? は null と undefined のみをチェックします。

// APIリクエストのパラメータ
const params = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': token ? `Bearer ${token}` : '',
  },
  body: JSON.stringify(data),
};

// CSSクラス名の組み立て
const buttonStyle = {
  backgroundColor: isPrimary ? '#0284c7' : '#6b7280',
  cursor: isDisabled ? 'not-allowed' : 'pointer',
  opacity: isDisabled ? 0.5 : 1,
};

// 数値のフォーマット
function formatNumber(num) {
  return num >= 10000
    ? `${(num / 10000).toFixed(1)}万`
    : num.toLocaleString();
}

console.log(formatNumber(1500));   // "1,500"
console.log(formatNumber(25000));  // "2.5万"

// 偶数・奇数の判定
const isEven = (n) => n % 2 === 0 ? '偶数' : '奇数';

1,500
2.5万

// 成績の評価（ネストあり）
const score = 85;

const grade = score >= 90 ? 'A'
  : score >= 80 ? 'B'
  : score >= 70 ? 'C'
  : score >= 60 ? 'D'
  : 'F';

console.log(grade); // "B"

B

let grade;

if (score >= 90) {
  grade = 'A';
} else if (score >= 80) {
  grade = 'B';
} else if (score >= 70) {
  grade = 'C';
} else if (score >= 60) {
  grade = 'D';
} else {
  grade = 'F';
}

注意：ESLintの no-nested-ternary ルールを有効にしているプロジェクトでは、三項演算子のネストはエラーになります。チームのコーディング規約を確認しましょう。

function getGrade(score) {
  if (score >= 90) return 'A';
  if (score >= 80) return 'B';
  if (score >= 70) return 'C';
  if (score >= 60) return 'D';
  return 'F';
}

const grade = getGrade(85); // "B"

// 値が完全一致する場合はオブジェクトマップが最適
const statusLabels = {
  pending: '保留中',
  approved: '承認済み',
  rejected: '却下',
  cancelled: 'キャンセル',
};

// ネストした三項演算子の代わりにオブジェクトで検索
const label = statusLabels[status] ?? '不明';

ポイント：値が完全一致で決まるケースでは、オブジェクトマップを使うと三項演算子のネストもif-elseチェーンも不要になります。条件が増えてもオブジェクトにプロパティを追加するだけなので、メンテナンス性が高いのが特徴です。

// 三項演算子：偽の場合に空文字を返す
const warning = hasError ? 'エラーがあります' : '';

// && で同じことを書く（よりシンプル）
const warning = hasError && 'エラーがあります';

// Reactでの条件付きレンダリング
return (
  <div>
    {isLoading && <Spinner />}
    {errorMessage && <Alert>{errorMessage}</Alert>}
  </div>
);

注意：Reactで && を使うとき、左辺が 0 の場合は注意が必要です。0 && <Component /> は 0 を返すため、画面に 0 が表示されてしまいます。Boolean(count) && <Component /> または count > 0 && <Component /> と書くと安全です。

// 三項演算子でデフォルト値
const name = userName ? userName : 'ゲスト';

// || で同じことを書く（よりシンプル）
const name = userName || 'ゲスト';

// ?? で書く（null/undefinedのみチェック）
const name = userName ?? 'ゲスト';

const user = {
  name: '田中',
  age: 0,        // 0歳の赤ちゃん
  nickname: '',  // ニックネーム未設定（空文字）
  email: null,    // メール未登録
};

// 三項演算子：真偽で別々の値を返したいとき
const ageGroup = user.age >= 18 ? '成人' : '未成年';

// ||：falsyならデフォルト値（0や空文字もfalsyになる）
user.age || '未設定';      // "未設定"（0がfalsyなので）
user.nickname || '匿名';  // "匿名"（空文字がfalsyなので）

// ??：null/undefinedのみデフォルト値（0や空文字はそのまま）
user.age ?? '未設定';      // 0（nullでもundefinedでもない）
user.nickname ?? '匿名';  // ""（nullでもundefinedでもない）
user.email ?? '未登録';    // "未登録"（nullなので）

// &&：条件を満たすときだけ処理
user.email && sendEmail(user.email); // emailがnullなので実行されない

使い分けのコツ：「2つの値を出し分ける」なら三項演算子、「あるときだけ表示する」なら &&、「デフォルト値を設定する」なら || または ?? を使いましょう。0 や空文字を有効な値として扱いたい場合は ?? を選びます。

const score = 75;

// NG: 結果をどこにも代入していない
score >= 60 ? '合格' : '不合格';  // 値が返されるが、捨てられる

// OK: 変数に代入する
const result = score >= 60 ? '合格' : '不合格';

// OK: 関数の引数として使う
console.log(score >= 60 ? '合格' : '不合格');

let count = 0;

// NG: 三項演算子の中で副作用を実行している
isValid ? count++ : console.error('invalid');

// OK: if-elseで書く（副作用があるなら文で書く）
if (isValid) {
  count++;
} else {
  console.error('invalid');
}

三項演算子は「値を選ぶ」ためのもの、if-elseは「処理を分岐する」ためのもの、と覚えておきましょう。副作用を伴う処理はif-elseで書くのが原則です。

// NG: 条件が長すぎて読みにくい
const msg = user.isAdmin && user.isActive && !user.isBanned && user.permissions.includes('edit')
  ? '編集可能'
  : '閲覧のみ';

// OK: 条件を変数に切り出す
const canEdit = user.isAdmin
  && user.isActive
  && !user.isBanned
  && user.permissions.includes('edit');

const msg = canEdit ? '編集可能' : '閲覧のみ';

ポイント：条件が複雑な場合は、まず条件部分を意味のある名前の変数に切り出しましょう。三項演算子自体がシンプルになり、条件の意味も明確になります。

// 文字列結合との組み合わせ
const isVIP = true;

// NG: + の方が ? より優先順位が高い
const text = 'ステータス: ' + isVIP ? 'VIP' : '一般';
// => "VIP"（"ステータス: true" がtruthyなので "VIP" が返る）

// OK: 三項演算子を括弧で囲む
const text = 'ステータス: ' + (isVIP ? 'VIP' : '一般');
// => "ステータス: VIP"

// テンプレートリテラルなら括弧不要（${}が式を隔離するため）
const text = `ステータス: ${isVIP ? 'VIP' : '一般'}`;
// => "ステータス: VIP"

注意：三項演算子を + と組み合わせるときは、必ず括弧で囲みましょう。迷ったらテンプレートリテラルを使えば、この問題を自然に回避できます。

この記事のポイント

• 三項演算子は 条件 ? 真の値 : 偽の値 の構文で、値を返す式である
• if-elseは「文」、三項演算子は「式」。式が必要な場所（変数の右辺、引数、テンプレートリテラル、JSX）で活躍する
• 変数代入で三項演算子を使うと let → const にできるケースが多い
• ネストは2段階までに抑え、それ以上は関数やオブジェクトマップで代替する
• &&（条件付き表示）、||（falsyデフォルト）、??（null/undefinedデフォルト）と適切に使い分ける
• 三項演算子は「値を選ぶ」ためのもの。副作用のある処理にはif-elseを使う