閉じる

JavaScriptの三項演算子とは？基本の書き方から可読性を高める使い分けまで

広告

JavaScriptを記述する際、条件に応じて処理を分岐させる方法はいくつか存在します。

その中でも、短く簡潔に記述できる手法として「三項演算子」が広く利用されています。

三項演算子を適切に使いこなすことで、ソースコードの行数を減らし、見通しの良いプログラムを記述することが可能になります。

しかし、多用しすぎるとかえって可読性を損なう原因にもなるため、正しい使い方を理解しておくことが重要です。

本記事では、JavaScriptにおける三項演算子の基本構文から、実務で役立つ応用パターン、さらには避けるべきアンチパターンまで詳しく解説します。

2026年現在のモダンな開発現場で求められる、クリーンなコードを書くための知識を深めていきましょう。

目次 [ close ]
  1. 三項演算子の基本構文と仕組み
    1. 基本の書き方
    2. 実際の動作例
  2. 三項演算子とif文の使い分け
    1. 三項演算子が適しているケース
    2. if文を使うべきケース
  3. 実務で役立つ具体的な活用シーン
    1. テンプレートリテラル内での動的表示
    2. 関数の戻り値として利用する
    3. ReactなどのUIライブラリでのコンポーネント制御
  4. 注意すべきアンチパターンと可読性の問題
    1. 三項演算子のネスト（入れ子）は避ける
    2. 式が長くなりすぎる場合
  5. 2026年におけるモダンな関連テクニック
    1. Null合体演算子 (??) との使い分け
    2. 論理積演算子 (&&) による短絡評価
  6. 三項演算子を使いこなすためのベストプラクティス
  7. まとめ

三項演算子の基本構文と仕組み

三項演算子は、3つの項を使用するJavaScriptで唯一の演算子です。

一般的には条件演算子とも呼ばれ、if文による条件分岐を1行で表現するために用いられます。

基本の書き方

三項演算子の基本的な書き方は以下の通りです。

JavaScript
// 基本構文
条件式 ? 真（true）の場合の処理 : 偽（false）の場合の処理;

まず、ハテナマーク「?」の左側に評価したい条件式を記述します。

その条件がtrueと判定された場合は、コロン「:」の左側の式が実行されます。

逆に条件がfalseと判定された場合は、コロン「:」の右側の式が実行される仕組みです。

実際の動作例

具体的な数値比較を用いたコード例を見てみましょう。

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

console.log(status);
実行結果
"成人"

この例では、変数ageが18以上であれば「成人」、そうでなければ「未成年」という文字列が変数statusに代入されます。

if文を使用する場合に比べて、記述が非常にシンプルになる点が大きなメリットです。

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

三項演算子はif文の代わりとして使えますが、すべてのif文を置き換えるべきではありません。

どのようなシーンで三項演算子が適しているのか、その基準を明確にしましょう。

三項演算子が適しているケース

三項演算子が最も威力を発揮するのは、「条件によって値を変数に代入したいとき」です。

if文を使って変数代入を行う場合、以下のように複数の行が必要になります。

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

一方で、三項演算子を使えば、変数の宣言と代入を同時に行うことができます。

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

三項演算子を使うことで、変数をconstで宣言できる（再代入を防げる）という点は、プログラムの安全性を高める上で非常に重要です。

if文を使うべきケース

一方で、条件分岐の中で複雑な処理を行ったり、複数の命令を実行したりする場合は、if文を使用すべきです。

三項演算子の「真の場合」や「偽の場合」の箇所に、何行にもわたる処理を詰め込むことは避けてください。

また、戻り値を必要としない「副作用（コンソール出力やAPI通信など）」のみを目的とする分岐も、if文の方が意図を伝えやすくなります。

特徴三項演算子if-else 文
主な目的値の返却・代入処理の制御（ロジックの実行）
記述量非常に少ない（1行）多い（複数行）
定数(const)代入可能不可能（letが必要）
可読性シンプルなら高い複雑な条件でも維持しやすい

実務で役立つ具体的な活用シーン

モダンなJavaScript開発において、三項演算子が特によく使われる場面を紹介します。

テンプレートリテラル内での動的表示

文字列の中に変数を埋め込むテンプレートリテラル（バッククォート）の中では、三項演算子が多用されます。

JavaScript
const score = 85;
console.log(`試験の結果は ${score >= 80 ? "合格" : "不合格"} です。`);
実行結果
"試験の結果は 合格 です。"

このように、文章の一部を条件によって切り替えたい場合に非常に便利です。

関数の戻り値として利用する

関数内で条件に応じた値を返す際にも、三項演算子を使うとスッキリと記述できます。

JavaScript
const getPriority = (isUrgent) => isUrgent ? "高" : "通常";

console.log(getPriority(true));
実行結果
"高"

