JavaScriptの三項演算子とは？if文との違いと使い方を初心者向けに解説

JavaScriptを学んでいると、他の人のコードで ? や : といった記号が組み合わさった不思議な一行を見かけることがあります。

「これ、どういう意味？算数？」
「if文と何が違うの？」

その正体は「三項演算子」です。一見すると複雑な暗号のように見えますが、仕組みを理解すれば、5〜6行かかっていたif文をたった1行に凝縮できる便利な道具です。

本記事では、三項演算子の基本から、if文との使い分け、そして現場のエンジニアが気をつけている「禁忌（やってはいけない書き方）」までを詳しく解説します。

三項演算子とは？「1行で書ける条件分岐」

三項演算子とは、その名の通り「3つの項目」を使って処理を行う演算子のことです。JavaScriptで唯一、3つのパーツを組み合わせて使うため、この名前がつきました。

役割を一言で言えば、「条件によって、どちらの値を使うか選ぶ」というものです。

これまでのif文は「もし〜なら、この命令（アクション）を実行する」という「動き」に注目していました。対して三項演算子は、「もし〜なら、この値を代入する」という「結果の選択」に特化しています。

三項演算子は、 ? と : という2つの記号を使って次のように書きます。

基本の形

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

具体例を見てみましょう。例えば、テストの点数によって「合格」か「不合格」かを変数に入れる処理です。

const score = 80;

// scoreが70以上なら「合格」、そうでなければ「不合格」を代入
const result = score >= 70 ? "合格" : "不合格";

console.log(result); // 「合格」が表示される

3つのパーツの内訳

同じ処理をif文と三項演算子で書き比べてみましょう。どちらがスッキリ見えるか一目瞭然です。

if文で書いた場合（5行）

let message;
const age = 18;

if (age >= 20) {
  message = "お酒が飲めます";
} else {
  message = "お酒は20歳から";
}

三項演算子で書いた場合（1行）

const age = 18;
const message = age >= 20 ? "お酒が飲めます" : "お酒は20歳から";

決定的な違いは「定数（const）」が使えること

if文の場合、まずlet message;と中身が空の変数を作り、後から値を入れ直す必要があります。
しかし、三項演算子は「式」なので、その場で値を返します。そのため、const（定数）直接代入できるのが大きな特徴です。後から中身が書き換わる心配がないため、プログラムの安全性が高まります。

便利な三項演算子ですが、何でもかんでもこれを使えばいいというわけではありません。

メリット

デメリット

三項演算子を使う際、できれば避けたいNGパターンが存在します。

NG：三項演算子の「入れ子（ネスト）」
三項演算子の中に、さらに三項演算子を入れる書き方です。

// 【NG例】何がなんだか分からない……
const result = score >= 90 ? "秀" : score >= 80 ? "優" : score >= 70 ? "良" : "不可";

このようなコードは「読みづらさの極み」です。これを書くくらいなら、おとなしくif…else、if文やswitch文を使いましょう。コードは「短さ」よりも「読みやすさ」が正義です。

NG：値を返さない処理

// 【NG例】三項演算子で無理やり関数を実行する
age >= 20 ? sendEmail() : alert("未成年です");

これも避けるべきです。三項演算子はあくまで「値を選ぶ」ためのもの。動作を分岐させたいときは、素直にif文を使いましょう。

合わせて読みたい：

では、どんな時に使うのがベストなのでしょうか？

①デフォルト値の設定
ユーザー名が入っていればその名前を、なければ「ゲスト」と表示するようなケースです。

const userName = inputName : "ゲスト";

②REACTなどのフレームワークでの表示切り替え
モダンなWeb開発（Reactなど）では、HTMLの中に条件分岐を書きたい時がよくあります。その際、if文は書けませんが、三項演算子なら書けるというルールがあるため、非常によく使われます。

③クラス名の切り替え（DOM操作）
「もしエラーなら赤色にする、そうでなければ黒色にする」といった、CSSのクラス名を1つ選びたい時などに重宝します。

三項演算子は、JavaScriptのコードを「洗練」させるための強力な武器です。

まずは「AかBか」の単純な二択の代入から、三項演算子を使ってみてください。今まで5行書いていたコードが1行にシュッと収まる快感を知れば、あなたのプログラミングスキルはまた一つ上のレベルへ到達します。