【JavaScript入門】条件（三項）演算子

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

条件（三項）演算子

　JavaScript には、条件によって得られる値を切り替える条件演算子（三項演算子とも呼ばれる）があります。これは「?」と「:」の記号を使い、条件、条件が真のときの値、条件が偽のときの値という3つの要素を1行で書ける便利な演算子です。たとえば、ある数値が 1000 より大きいかどうかで得られる文字列を変えたい場合、条件演算子を使えば if 文を使わずに短く書けます。

１．条件（三項）演算子の基本

構文

条件 ? 真のときの値 : 偽のときの値

条件が true なら、演算子全体の結果は 真のときの値 を返す。
条件が false なら、演算子全体の結果は 偽のときの値 を返す。

　この演算子は「三項演算子」とも呼ばれ、JavaScript における唯一の三項演算子（オペランドを3つ取る演算子）です。

２．サンプルコード (HTML + JavaScript)

　ファイル名を「myConditionalOperator.html」とし、ブラウザで開いて、コンソールの出力を確認してください。

【myConditionalOperator.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myConditionalOperator.html</title>
</head>
<body>
  <h1>条件演算子（三項演算子）のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)で結果を確認してください。</p>

  <script>
    // 1. 数値によって異なるメッセージを返す例
    let price1 = 1250;
    const result1 = (price1 > 1000) ? '特典が2枚追加されます' : '特典が1枚追加されます';
    console.log('price1の場合:', result1);

    let price2 = 450;
    const result2 = (price2 > 1000) ? '特典が2枚追加されます' : '特典が1枚追加されます';
    console.log('price2の場合:', result2);

    // 2. 直接出力にも利用できる
    let score = 85;
    console.log('スコア判定:',
      (score >= 80) ? '合格' : '不合格'
    );

    // 3. ネストして使う場合は注意（可読性が下がりやすい）
    let quantity = 10;
    let nestedResult = (quantity > 10)
      ? '大量割引: 15%OFF'
      : (quantity > 5)
        ? '中程度割引: 5%OFF'
        : '割引なし';
    console.log('ネスト例:', nestedResult);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

price1の場合: 特典が2枚追加されます
price2の場合: 特典が1枚追加されます
スコア判定: 合格
ネスト例: 中程度割引: 5%OFF

まとめ

条件演算子（三項演算子）は ? と : を使って「条件」「真のとき」「偽のとき」を1行で書き、式として評価できる。
if 文の省略形としてよく使われるが、複雑になりすぎると可読性が損なわれるため、状況に応じて使い分けが大切。
スクリプト内でちょっとした条件分岐を一行でまとめたい場合や、HTMLタグ埋め込み時の短い判定などに重宝する。

　条件演算子を使いこなすことで、if 文に比べてコードが簡潔になり、返す値をシンプルに記述できる場面が増えます。適切に活用すると、コーディングがよりスマートになるでしょう。