三項演算子って何？if文との違いや使い分け方について解説します！【JavaScript】

2024年10月27日 2024年10月27日

講師:中島

プログラミング初心者にとっては「三項演算子」という用語は聞き慣れないかもしれません。
この記事は「三項演算子とif文の動作がイマイチ分かっていない」「三項演算子という言葉を初めて知った」という方に読んでいただきたい記事になっています。
それでは、三項演算子の基本的な使い方や、if文との違い、そして適切な使い分け方について解説します！

目次：

この記事のポイント

三項演算子とは何かがわかる
三項演算子の使い方がわかる
三項演算子とif文の違いがわかる

三項演算子とは？

三項演算子（さんこうえんざんし）は、条件分岐を1行で記述できる便利な構文です。
特に短い条件式を使いたい場合に、コードを簡潔に書けるため、実務などでもよく使われます。
三項演算子は次のような構文で表されます

例：基本の使い方

条件式 ? 真の値 : 偽の値;

const number = 1
const result = number > 0 ? "0以上です"　: "0以下です"

console.log(result); // "0以上です"

三項演算子の構造

条件式: ここに評価される条件を書く
真の値: 条件式が true の場合に実行される処理や値
偽の値: 条件式が false の場合に実行される処理や値

この構文を使うことで、複数行にわたるif文を1行で書くことができるのです。

if文との違い

if文も条件分岐を行うための基本的な方法ですが、三項演算子との主な違いは次の2つです。

記述の長さ

if文は通常、複数行にわたって書かれますが、三項演算子は1行で完結します。
例えば、上記の例をif文で書くと、次のようになります。

例：if文で書いた際の記述

let result;
const number = 1

if (number > 0) {
  result = "0以上です"
} else {
  result = "0以下です"
}

console.log(result); // "0以上です"

このように、if文では少なくとも4行以上必要になる場面でも、三項演算子を使えば1行で済むため、コードが短くなります。

使う場面

三項演算子は1行でシンプルな条件分岐を行う場合に適しています。
一方、if文はより複雑な処理を行う場合や、複数の条件が絡む場合に使用されることが多いです。

三項演算子を使う場面と注意点

三項演算子は便利ですが、使いすぎるとコードが読みにくくなることがあります。
簡潔なコードは確かに美しいですが、可読性(コードの読みやすさ)も非常に重要です。
そのため、三項演算子を使う際には次の点に注意しましょう

単純な条件のみに使う

三項演算子は、あまりにも複雑な条件や処理には向いていません。
可読性を考慮し、簡単な条件分岐に限って使うのがよいでしょう。

例：悪いパターン

const result = (a > 10) ? (b > 5 ? (a == 0 || b == 0 ? "aかbは0" : "aとbは範囲内" ) : "aは範囲内だがbは範囲外") : "aは範囲外";

このように、入れ子状で三項演算子を使うと、コードの可読性が大幅に低下します。
一応構文としては問題なく動きます。

ただし、改行やインデントを揃える事で、若干は読みやすくなります。
それでも読みづらく感じるので、if文を推奨します。

例：改行やインデントで改善したパターン

const result = 
(a > 10) ?
  (b > 5 ? 
    (a == 0 || b == 0 ? 
      "aかbは0" 
      : "aとbは範囲内" 
    )
    : "aは範囲内だがbは範囲外"  
  ) 
: "aは範囲外";

複数の処理がある場合はif文を使う

三項演算子は、基本的に「値を返す」ための演算子です。
もし、条件分岐によって複数の処理を行う場合は、if文を使うほうが適切です。

例：悪いパターン

let result;

if (a > 10) {
    if (b > 5) {
        if (a == 0 || b == 0) {
            result = "aかbは0";
        } else {
            result = "aとbは範囲内";
        }
    } else {
        result = "aは範囲内だがbは範囲外";
    }
} else {
    result = "aは範囲外";
}