JavaScriptの三項演算子（条件演算子）は、条件に応じて値を返す便利な短縮記法です。
「?」と「:」を使用した記述を行い、if文と比べて圧倒的にコードを短縮できることが特徴。
ただし、知らない人が見た時には何をやってるのかわけが分からないため、知らずにコードを読むと必ずつまずくポイントでもあります。
かくいう私も、三項演算子の見かたと使い方は最近覚えたばかりです。今回は、備忘録として三項演算子の使い方について紹介します。
1. 基本例
三項演算子の基本の書き方は以下の通りです。
条件式 ? trueの場合の値 : falseの場合の値
例えば、変数ageが18以上かどうかでメッセージを分けるとしましょう。
普通にif文で書いた場合↓
let age = 20;
if (age >= 18){
console.log("大人です")
}else {
console.log("未成年です")
}
三項演算子で書いた場合↓
let age = 20
console.log(age >= 18 ? "大人です" : "未成年です") // 出力: 大人です
ここで、age >= 18が条件式です。条件がtrueなら "大人です"、falseなら "未成年です" が返されます。
このように、三項演算子のメリットはコードをグッと短縮し、スッキリと読みやすいコードにできます。(あくまで三項演算子を知っている人であれば)
2. 複数条件のネスト
三項演算子はネストして使うこともできます。例えば年齢によって3パターンに分ける場合↓
let age = 15
console.log(age < 13 ? "子供です" : age < 20 ? "10代です" : "大人です") // 出力: 10代です
「ageが13より小さいか?」という条件に当てはまらない場合、次の条件「ageが20より小さいか?」に判定が移り、この条件に当てはまった場合は "10代です" が表示されます。
これにも当てはまらなければ "大人です" が表示されるという感じですね。
読み方は左から順番に評価され、条件に合致した値が返されます。
3. 関数の返り値に使う
関数内で三項演算子を使うと短く書くことができます。
function checkNumber(num) {
return num % 2 === 0 ? "偶数" : "奇数"
}
console.log(checkNumber(7)) // 出力: 奇数
4. JSXやテンプレート文字列での使用例
Reactやテンプレート文字列でもよく使われます。
let isLoggedIn = true
let greeting = `ようこそ、${isLoggedIn ? "ユーザー" : "ゲスト"}さん`
console.log(greeting) // 出力: ようこそ、ユーザーさん
まとめ
- 三項演算子は
条件 ? 真の値 : 偽の値で使える短縮if文。 - ネストして複数条件を判定することも可能。
- 関数の返り値やテンプレート文字列でも便利。
- 複雑になりすぎる場合は、可読性のために通常のif文と使い分ける。
短く書きたい場合や簡単な条件分岐でとても役立つので、ぜひ使いこなしてみてください。