TypeScriptの三項演算子：効率的な書き方と型安全性を高める活用テクニック

2026年5月11日

演算子

TypeScriptを用いた開発において、条件分岐はプログラムの根幹を成す重要な要素です。

多くの開発者が慣れ親しんでいる三項演算子は、簡潔なコードを記述するための強力なツールですが、その真価は単なる短縮記法に留まりません。

2026年のモダンな開発シーンでは、静的型付けのメリットを最大限に活かしつつ、宣言的なコーディングを実現するために三項演算子が多用されています。

本記事では、TypeScriptにおける三項演算子の効率的な書き方や、型安全性を高めるための具体的な活用テクニックについて詳しく解説します。

目次 [ close ]

三項演算子の基本構文とTypeScriptにおける役割

三項演算子は、条件式、真の場合の式、偽の場合の式の3つの要素から構成される演算子です。

条件式 ? 真の時の値 : 偽の時の値 というシンプルな形式で記述されます。

TypeScriptにおいて三項演算子が重要視される最大の理由は、それが「文(Statement)」ではなく「式(Expression)」であるという点にあります。

式として評価されることのメリット

if文などの「文」は値を返しませんが、三項演算子のような「式」は評価された結果として値を返します。

これにより、変数の初期化時に直接条件分岐を組み込むことが可能になり、イミュータブル（不変）な変数宣言であるconstを積極的に活用できるようになります。

まずは、基本的な数値判定の例を見てみましょう。

TypeScript

// if文を使用した場合（再代入が必要なためletを使用）
let message: string;
const score = 85;

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

// 三項演算子を使用した場合（constで完結）
const resultMessage = score >= 80 ? "合格" : "不合格";

実行結果

"合格"

このように、三項演算子を使うことでコードの行数を削減できるだけでなく、変数のスコープを限定し、意図しない再代入を防ぐことができます。

TypeScript特有の型推論

TypeScriptのコンパイラは、三項演算子の両端の型の共通項を自動的に推論します。

例えば、真のケースで文字列を返し、偽のケースで数値を返す場合、その変数の型は自動的に string | number のユニオン型になります。

プログラマが明示的に型を定義しなくても、コンパイラが文脈を理解してくれるため、開発効率が向上します。

型安全性を高める型絞り込み（Type Narrowing）

TypeScriptの強力な機能の一つに、条件分岐による「型絞り込み」があります。

三項演算子はこの型絞り込みと非常に相性が良く、特定のブロック内での型を保証するために頻繁に利用されます。

typeof演算子との組み合わせ

関数の引数が複数の型を受け取る可能性がある場合、三項演算子の中で typeof を使用することで安全に処理を分けることができます。

TypeScript

const formatValue = (value: string | number): string => {
  // valueがnumber型ならtoFixedを実行、そうでなければそのまま返す
  return typeof value === "number" ? value.toFixed(2) : value.trim();
};

console.log(formatValue(123.456));
console.log(formatValue("  Hello TypeScript  "));

実行結果

"123.46"
"Hello TypeScript"

上記のコードでは、三項演算子の条件式で typeof value === "number" を判定しているため、真の節では value が確実に数値として扱われ、toFixed メソッドを安全に呼び出せます。

Discriminated Unions（判別可能なユニオン型）の活用

複雑なオブジェクトの型を扱う際、特定のプロパティ（リテラル型）を基準に三項演算子で処理を分岐させる手法も有効です。

TypeScript

interface Success {
  type: "success";
  data: string;
}

interface Failure {
  type: "failure";
  error: Error;
}

type ApiResponse = Success | Failure;

const getResponseMessage = (response: ApiResponse): string => {
  return response.type === "success" 
    ? `データ取得成功: ${response.data}` 
    : `エラー発生: ${response.error.message}`;
};

このように、type プロパティを見て条件を分岐させることで、TypeScriptは真のケースでSuccess型、偽のケースでFailure型であることを確信して処理を継続します。

実践的な活用シーンとテクニック

三項演算子は単純な値の代入以外にも、現代のフロントエンド開発において欠かせない場面が多く存在します。

React/Next.jsでの条件レンダリング

