JavaScriptの三項演算子（条件演算子）のしくみを徹底解説

JavaScriptには、条件分岐をわずか1行で記述できる便利な演算子があります。それが三項演算子（条件演算子）です。if/else文と同じ処理をより簡潔に書けるため、コード量を大幅に削減できます。

三項演算子とは？

三項演算子は、「?」と「:」を使って条件分岐を表現する演算子です。「3つの項（オペランド）」を持つことから「三項」と呼ばれています。

基本構文

条件式 ? 値1 : 値2;

この構文では、条件式がtrueの場合は値1が返され、falseの場合は値2が返されます。

if/else文との比較

まず、従来のif/else文で書いた例を見てみましょう。

let age = 20;
let message;

if (age >= 18) {
  message = "成人です";
} else {
  message = "未成年です";
}

これを三項演算子を使うと、次のように1行で書けます。

let age = 20;
let message = age >= 18 ? "成人です" : "未成年です";

console.log(message); // "成人です"

このように、単純な条件分岐であれば、三項演算子を使うことでコードが格段に読みやすく、短くなります。

実用的な使用例

1. 変数へのデフォルト値の代入

let userName = inputName ? inputName : "ゲスト";

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

function checkNumber(num) {
  return num % 2 === 0 ? "偶数" : "奇数";
}

console.log(checkNumber(4)); // "偶数"

3. テンプレートリテラル内での表示切り替え

const score = 85;
console.log(`結果：${score >= 60 ? "合格" : "不合格"}`); // "結果：合格"

ネスト（入れ子）した三項演算子

三項演算子は入れ子にすることも可能ですが、可読性が大きく低下するため注意が必要です。

let score = 75;
let grade = score >= 90 ? "A" : score >= 70 ? "B" : "C";

console.log(grade); // "B"

このような複雑な条件分岐は、素直にif/else文やswitch文を使った方が保守しやすくなります。

使う際の注意点

• シンプルな条件分岐に限定する： 条件が複雑になると可読性が落ちるため、1〜2段階程度にとどめましょう。
• 副作用のある処理は避ける： 三項演算子は「値を返す」ことが目的のため、関数呼び出しなどの副作用を伴う処理には不向きです。
• チームのコーディング規約を確認する： プロジェクトによっては三項演算子の使用を制限している場合もあります。

まとめ

三項演算子は、if/else文を1行で簡潔に書ける強力なツールです。特に変数への代入や戻り値の決定など、単純な二択の処理において効果を発揮します。一方で、複雑なロジックに無理に適用するとコードが読みにくくなるため、使いどころを見極めることが大切です。適切に活用して、スマートなJavaScriptコードを書きましょう。