三項演算子で簡潔に
三項演算子で簡潔に とは
条件 ? A : Bでifを 1 行にまとめ、値を返すスマートな式を書けるようになろう。
三項演算子で if を 1 行にする
JavaScript で「条件によって値を分岐させたい」場面はとても多いです。たとえば「score が 60 以上なら 合格、そうでなければ 不合格」「ログイン中なら ユーザー名、そうでなければ ゲスト」というように。これを if 文で書くと最低でも 3〜5 行になりますが、三項演算子 を使えば 1 行でスッキリ書けます。
三項演算子は JavaScript で唯一の 3 つのオペランドを取る演算子 です。書式は 条件 ? A : B というシンプルな形で、「条件が true なら A、false なら B」を返します。if/else 文がステートメント (文) なのに対し、三項演算子は 式 (expression) なので、変数代入や return の右辺にそのまま使えるのが大きな違いです。
三項演算子のキモは「式である」という点です。値を返すので、関数の
returnにも JSX の中にも、テンプレートリテラルにもそのまま埋め込めます。
文法と基本パターン
書き方は次のとおりです。
JavaScript
const score = 75;
const result = score >= 60 ? "合格" : "不合格";
console.log(result); // "合格"if 文で同じことを書くと次のようになります。
JavaScript
const score = 75;
let result;
if (score >= 60) {
result = "合格";
} else {
result = "不合格";
}
console.log(result); // "合格"機能はまったく同じですが、行数も視線の動きも違います。三項演算子は 「値を 1 つ決めて変数に入れる」 ようなシンプルな分岐にぴったりです。
return と組み合わせる
関数の中で「条件によって違う値を返す」ときに、三項演算子は特に活きます。
JavaScript
function labelOf(score) {
return score >= 60 ? "合格" : "不合格";
}
console.log(labelOf(80)); // "合格"
console.log(labelOf(40)); // "不合格"if (score >= 60) return "合格"; else return "不合格"; という 3 行を、return 条件 ? A : B; の 1 行に置き換えただけです。読み手にも書き手にも優しいスタイルです。
Mermaid で三項演算子の流れを追う
今回の課題、「score >= 60 なら 合格、そうでなければ 不合格」を流れ図にしてみます。
この図がそのまま return score >= 60 ? "合格" : "不合格"; という 1 行になります。シンプルな 2 択ほど、三項演算子の効果が大きく出ます。
三項演算子のネスト
三項演算子はネスト (入れ子) も可能です。たとえば 3 段階の評価をしたい場合は次のように書けます。
JavaScript
function grade(score) {
return score >= 80 ? "A"
: score >= 60 ? "B"
: "C";
}
console.log(grade(85)); // "A"
console.log(grade(70)); // "B"
console.log(grade(50)); // "C"インデントを工夫すれば読みやすくなりますが、3 段階を超えるとさすがに if/else if のほうが読みやすいです。
ネスト三項演算子は便利な反面、可読性を下げやすい諸刃の剣です。2 段までならアリ、3 段以上は
if文やswitch文、あるいは早期 return を検討しましょう。
よくある間違い
三項演算子の落とし穴を 3 つ紹介します。
- 副作用を入れる —
条件 ? doSomething() : doOther()のように関数呼び出しの実行で副作用を起こすのは、本来if文の仕事です。三項演算子は 値を返す ために使うのが基本。副作用が目的ならifを選びましょう - 代入と混同する —
result = score >= 60 ? "合格" : "不合格";は OK ですが、result = (score >= 60) = "合格" : "不合格";のように=を挟むと構文エラーになります。?と:の位置を覚えてください returnを A と B 両方に書く —return condition ? return a : return b;は構文エラーです。returnは最初に 1 回、その後は 値だけ を書きます
もうひとつ、文字列の連結と組み合わせると勘違いが起きやすいパターンがあります。
JavaScript
const name = "Naoki";
const label = "Hi, " + (name ? name : "guest");+ の優先順位は三項演算子より高いので、必ず カッコで囲む のが安全です。カッコを忘れると意図しない計算になります。
カッコは「読み手のため」に書くものです。優先順位を覚えていても、第三者がパッと見て分かるよう
()を惜しまない、これが上級者の習慣です。
やってみよう
それでは課題に取り組みましょう。labelOf(score) を三項演算子だけで完成させてください。
書き方の方針は次のとおりです。
return score >= 60 ? "合格" : "不合格";の 1 行で書くif文を一切使わない (三項演算子の練習なので)- テストには境界値の
60も含まれているので、>ではなく>=を使う
三項演算子は React / Vue といったフロントエンドフレームワークの JSX / template の中でも頻出です。ここで「式として値を返す」感覚を身に付けておくと、UI 開発でも迷いが減ります。
よくある質問
Q. 三項演算子はいつ使うべきですか？
A. 値を 1 行で決めたいときに有効です。たとえば label = '成人' if age >= 20 else '未成年' のような短い条件分岐は読みやすくなります。ネストすると一気に読みにくくなるので、条件が 3 つ以上に増えたら if-elif-else に切り替えましょう。
Q. if 文と三項演算子はどっちが速いですか？
A. 実行速度はほぼ同じです。三項演算子は式（値を返す）、if 文は文（処理を行う）という違いだけです。可読性で選び、副作用のある処理（print、API 呼び出し）は if 文側に書き、純粋な値の選択だけ三項にするのが綺麗です。
Q. 三項演算子で複数の条件を扱えますか？
A. a if cond1 else (b if cond2 else c) と書けますが読みにくくなりがちです。3 段以上は match 文や辞書ルックアップ（grade_label[score]）に置き換えた方が拡張も楽です。条件が増えるたびに括弧が増えてレビューで指摘されることが多いポイントです。
次のレッスン
次は nullish 合体演算子 ?? で、条件 ? A : B で if を 1 行にまとめ、値を返すスマートな式を書けるようになろう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 三項演算子 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 三項演算子 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- 関数名は
labelOf、引数はscoreの 1 つにすること - 三項演算子
条件 ? A : Bを使い、if文は使わないこと - 戻り値は文字列
"合格"または"不合格"のいずれかにすること
入出力例
test-cases.txt
labelOf(80) → "合格"
labelOf(60) → "合格"
labelOf(59) → "不合格"
labelOf(0) → "不合格"
labelOf(100) → "合格"