TypeScriptを用いたReact開発において、三項演算子はJSX内での条件分岐の標準的な手法です。

JSXの波括弧 {} の中には式しか記述できないため、if文を直接書くことはできません。

TypeScript

// Reactコンポーネント内での例
const UserProfile = ({ isLoggedIn, userName }: { isLoggedIn: boolean; userName: string }) => {
  return (
    <div>
      {isLoggedIn ? (
        <h1>ようこそ、{userName}さん</h1>
      ) : (
        <button>ログインしてください</button>
      )}
    </div>
  );
};

三項演算子を用いることで、UIの表示状態を宣言的に記述でき、コンポーネントの構造が視覚的に把握しやすくなります。

テンプレートリテラル型との組み合わせ

TypeScriptの高度な機能であるテンプレートリテラル型においても、三項演算子のような条件ロジックが型の定義レベルで活用されることがあります。

これは Conditional Types と呼ばれる機能で、型の世界における三項演算子と言えます。

TypeScript

type IsString<T> = T extends string ? "Yes" : "No";

type Test1 = IsString<string>; // "Yes"型
type Test2 = IsString<number>; // "No"型

この記述により、ジェネリクスに渡された型に応じて動的に型を切り替えるといった高度な抽象化が可能になります。

可読性を維持するためのベストプラクティス

三項演算子は便利である反面、使い道を誤るとコードの可読性を著しく低下させる危険性もあります。

チーム開発でメンテナンス性の高いコードを維持するために、以下のルールを意識することが推奨されます。

ネスト（入れ子）の原則禁止

三項演算子の中にさらに三項演算子を記述する「ネスト」は、論理構造の把握を困難にします。

三つの条件分岐が必要な場合は、三項演算子を重ねるのではなく、素直に if-else if 文を使うか、早期リターンを検討すべきです。

TypeScript

// 避けるべき例：ネストされた三項演算子
const status = isError ? "error" : isLoading ? "loading" : "success";

// 推奨される例：関数として切り出し早期リターン
const getStatus = () => {
  if (isError) return "error";
  if (isLoading) return "loading";
  return "success";
};

複雑な条件分岐を一つの式に詰め込むと、デバッグの難易度が上がり、実行時の挙動予測がしにくくなるため注意が必要です。

適切な改行とフォーマット

1行が長くなりすぎる場合は、Prettierなどのコードフォーマッタの設定に従い、適切に改行を入れることで読みやすさが向上します。

TypeScript

const label = longConditionPropertyName && anotherCondition
  ? "条件を満たした時の非常に長いラベルテキスト"
  : "それ以外の時のデフォルトテキスト";

条件、真の節、偽の節をそれぞれ別の行に配置することで、どこからどこまでが一つのまとまりなのかを明確に示すことができます。

他の演算子との適切な使い分け

TypeScriptには三項演算子以外にも、条件に応じて値を制御する便利な演算子が備わっています。

三項演算子ですべてを解決しようとせず、場面に応じてこれらを使い分けるのがプロのテクニックです。

Null合体演算子 (??) との比較

変数が null または undefined の場合にのみデフォルト値を与えたい場合は、三項演算子よりも Null合体演算子 (??) の方が適しています。

演算子	用途	例
三項演算子 (?:)	任意の条件による分岐	`isValid ? "OK" : "NG"`
Null合体演算子 (??)	Null/Undefinedの補完	`input ?? "Default"`
論理OR演算子 (\|\|)	Falsyな値すべての補完	`count \|\| 10`

三項演算子で value !== null && value !== undefined ? value : "Default" と書くよりも、value ?? "Default" と書く方が意図が明確になり、型推論もスムーズに行われます。

オプショナルチェイニング (?.) との組み合わせ

オブジェクトの深い階層にあるプロパティを参照しつつ、その値に基づいて分岐したい場合は、オプショナルチェイニングと三項演算子を組み合わせて使用します。

TypeScript

interface User {
  settings?: {
    theme?: string;
  };
}

const user: User = {};
const currentTheme = user.settings?.theme ? user.settings.theme : "light";

このように記述することで、user.settings が存在しない場合でもランタイムエラーを防ぎつつ、安全に初期値を設定できます。