JavaScriptの三項演算子とは？if文との違いと使い方を初心者向けに解説

JavaScript
2026.03.25

JavaScriptを学んでいて、「たった数行の条件分岐のために、わざわざif文を4行も5行も書くのは面倒だな……」と感じたことはありませんか？

たとえば、「点数が80点以上なら『合格』、それ以外なら『不合格』という文字を変数に入れたい」といったシンプルな処理。これを劇的に短く、たった1行でスマートに記述できるのが 「三項演算子（条件演算子）」 です。

本記事では、三項演算子の基本構文から、if文との決定的な違い、実務での具体的な活用シーン、そして「読みやすさ」を損なわないための注意点まで詳しく解説していきます。

三項演算子の正体：3つの要素を操る「条件分岐の短縮形」

三項演算子とは、その名の通り「3つの項目」を使って処理を行う演算子です。JavaScriptで唯一、3つのオペランド（値）を取る演算子であることから、正式には「条件演算子」と呼ばれます。

記号の構成

三項演算子では、?（クエスチョン）と : （コロン）の2つの記号を組み合わせて使います。

直感的なイメージ

「（条件）？（はいの場合） : （いいえの場合）」というリズムで覚えるのがコツです。

  • 条件：判定したい内容（例：score >= 80）
  • ？：「〜ですか？」という問いかけ
  • 真の結果：条件が true の時に選ばれる値
  • :：「さもなくば」という区切り
  • 偽の結果：条件 false の時に選ばれる値

三項演算子の基本の書き方

それでは、実際のコードを基本の書き方で確認しましょう。

基本の書き方

const 結果 = 条件式 ? 真の場合の値 : 偽の場合の値;

具体的なコード例

「年齢が20歳以上なら『成人』、未満なら『未成年』」という判定を書いてみます。

const age = 22;
const status = age >= 20 ? "成人" : "未成年";

console.log(status); // 結果: "成人"

このコードでは、まず age >= 20 が評価されます。結果 true なので、 ? のすぐに後ろにある “成人” が選ばれ、変数 status に代入されます。

【比較】if文 vs 三項演算子：どっちが優れている？

「if文があるのに、なぜ三項演算子を使うのか？」その最大の理由は、「三項演算子『式』である」という点にあります。

if文（文：Statement）の場合

if文は「命令の集まり」なので、直接変数に代入することができません。

let message;
if (score >= 80) {
  message = "合格";
} else {
  message = "不合格";
}

このように、まず変数を用意（let）してから、中で代入し直す必要があります。合計5行かかります。

三項演算子（式：Expression）の場合

三項演算子自体が「一つの値」として評価されるため、そのまま定数（const）に代入できます。

const message = score >= 80 ? "合格" : "不合格";

わずか1行で済み、変数も const で宣言できるため、意図しない書き換えを防ぐことができ、コードの安全性も高まります。

三項演算子が真価を発揮する3つの活用シーン

三項演算子は、単にコードを短くするだけでなく、特定の場面で非常に強力な威力を発揮します。

テンプレートリテラルの中での分岐

文字列の中に動的に値を埋め込む際、三項演算子なら ${ } の中に直接書けます。

const isLogin = true;
console.log(`ようこそ、${isLogin ? "会員" : "ゲスト"}さん！`);

関数の戻り値（return）

簡単な判定を返したい場合、関数を非常にコンパクトに保てます。

const getFee = isMember => isMember ? 1000 : 2000;

モダンフロントエンド（Reactなど）での表示切り替え

Reactなどの開発では、JSXの中で「条件によってこのHTMLを出す・出さない」を制御する際に、三項演算子が標準的に使われます。

【要注意】三項演算子の「ネスト（入れ子）」は禁物

三項演算子の中に、さらに三項演算子を書くことを「ネスト」と呼びます。

読みづらさの極致

// ❌ 非常に読みづらいコード例
const result = score >= 90 ? "秀" : score >= 80 ? "優" : score >= 70 ? "良" : "可";

これを見てパッと意味を理解できるでしょうか？ コンピューターは正しく処理しますが、人間にとっては「バグの温床」になります。

回避策

三項演算子をネストしたくなったときは、迷わず if 文や switch 文に書き換えてください。プログラミングにおいて「短さ」よりも優先されるべきは「読みやすさ」です。

【関連記事】：複雑な多方向分岐を整理する方法は、「JavaScriptのswitch文とは？if文との違いと使い方を初心者向けに解説」で詳しく解説しています。

三項演算子と「null合体演算子（??）」の使い分け

JavaScriptには、三項演算子に似た便利な演算子として ??（null合体演算子）があります。

未定義データを扱う場合

「もしデータが空（nullやundefined）なら、デフォルト値を使う」という処理の場合、三項演算子よりも ?? のほうが簡潔です。

  • 三項演算子：const name = input !== null ? input : “名無し”;
  • null合体演算子：const name = input ?? “名無し”;

このように、三項演算子は「条件で値を切り替える」時に使い、値の存在チェックには専用の演算子を使うのが「デキる開発者」の使い分けです。

実装のベストプラクティス：読みやすいコードの書き方

三項演算子を使う際、少しの工夫で可読性を上げることができます。

複雑な条件には「丸カッコ」を付ける

条件式が少し長い場合は、カッコで囲むと境界が明確になります。

const canDrive = (age >= 18 && hasLicense) ? "運転可" : "運転不可";

無理に使わない

「1行に収まるほどシンプルか？」を自問自答しましょう。

  • 行が長くなりすぎて横スクロールが必要になる。
  • 論理が複雑で、一瞬「えーっと……」と考えてしまう。
    これらに当てはまるなら、素直に if 文を使いましょう。

実践演習：ECサイトの配送料計算ロジック

これまでの知識を組み合わせて、実務でありそうな「購入金額に応じた配送料の計算」を書いてみましょう。

/**
 * 配送料を計算するプログラム
 * 購入金額が5000円以上なら送料無料（0円）、未満なら500円
 */

const purchaseAmount = 4800; // 購入金額

// 三項演算子でスマートに判定
const shippingFee = purchaseAmount >= 5000 ? 0 : 500;

console.log(`購入金額: ${purchaseAmount}円`);
console.log(`配送料: ${shippingFee}円`);
console.log(`合計支払額: ${purchaseAmount + shippingFee}円`);

まとめ：三項演算子で「洗練されたコード」を書こう

今回は、条件分岐を劇的にスッキリさせる 「三項演算子」 について詳しく解説しました。

  • 三項演算子は「条件 ? 真 : 偽」の形で値を返す演算子。
  • 式であるため、そのまま const 変数に代入できるのが最大の強み。
  • テンプレートリテラルやアロー関数との相性が抜群。
  • ネスト（入れ子）は避け、読みやすさを第一に考える。
  • シンプルな分岐は三項演算子、複雑なロジックはif文という使い分けを徹底する。

三項演算子を適切に使えるようになると、あなたのコードはよりモダンで、無駄のない洗練されたものに変わります。まずは「if〜else」で2択の代入をしている箇所を探して、三項演算子への書き換えに挑戦してみてください！

タイトルとURLをコピーしました