JavaScript三項演算子のスマートな活用術：可読性を保つ書き方とif文との使い分け

JavaScriptにおけるプログラミングにおいて、条件分岐は避けて通れない要素です。

古くから使われているif文に加え、コードをより簡潔に記述できるツールとして「三項演算子（条件演算子）」は欠かせない存在となっています。

しかし、その便利さゆえに多用しすぎたり、複雑な条件を無理に詰め込んだりすることで、かえってコードの可読性を損ねてしまうケースも少なくありません。

2026年現在のモダンなフロントエンド開発やサーバーサイド開発において、三項演算子は単なる「if文の短縮形」以上の役割を担っています。

特に宣言的なコードが好まれる現在の開発スタイルでは、三項演算子を正しく使いこなすことが、保守性の高いコードを書くための重要なステップとなります。

本記事では、三項演算子の基本から、可読性を保つためのスマートな活用テクニック、そしてif文との明確な使い分け基準について詳しく解説します。

三項演算子の基本構造と動作原理

三項演算子は、JavaScriptの中で唯一「3つのオペランド（項）」を取る演算子です。

その構造は非常にシンプルで、以下の形式で記述されます。

// 基本構造
条件式 ? 真の場合の式 : 偽の場合の式;

この演算子は、まず左端の条件式を評価し、その結果が真（truthy）であれば「?」の直後の式を実行し、偽（falsy）であれば「:」の後の式を実行します。

基本的な使用例

例えば、ユーザーの年齢に応じて成人か未成年かを判定する処理を考えてみましょう。

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

console.log(category);

成人

この例では、age >= 20という条件が評価され、結果がtrueであるため、変数categoryには「成人」という文字列が代入されます。

同じ処理をif...else文で書くと数行にわたりますが、三項演算子を使えば1行で簡潔に表現できることがわかります。

「文」と「式」の違い：三項演算子が重宝される理由

なぜ三項演算子がこれほどまでに多用されるのでしょうか。

その最大の理由は、三項演算子が「式（Expression）」であるという点にあります。

文（Statement）としてのif文

if文は「文」であり、値を返しません。

そのため、変数に結果を代入したい場合は、あらかじめletなどで変数を定義しておく必要があります。

let message;
if (isLoggedIn) {
  message = "ようこそ！";
} else {
  message = "ログインしてください";
}

式（Expression）としての三項演算子

一方で、三項演算子は「式」であるため、それ自体が値を持ちます。

つまり、右辺に直接記述して変数に代入したり、関数の引数としてそのまま渡したりすることが可能です。

const message = isLoggedIn ? "ようこそ！" : "ログインしてください";

この「値を返す」という性質は、定数（const）を利用できるという大きなメリットを生みます。

再代入を許さないconstを積極的に使用することは、意図しない値の書き換えを防ぎ、バグの混入を抑制する現代のJavaScriptプログラミングにおけるベストプラクティスです。

実践的な活用シーン

三項演算子が特に威力を発揮する具体的なシーンをいくつか挙げてみましょう。

1. JSX（Reactなど）における条件付きレンダリング

ReactやVue.jsなどのモダンなライブラリを使用したUI開発では、テンプレートの中で条件分岐を行う必要があります。

特にReactのJSX内では文（if文）が直接書けないため、三項演算子が頻繁に使用されます。

function WelcomeMessage({ user }) {
  return (
    <div>
      {user ? (
        <h1>こんにちは、{user.name}さん</h1>
      ) : (
        <h1>ゲストさん、ようこそ</h1>
      )}
    </div>
  );
}

このように、UIの表示状態を切り替える際には、三項演算子の「式である」という特徴が不可欠となります。

2. テンプレートリテラル内での動的なクラス付与

HTML要素のクラス名を動的に変更したい場合、テンプレートリテラルと三項演算子を組み合わせる手法がスマートです。

const isActive = true;
const buttonClass = `btn ${isActive ? "btn-active" : "btn-disabled"}`;

console.log(buttonClass);

btn btn-active

if文を使って文字列を連結するよりも、コードの意図が明確になり、記述量も大幅に削減できます。

3. 関数の戻り値としての利用

簡単な判定結果を返す関数では、三項演算子を使うことで関数の見通しが良くなります。

const getFee = (isMember) => (isMember ? 1000 : 1500);

console.log(getFee(true));  // 1000
console.log(getFee(false)); // 1500

可読性を保つためのスマートな書き方

三項演算子は強力ですが、使い方を誤ると「読みにくいコード」の筆頭候補になってしまいます。

可読性を維持するためのテクニックを紹介します。

1. 1行が長くなる場合は改行を活用する

三項演算子を1行に詰め込みすぎると、どこまでが条件で、どこからが結果なのかが判別しづらくなります。

そのような場合は、適切に改行とインデントを挿入しましょう。

// 読みにくい例
const status = isSuccess && !isLoading ? "完了" : isError ? "エラー" : "待機中";

// 読みやすい例
const status = (isSuccess && !isLoading)
  ? "完了"
  : isError
    ? "エラー"
    : "待機中";

特にPrettierなどのフォーマッタを導入している環境では自動で整形されることが多いですが、人間が読みやすい構造を意識することが大切です。

2. 条件部分を括弧で囲む

条件式が少し複雑になる場合、全体を括弧()で囲むことで、三項演算子の開始位置を明示できます。

