JavaScriptの三項演算子で複数条件をスッキリ書く方法｜入れ子と論理演算子の使い分け

JavaScriptの開発において、コードを簡潔に保つことはメンテナンス性を高めるために非常に重要です。

プログラミングの中でも頻繁に使用される条件分岐を、よりスマートに記述するための手法として三項演算子が挙げられます。

特に複数の条件が絡み合う場合、単純なif文ではコード量が増えてしまい、可読性が低下することがあります。

最新のJavaScript開発では、可読性と簡潔さのバランスを取りながら三項演算子を活用するスキルが求められています。

この記事では、JavaScriptの三項演算子を使って複数条件を効率的に処理する方法について、具体的なパターンとともに詳しく説明します。

三項演算子の基本構造とそのメリット

三項演算子は、その名の通り3つの項（オペランド）を使用する演算子です。

基本的な構文は条件式 ? 真の場合の処理 : 偽の場合の処理という形を取ります。

// 基本的な三項演算子の例
const age = 20;
const status = age >= 20 ? "大人" : "子供";

console.log(status);

大人

三項演算子を使用する最大のメリットは、変数の代入と条件分岐を一行で完結させることができる点にあります。

if文を使用すると複数行に渡ってしまう処理を、直感的に記述することが可能です。

しかし、無闇に多用すると逆にコードが読みづらくなるリスクも孕んでいます。

そのため、どのような場面で三項演算子を選択すべきかを理解しておく必要があります。

論理演算子を組み合わせた複数条件の判定

複数の条件を判定したい場合、まずは論理演算子（&&や||）を三項演算子の条件部分に組み込む方法を検討しましょう。

これは、すべての条件が揃った場合や、いずれかの条件に合致する場合にのみ処理を分けたい時に有効です。

AND演算子（&&）を利用する場合

すべての条件がtrueである必要がある場合は、&&を使用します。

const hasTicket = true;
const isVip = true;

// チケットを持っており、かつVIP会員であるかを確認
const accessMessage = (hasTicket && isVip) ? "VIPラウンジへどうぞ" : "一般エリアへどうぞ";

console.log(accessMessage);

VIPラウンジへどうぞ

この書き方は、複雑なフラグ管理が必要なビジネスロジックを簡潔に表現するのに適しています。

条件が2つ程度であれば、この方法が最も読みやすい選択肢となります。

OR演算子（||）を利用する場合

いずれかの条件がtrueであれば良い場合は、||を使用します。

const isWeekend = false;
const isHoliday = true;

// 土日、もしくはお休みの日であれば「休日」と判定
const dayType = (isWeekend || isHoliday) ? "今日は休みです" : "今日は仕事です";

console.log(dayType);

今日は休みです

このように論理演算子を条件式の中で使うことで、三項演算子の「1つの式で結果を返す」という性質を活かしたまま、複雑な判定が可能になります。

三項演算子の入れ子（ネスト）による複数条件の処理

さらに複雑な「if – else if – else」のような多層的な条件分岐が必要な場合、三項演算子を入れ子（ネスト）にして記述することができます。

ネストされた三項演算子の構文

三項演算子の「偽の場合の処理」の部分に、さらに新しい三項演算子を記述するパターンが一般的です。

const score = 85;

const result = score >= 90 ? "優秀" 
             : score >= 70 ? "良好" 
             : score >= 50 ? "普通" 
             : "要努力";

console.log(result);

良好

この書き方は、一見複雑に見えますが、適切に改行を行うことで非常に見通しの良いコードになります。

特に、ReactのJSX内など、文（Statement）が書けず式（Expression）しか書けない場所では非常に重宝されるテクニックです。

可読性を保つためのルール

三項演算子をネストさせる際には、いくつかの注意点があります。

まず、3階層以上のネストは避けるべきだと言われています。

条件があまりにも多くなる場合は、通常のif文やswitch文、あるいはオブジェクトマッピングなどの手法を検討すべきです。

また、上記のようにコロン（:）の位置を揃えるように改行すると、どの条件がどの結果に対応しているかが明確になります。

三項演算子と他の手法の比較

三項演算子で複数条件を書く方法以外にも、JavaScriptには効率的な条件分岐の書き方が存在します。

状況に応じてこれらを使い分けることが、プロフェッショナルなコードへの第一歩です。

if文（早期リターン）との比較

関数の内部であれば、三項演算子よりも「早期リターン（Early Return）」を用いたif文の方が読みやすい場合があります。

function getGrade(score) {
  if (score >= 90) return "優秀";
  if (score >= 70) return "良好";
  if (score >= 50) return "普通";
  return "要努力";
}

const result = getGrade(85);
console.log(result);

この場合、条件が上から順に評価され、該当した時点で処理が終了するため、論理構造が非常にシンプルです。

変数の代入が目的であれば三項演算子、ロジックの制御が目的であればif文という使い分けが推奨されます。

オブジェクトやMapを活用した定数選択

条件が特定の値に基づいている場合は、三項演算子を使わずにオブジェクトを利用する方法も非常にスッキリします。

const userRole = "admin";

const rolePermissions = {
  admin: "全権限あり",
  editor: "編集権限あり",
  viewer: "閲覧権限のみ"
};

const permission = rolePermissions[userRole] || "権限なし";

console.log(permission);

全権限あり

この手法は、条件が増えてもオブジェクトにプロパティを追加するだけで済むため、拡張性に優れています。

2026年におけるモダンな条件分岐のトレンド

近年のJavaScriptでは、三項演算子に加えて「オプショナルチェーン（?.）」や「ヌル合体演算子（??）」を組み合わせるスタイルが標準化しています。

これにより、値が存在しない場合のデフォルト値設定と、条件による値の切り替えをより安全に行えるようになりました。

const userData = {
  profile: {
    point: 150
  }
};

// ポイントが存在すればランクを判定、存在しなければ "未登録"
const rank = userData.profile?.point 
           ? (userData.profile.point > 100 ? "ゴールド" : "シルバー")
           : "未登録";

console.log(rank);

ゴールド

このように、最新の演算子と三項演算子を組み合わせることで、より堅牢なコードを記述することが可能です。

ただし、演算子が重なりすぎると解読に時間がかかるため、チーム内でのコードレビューやコーディング規約の整備が欠かせません。

よくある間違いとデバッグのヒント

三項演算子を使用する際、初心者が陥りやすいミスがいくつかあります。

最も多いのは、三項演算子の中で複雑な副作用（関数実行や変数の更新）を行ってしまうことです。

三項演算子はあくまで「値を返すための式」として扱うのがベストプラクティスです。

// 良くない例：式の中で副作用のある処理を行う
isLoggedIn ? updateLastLogin() : redirectToLogin();

上記のようなケースでは、素直にif-else文を使用するか、論理積（&&）を利用したショートハンドを用いるべきです。

また、括弧（ ）を適切に使用して、演算の優先順位を明確にすることもデバッグを防ぐコツです。

まとめ

JavaScriptの三項演算子は、複数条件を簡潔に記述するための強力なツールです。

論理演算子と組み合わせることでシンプルな判定ができ、ネストを利用することで多層的な分岐にも対応できます。

しかし、その簡潔さゆえに可読性を損なう可能性もあるため、常に「他の開発者が読んでもすぐに理解できるか」を意識することが重要です。

三項演算子を使いこなすためのポイントを以下にまとめました。

2026年のJavaScript開発においても、三項演算子は必須の知識であり続けます。

適切な場面で正しく使い分け、スッキリとした美しいコードを目指しましょう。