三項演算子と短絡評価
三項演算子と短絡評価 とは
三項演算子(? :)とAND/ORの短絡評価で、条件をスッキリ書こう。本レッスンでは、三項演算子と短絡評価 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
三項演算子と短絡評価
条件分岐をif文よりも簡潔に書く方法を学びましょう。
三項演算子
条件 ? 真の値 : 偽の値 の形式で、条件に応じた値を返します。
JavaScript
const age = 20;
const status = age >= 18 ? "成人" : "未成年";短絡評価
&&(AND)と||(OR)は、最後に評価した値を返します。
JavaScript
// && : 左がtruthyなら右を返す
const greeting = isVIP && "VIP様、"; // isVIPがtrueなら "VIP様、"
// || : 左がfalsyなら右を返す(デフォルト値)
const name = userName || "ゲスト"; // userNameが空なら "ゲスト"Nullish合体演算子(??)
||と似ていますが、nullとundefinedの場合のみ右辺を返します。
JavaScript
const value1 = 0 || 100; // 100(0はfalsy)
const value2 = 0 ?? 100; // 0(0はnullでもundefinedでもない)
const value3 = null ?? 100; // 100この問題では、これらの演算子を組み合わせてユーザー情報を処理しましょう。
よくある質問
Q. 三項演算子はいつ使うべきですか?
A. 値を 1 行で決めたいときに有効です。たとえば label = age >= 20 ? '成人' : '未成年' のような短い条件分岐は読みやすくなります。ネストすると一気に読みにくくなるので、条件が 3 つ以上に増えたら if-else if-else に切り替えましょう。
Q. if 文と三項演算子はどっちが速いですか?
A. 実行速度はほぼ同じです。三項演算子は式(値を返す)、if 文は文(処理を行う)という違いだけです。可読性で選び、副作用のある処理(console.log、API 呼び出し)は if 文側に書き、純粋な値の選択だけ三項にするのが綺麗です。
Q. 三項演算子で複数の条件を扱えますか?
A. cond1 ? a : (cond2 ? b : c) と書けますが読みにくくなりがちです。3 段以上は switch 文やオブジェクトルックアップ(gradeLabel[score])に置き換えた方が拡張も楽です。条件が増えるたびに括弧が増えてレビューで指摘されることが多いポイントです。
次のレッスン
次は スコープとクロージャ で、三項演算子(? :)とAND/ORの短絡評価で、条件をスッキリ書こう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 三項演算子と短絡評価 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 三項演算子と短絡評価 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
evaluateUser({"age":25,"isPremium":true,"name":"太郎","nickname":"タロー"}) → {"displayName":"タロー","message":"プレミアム会員様、タローさん","status":"成人"}
evaluateUser({"age":15,"isPremium":false,"name":"花子"}) → {"displayName":"花子","message":"こんにちは、花子さん","status":"未成年"}
evaluateUser({"age":20}) → {"displayName":"ゲスト","message":"こんにちは、ゲストさん","status":"成人"}
evaluateUser({"age":18,"isPremium":true,"name":"Bob","nickname":null}) → {"displayName":"Bob","message":"プレミアム会員様、Bobさん","status":"成人"}