JavaScript | 基礎構文：比較・論理 – 三項演算子

JavaScript JavaScript
2025.12.13
スポンサーリンク

三項演算子を一言でいうと

三項演算子（さんこうえんざんし）は、
「if ～ else を 1 行で書ける “条件付きの値” の式」 です。

書き方はこの形です。

条件式 ? 条件がtrueのときの値 : 条件がfalseのときの値
JavaScript

日本語にすると、
「もし 条件式 が true なら こっち、そうでなければ あっち」
という “質問 → 2 択” の構造になっています。

ここが重要です。
三項演算子は「処理」を書くものではなく、
「どっちの“値”を使うか」を選ぶための式 です。
「値を選びたいときだけ使う」と意識しておくと、使いどころを間違えにくくなります。

基本構文と if / else との対応関係

三項演算子の基本構文

基本の形は次の通りです。

const 結果 = 条件式 ? 値1 : 値2;
JavaScript

これは if / else で書くと、次のような意味になります。

let 結果;
if (条件式) {
  結果 = 値1;
} else {
  結果 = 値2;
}
JavaScript

例えば、年齢で「大人」「未成年」を分けて文字列にしたいとします。

const age = 20;

const label = age >= 18 ? "大人" : "未成年";

console.log(label); // "大人"
JavaScript

これは if / else で書くとこうです。

const age = 20;
let label;

if (age >= 18) {
  label = "大人";
} else {
  label = "未成年";
}
JavaScript

やっていることはまったく同じですが、
三項演算子は「どの値を入れるか」を 1 行で書ける、というだけです。

「条件式の結果（true / false）で、右側のどちらかを選ぶ」

三項演算子の流れを整理すると：

  1. まず 条件式 を評価する（true か false か）
  2. true なら ? の右側、: の左にある値（値1）を採用
  3. false なら : の右側の値（値2）を採用

という動きです。

ここが重要です。
三項演算子は「式」なので、必ず“値”に評価されます。
if 文は「文」であって、値にはなりません。
“値を決めるための if” を書きたくなったときが、三項演算子の出番です。

よくある実用パターン

条件によってメッセージを切り替える

例えばスコアによってメッセージを変える。

const score = 75;

const message = score >= 70 ? "合格です" : "不合格です";

console.log(message);
JavaScript

UI 文言をサッと分けたいときに、
三項演算子はとても相性が良いです。

変数の初期値を条件付きで決める

const isAdmin = true;

const homePath = isAdmin ? "/admin/dashboard" : "/home";

console.log(homePath);
JavaScript

「管理者なら管理画面」「一般ユーザーなら通常ホーム」
のように、“どの値を使うか” を条件付きで決めるのに向いています。

テンプレート文字列の中で使う

const count = 1;

const text = `アイテムは ${count} 個${count === 1 ? "" : "です"}`;
console.log(text); // "アイテムは 1 個"
JavaScript

もっとシンプルに：

const count = 3;
const label = `アイテムは ${count} 個${count === 1 ? "" : "あります"}`;
console.log(label); // "アイテムは 3 個あります"
JavaScript

テンプレートリテラル内で
「単数形か複数形か」「語尾を変える」
といったときにもよく使われます。

ここが重要です。
「ここで欲しいのは“値”だけだな」「条件によって別の値にしたいな」と思ったら、
まず三項演算子を思い出してみる。
if / else よりスッキリ書ける場面がかなりあります。

ネスト（入れ子）した三項演算子と、その危険性

三段階以上の分岐を三項演算子で書くとどうなるか

例えば、スコアで「A / B / C」を分けたいとします。

やめたほうがいい例：

const score = 85;

const rank = score >= 90 ? "A" : score >= 70 ? "B" : "C";

console.log(rank); // "B"
JavaScript

動きはこうです。

  1. score >= 90 が false
  2. false なので、: の右側に進む → score >= 70 ? "B" : "C"
  3. そこで score >= 70 が true → “B”

動きは理解できても、
ぱっと見で何をしているのか分かりづらいですよね。

if / else のほうが素直な場合

同じことを if / else で書くと、こうなります。

let rank;
if (score >= 90) {
  rank = "A";
} else if (score >= 70) {
  rank = "B";
} else {
  rank = "C";
}
JavaScript

こっちのほうが読みやすいと感じるなら、
そちらを選ぶべきです。

ここが重要です。
三項演算子は「1 回の if / else」を短く書くためのもの。
2 段、3 段とネストした途端、人間の可読性は一気に落ちます。
「ネストしたくなったら if / else に戻す」くらいがちょうどいいバランスです。

