三項演算子

このレッスンでは、JavaScriptの三項演算子の書き方を学び、シンプルな条件分岐を1行で簡潔に表現できるようになることを目標にします。「JavaScript 三項演算子 使い方」「JavaScript if 1行」で調べている方向けの内容です。

条件 ? 真のときの値 : 偽のときの値という書き方で、簡単なif文を1行で表現できます。これを三項演算子と呼びます。「大人か未成年かを判定して、その場でメッセージを決める」といった短い分岐に向いています。if...elseを4行かけて書く代わりに、変数への代入と条件分岐を1行でまとめられるのが最大の利点です。

サンプルコードではage >= 20 ? "大人" : "未成年"という三項演算子を使い、ageの値に応じてmessageという変数に代入する文字列を切り替えています。条件式が?の前、真のときの値と偽のときの値が:の前後に並ぶという構文の形を覚えておくと、読み書きどちらもスムーズになります。

複雑な条件を無理に詰め込むとかえって読みにくくなるため、シンプルな2択の判定のときだけ使うのがコツです。三項演算子を入れ子にして何段階も条件分岐を書くと、一目で意味が分からないコードになりがちなので、複雑な分岐にはif文を使う方が安全です。「短くシンプルな2択だけ三項演算子」というルールを意識しましょう。

実際の開発現場では、画面に表示するテキストを条件によって切り替えたり、初期値が未設定のときの代わりの値を決めたりと、ちょっとした値の切り替えに三項演算子が頻繁に使われます。コードレビューでも、if文で書くべきか三項演算子でよいかは、可読性の観点でよく議論されるポイントです。

条件式の部分にも比較演算子だけでなく、論理演算子(&&や||)を組み合わせた条件を書くことができ、少し複雑な判定でも1行に収められる場合があります。ただし読みにくくなる場合は、無理に三項演算子を使わずif文に戻す判断も大切です。

三項演算子は、テンプレートリテラルの中に直接埋め込んで使うこともできます。`あなたは${age >= 20 ? "大人" : "未成年"}です`のように書けば、条件による文言の切り替えを1つの文字列の中で完結させられます。