ReactなどのUIライブラリでのコンポーネント制御

ReactやVue.jsなどのモダンなフロントエンド開発では、JSX（HTMLのような構文）の中でJavaScriptの式を記述します。

JSXの中ではif文が使えない制約があるため、条件に応じて表示を切り替えるには三項演算子が必須となります。

JavaScript
// Reactのコンポーネント内での例
return (
  <div>
    {isLoading ? <Spinner /> : <ContentList />}
  </div>
);

読み込み中であればスピナーを表示し、完了していればコンテンツリストを表示するという処理を宣言的に記述できます。

注意すべきアンチパターンと可読性の問題

三項演算子は便利な反面、使い方を誤ると「読みにくいコード」の筆頭となります。

開発チーム内でのトラブルを避けるために、以下の注意点を守りましょう。

三項演算子のネスト（入れ子）は避ける

最も避けるべきなのは、三項演算子の中にさらに三項演算子を記述する「ネスト」です。

JavaScript
// 非常に読みにくい例
const userRole = isAdmin ? "管理者" : isEditor ? "編集者" : "一般ユーザー";

このような記述は、一目でどの条件がどこに対応しているのか判断するのが難しくなります。

複数の条件分岐が必要な場合は、素直にif-else if文を使うか、switch文、あるいは早期リターンを用いた関数に切り出すべきです。

式が長くなりすぎる場合

条件式が複雑で長くなってしまう場合も、三項演算子の使用は控えたほうが賢明です。

JavaScript
// 読みにくい例
const discount = (isMember && hasCoupon && !isExpired) || isAdmin ? 0.2 : 0;

このような場合は、まず条件式を変数に切り出すことで、三項演算子の可読性を保つことができます。

JavaScript
// 改善例
const canApplyDiscount = (isMember && hasCoupon && !isExpired) || isAdmin;
const discount = canApplyDiscount ? 0.2 : 0;

「1行で書きたい」という欲求よりも、「他人が読んで理解できるか」という視点を優先してください。

2026年におけるモダンな関連テクニック

三項演算子とセットで覚えておくべき、より適切な演算子が最新のJavaScript仕様には存在します。

Null合体演算子 (??) との使い分け

「値が null または undefined のときだけデフォルト値を設定したい」という目的であれば、三項演算子よりもNull合体演算子（??）の方が適しています。

JavaScript
// 三項演算子の場合
const displayName = userName !== null && userName !== undefined ? userName : "名無しさん";

// Null合体演算子（??）の場合
const displayName = userName ?? "名無しさん";

??を使うことで、意図を明確にしつつ、記述を大幅に短縮できます。

論理積演算子 (&&) による短絡評価

「条件が一致したときだけ何かを表示し、そうでないときは何もしない（nullを返す）」というケースでは、&& 演算子がよく使われます。

JavaScript
// 三項演算子で書く場合（無駄にnullを書く必要がある）
{isMessageVisible ? <Message /> : null}

// 論理積演算子を使う場合
{isMessageVisible && <Message />}

「偽の場合の処理」が特に存在しないのであれば、三項演算子を無理に使う必要はありません。

三項演算子を使いこなすためのベストプラクティス

最後に、現場で推奨される三項演算子の運用ルールをまとめます。

1. 代入を主目的にする

「この条件ならこの値」という、マッピングのような役割で使うのが最も美しい形です。

2. 括弧を活用して視認性を上げる

複雑な条件の場合は、条件式を ( ) で囲むことで、どこまでが条件なのかが明確になります。

JavaScript
const price = (category === "premium") ? 1000 : 500;

3. 無理に1行にまとめない

フォーマッタ（Prettierなど）の設定によっては、三項演算子が複数行に分割されることがあります。

JavaScript
const result = longConditionExpression
  ? "条件を満たした時の長いテキスト"
  : "条件を満たさない時の長いテキスト";

このように縦に並べることで、if-else文に近い読みやすさを確保しつつ、定数代入のメリットを享受できます。

まとめ

JavaScriptの三項演算子は、適切に使用すればコードを劇的にシンプルにし、開発効率を高めてくれる強力なツールです。

特に「条件に基づいた定数代入」においては、if文よりも優れた選択肢となります。

一方で、ネストを繰り返したり、複雑なロジックを無理やり詰め込んだりすると、メンテナンス性の低い「読みづらいコード」を生んでしまいます。

「シンプルに書けるか」と「誰が見ても意味がわかるか」のバランスを常に意識することが、プロのエンジニアへの第一歩です。

2026年のモダンな開発環境では、今回紹介したNull合体演算子などの新しい構文も組み合わせながら、より洗練されたコードを目指していきましょう。

まずは日々のコーディングの中で、単純な変数代入のif文を三項演算子に書き換えるところから始めてみてください。

URLをコピーしました！