三項演算子と真偽値（truthy / falsy）の関係

条件式は true / false 以外でも書ける

三項演算子の 条件式 の部分には、
if 文と同じく「真偽値に評価される式なら何でも」書けます。

const name = "";

const displayName = name ? name : "名前未設定";

console.log(displayName); // "名前未設定"
JavaScript

ここでは

  • name が空文字 "" → falsy
  • 条件式全体が false 扱い
  • よって : の右側（”名前未設定”）が選ばれる

となります。

同じく、配列の空チェック。

const items = [];

const hasItemsText = items.length > 0 ? "アイテムあり" : "アイテムなし";

console.log(hasItemsText); // "アイテムなし"
JavaScript

「左が falsy なら右」という OR (||) との比較

よく似た書き方として、次のようなものがあります。

const name = inputName || "名無しさん";
JavaScript

これは「inputName が falsy（空文字、0, null, undefined など）なら ‘名無しさん’」という意味です。

三項演算子で同じことを書くと：

const name = inputName ? inputName : "名無しさん";
JavaScript

三項演算子のほうが「条件式と値」とが明確に分かれているので、
「何を判定して、何を返すのか」が読み取りやすい場合もあります。

ここが重要です。
条件 ? A : B は「条件式をはっきり書く」スタイル。
左 || 右 は「左が falsy なら右」という暗黙ルールを使うスタイル。
「自分やチームがどちらを読みやすいと感じるか」で使い分けるといいです。

三項演算子を「やりすぎない」ための判断基準

三項演算子を使ってよい場面

次のようなときは、三項演算子がハマりやすいです。

  • 条件は 1 つだけ
  • true 側 / false 側の式がどちらも短い
  • 「値を選びたいだけ」であって、「複雑な処理」をしたいわけではない
  • 1 行で意味がすっと読める

例えば：

const age = 20;
const isAdultText = age >= 18 ? "成人" : "未成年";
JavaScript

これは十分読みやすいです。

三項演算子を避けるべきサイン

逆に、こういうサインが出始めたら、
素直に if / else に戻したほうが安全です。

  • ? や : が 2 つ以上出てくる（ネストし始めた）
  • true 側 / false 側で処理が重くなり、関数呼び出しやメソッドチェーンが増えてきた
  • 1 行の長さが明らかに長く、横スクロールしないと読めない
  • 自分で読んでも、一瞬「ん？」と考えないと意味が取れない

例えば、こんな感じになったら黄色信号です。

const label =
  user && user.isAdmin
    ? `管理者: ${user.name}`
    : user
    ? `ユーザー: ${user.name}`
    : "ゲスト";
JavaScript

これは if / else で書くか、
あるいは関数に切り出して意味に名前を付けたほうが良いです。

ここが重要です。
三項演算子は「短く書ける」が正義ではありません。
“意図が一目で伝わるかどうか” が本当の基準です。
「自分が 1 週間後に見て意味をすぐ説明できるか？」と自問して、微妙だと思ったら素直に if / else に戻していい。
それがプロの判断です。

初心者として三項演算子で本当に押さえてほしいこと

三項演算子の形は 条件 ? 値1 : 値2。
条件が true なら 値1、false なら 値2 が「値として返る」。

if / else と違って、「処理」ではなく「どの値を使うか」を選ぶための“式”。
「値を代入したいだけ」の場面で使うとハマりやすい。

ネストすると一気に読みづらくなるので、
2 段以上ネストし始めたら if / else に戻すのが無難。

条件部分には、true / false 以外の式（truthy / falsy の評価）も書ける。
name ? name : "未設定" のようなパターンが典型。

ここが重要です。
三項演算子は、“値を決めるための if” を 1 行にまとめる道具です。
「ここは結果として 1 つの値だけが欲しいんだよな」と思ったときにだけ使う。
それ以外の条件分岐は、読みやすさを優先して素直に if / else で書く。
このラインを自分の中に引いておくと、三項演算子を “かっこよく” ではなく “賢く” 使えるようになります。

最後に、練習としていくつか自分で書いてみてください。

// 1. 「18歳以上なら '成人'、それ以外は '未成年'」という文字列を、三項演算子で変数 label に入れる

// 2. 「ログインしていれば 'ようこそ'、していなければ 'ログインしてください'」を、三項演算子で message に入れる

// 3. 「配列 items が空でなければ 'アイテムあり'、空なら 'アイテムなし'」を、三項演算子で text に入れる
JavaScript

if / else でまず書いてから、
それを三項演算子に「圧縮」してみると、
三項演算子の “ちょうどいい使いどころ” が体感で分かってきます。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました