JavaScript | 条件演算子（三項演算子）

JavaScript

2020.07.112025.10.24

JavaScript の条件演算子（三項演算子）

はじめての人に向けて、やさしく説明します。条件演算子は「もし〜ならA、そうでなければB」を1行で書ける便利な書き方です。まずは基礎を抑えてから、例題で手を動かしてみましょう。

条件式 ? 式1 : 式2

条件式 ? 式1 : 式2

JavaScript

例：

const score = 75;
const message = score >= 60 ? '合格' : '不合格';
console.log(message); // 合格

const score = 75;
const message = score >= 60 ? '合格' : '不合格';
console.log(message); // 合格

JavaScript

// if 文
let message;
if (score >= 60) {
  message = '合格';
} else {
  message = '不合格';
}

// 三項演算子
const message = score >= 60 ? '合格' : '不合格';

// if 文
let message;
if (score >= 60) {
  message = '合格';
} else {
  message = '不合格';
}

// 三項演算子
const message = score >= 60 ? '合格' : '不合格';

JavaScript

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

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

JavaScript

const name = '';
const displayName = name ? name : 'ゲスト';

const name = '';
const displayName = name ? name : 'ゲスト';

JavaScript

const isLoggedIn = false;
const text = isLoggedIn ? 'ログアウト' : 'ログイン';

const isLoggedIn = false;
const text = isLoggedIn ? 'ログアウト' : 'ログイン';

JavaScript

const num = -3;
const sign = num > 0 ? '正' : num === 0 ? 'ゼロ' : '負';

const num = -3;
const sign = num > 0 ? '正' : num === 0 ? 'ゼロ' : '負';

JavaScript

値を返す道具: 三項演算子は「どっちの値にするか」を決めるためのもの。複数行の処理や副作用（console.log を何回も）を入れるのは向いていません。
読みやすさ: ネスト（入れ子）しすぎると読みにくくなります。1回までが目安。
truthy / falsy: 条件式は true/false 以外でも判定されます。空文字 '' や 0、null、undefined は falsy（偽）です。

const input = '';
const label = input ? '入力あり' : '未入力'; // 未入力

const input = '';
const label = input ? '入力あり' : '未入力'; // 未入力

JavaScript

'5' == 5   // true（非推奨）
'5' === 5  // false（推奨）

'5' == 5   // true（非推奨）
'5' === 5  // false（推奨）

JavaScript

const score = 72;
const grade = score >= 80 ? 'A' : score >= 60 ? 'B' : 'C';
console.log(grade); // B

const score = 72;
const grade = score >= 80 ? 'A' : score >= 60 ? 'B' : 'C';
console.log(grade); // B

JavaScript

const name = '';
const displayName = name ? name : 'ゲスト';
console.log(displayName); // ゲスト

const name = '';
const displayName = name ? name : 'ゲスト';
console.log(displayName); // ゲスト

JavaScript

発展: ES2020 以降は「null 合体演算子」でも書けます（参考） const displayName = name ?? 'ゲスト'; // null/undefined のときだけデフォルト

const stock = 0;
const message = stock > 0 ? '購入可' : '在庫なし';
console.log(message); // 在庫なし

const stock = 0;
const message = stock > 0 ? '購入可' : '在庫なし';
console.log(message); // 在庫なし

JavaScript

const enabled = true;
const buttonColor = enabled ? '#1976d2' : '#9e9e9e';

const enabled = true;
const buttonColor = enabled ? '#1976d2' : '#9e9e9e';

JavaScript

三項演算子を使うとよい場面:
- 短い値の選択: ラベル、メッセージ、色、クラス名など
- 1行で十分な条件分岐: 読みやすさが保てる範囲
if 文にするべき場面:
- 複数の処理がある: ログ、計算、関数呼び出しが複数
- 条件が複雑: ネストが深くなる、コメントが必要
- 副作用を伴う: 値選びではなく動作の分岐