const discount = (originalPrice > 10000 && isCampaign) ? 0.2 : 0.1;

これにより、コードをスキャンする際、どこからが判定条件なのかを瞬時に理解できるようになります。

3. 三項演算子の「ネスト（入れ子）」は原則避ける

三項演算子の中にさらに三項演算子を入れる「ネスト」は、可能な限り避けるべきです。

// アンチパターン：ネストした三項演算子
const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";

このようなコードは、パッと見ただけではロジックを把握できません。

条件が3つ以上に分岐する場合は、後述するif文やswitch文、あるいは早期リターン（Early Return）への書き換えを検討してください。

if文と三項演算子の使い分け基準

プログラミングにおいて重要なのは「どちらが正しいか」ではなく、「どちらがその場の状況において適切か」を判断することです。

以下の基準を参考にしてください。

三項演算子を使うべき場面

• 変数の初期化に値を割り当てる場合：constを使用したいとき。
• シンプルな2分岐の場合：ロジックが単純で、1行から数行で収まるとき。
• UIライブラリのテンプレート内：ReactのJSXなどのように、式が必要な場所。

if文を使うべき場面

• 副作用（Side Effects）を伴う処理を行う場合：値を返すことではなく、関数の実行やログ出力、データの保存などが目的のとき。
• 条件分岐が複雑な場合：else ifが複数続くとき。
• 1行が非常に長くなってしまう場合：三項演算子で書くと視認性が著しく低下するとき。

例えば、以下のように「条件に応じて関数を呼び出すだけ」の処理は、三項演算子よりもif文の方が適しています。

// 不適切な三項演算子の使い方（副作用目的）
isUserActive ? sendEmail() : logStatus();

// 適切なif文の使い方
if (isUserActive) {
  sendEmail();
} else {
  logStatus();
}

三項演算子で関数を呼び出すと、戻り値を利用していないことが不自然に見え、コードの意図が「代入」なのか「実行」なのかを混乱させる原因になります。

モダンJavaScriptにおける代替手段との比較

2026年現在、三項演算子以外にも条件に応じて値を制御する優れた演算子が存在します。

これらを使い分けることで、三項演算子の出番をより適切な箇所に限定できます。

1. Null合体演算子 (??)

値が null または undefined の場合にデフォルト値を設定したいなら、三項演算子よりも ?? が適しています。

// 三項演算子の場合
const displayName = user.name !== null && user.name !== undefined ? user.name : "ゲスト";

// Null合体演算子の場合
const displayName = user.name ?? "ゲスト";

2. 論理論理積 (&&) による短絡評価

「もし真なら表示する、偽なら何もしない」というパターンでは、三項演算子の偽の部分を null にするよりも、 && を使う方が一般的です。

// 三項演算子
{
  showNotification ? <Notification /> : null;
}

// 論理積演算子
{
  showNotification && <Notification />;
}

3. オプショナルチェイニング (?.)

オブジェクトのプロパティが存在するかどうかをチェックして値を返す場合、三項演算子を重ねるのではなく、オプショナルチェイニングを使用しましょう。

// 三項演算子で頑張る場合
const city = user ? (user.address ? user.address.city : undefined) : undefined;

// オプショナルチェイニング
const city = user?.address?.city;

これらの演算子を適材適所で組み合わせることで、三項演算子の「ネスト問題」の多くを解決することができます。

メンテナンス性の高いコードを目指して

三項演算子の真の価値は、「コードを短くすること」ではなく「データの流れを明確にすること」にあります。

早期リターンとの組み合わせ

複雑な条件分岐を持つ関数内では、三項演算子を無理に使わず、早期リターンを活用して「特別なケース」を先に排除するスタイルが推奨されます。

function getDiscountRate(user) {
  // 特例を先に処理
  if (!user.isPremium) {
    return 0;
  }

  // 残りのシンプルな条件には三項演算子を活用
  return user.years > 5 ? 0.2 : 0.1;
}

このように、関数の外枠で大きな分岐を処理し、末端の細かな値の決定に三項演算子を用いるのが、最もバランスの良い書き方です。

チーム開発におけるコーディング規約

個人で開発している場合は自分の好みで構いませんが、チーム開発においては「三項演算子のネスト禁止」や「〇文字以上になる場合はif文推奨」といったルールを設けることが一般的です。

ESLintなどの静的解析ツールを設定し、「no-nested-ternary」ルールを有効にすることで、機械的に可読性の低いコードを排除することも可能です。

まとめ

JavaScriptの三項演算子は、非常に強力で便利なツールです。

式として評価されるその性質は、不変性（Immutability）を重視する現代のプログラミングスタイルと非常に相性が良く、適切に使用すればコードの簡潔さと明快さを向上させます。

しかし、その一方で「何でも三項演算子で書こうとする」のは避けるべきです。

以下のポイントを常に意識してください。

• 変数の代入やJSX内での条件分岐には三項演算子を活用する。
• ネストは避け、複雑な条件にはif文や早期リターンを用いる。
• 副作用（処理の実行）が目的の場合はif文を使用する。
• Null合体演算子やオプショナルチェイニングなど、他の演算子と使い分ける。

「短く書ける」ことよりも「後から誰が見ても一瞬で理解できる」ことを優先することが、プロフェッショナルなコードへの第一歩です。

三項演算子をスマートに使いこなし、クリーンでメンテナンス性の高いJavaScriptコードを書き上げましょう。