JavaScriptには、ちょっと不思議な見た目の書き方があります。
条件 ? A : B初めて見たとき、
- 「なにこれ？」
- 「if文じゃダメなの？」
- 「プロっぽいけど、正直読みづらい…」
と感じた人も多いのではないでしょうか。
この書き方を 三項演算子（さんこうえんざんし） といいます。
便利な反面、慣れすぎると思わぬ落とし穴もある演算子です。
それでは、順番に見ていきましょう。
if文をもっと簡単に書く方法、それが「三項演算子」
次の if文をご覧ください。
【if文の基本形】
if (条件) {
条件がtrueのときに実行される文だよ
} else {
条件がfalseのときに実行される文だよ
}とてもよく見かける、if文の基本形です。
「これがどうしたの？」と思う方もいるかもしれません。
ただ、実際にプログラムを書いていくと、このような if文を何度も書くことになります。
気がつけば、コードは何千行、何万行になることも珍しくありません。
そんな中で、上の if文は たった一つの条件分岐でも5行 使っています。
「もう少し短く書けないかな？」
「1行で表現できたら読みやすくならないかな？」
そう考えた結果、生まれたのが 三項演算子 です。
三項演算子は、次の if文を1行にまとめた書き方だと考えると分かりやすいです。
【三項演算子】
条件 ? 条件がtrueのときに実行される文だよ : 条件がfalseのときに実行される文だよやっていることは if文の基本形と同じですが、短く、コンパクトに書けるのが特徴です。
よく見比べて、どこがどう違うのか、じっくり観察してみましょう。
ポイントは ? と : に注目することです。
また、ひとつ注意点があります。
三項演算子は基本的に、if / else の2択（分岐が1つ）を1行で書くためのものです。
もし else if のように条件分岐が増える場合、三項演算子で無理に表現しようとすると、
入れ子（ネスト）になって 途端に読みにくくなることがあります。
そのため、条件が増えてきたら無理をせず、
素直に if / else if / else を使った方が分かりやすいケースも多いです。
例：くれびは、うまい棒を3本買える？
例として、Crebitプログラミング教室のキャラクター「くれび」の所持金が50円あると仮定し、
うまい棒（1本15円）を3本買えるかどうかを考えてみます。
まずは、if文で条件分岐を書いてみましょう。
let money = 50; // くれびの所持金
let umaiboPrice = 15; // うまい棒1本の値段
let wantCount = 3; // 買いたい本数
let result;
if (money >= umaiboPrice * wantCount) {
result = "うまい棒を3本買える！";
} else {
result = "お金が足りない…";
}このコードでは、
umaiboPrice * wantCountで、3本分の合計金額（45円）を計算し、- 所持金がそれ以上あるかどうかで、買えるかどうかを判断しています。
このように if文を使うと、処理の流れが上から順に読めるので、とても分かりやすい書き方になりますね。
三項演算子で書いてみる
先ほどは、if文を使って
「くれびが、うまい棒を3本買えるかどうか」
を判定しました。
同じ処理を、三項演算子を使って書くと次のようになります。
let money = 50; // くれびの所持金
let umaiboPrice = 15; // うまい棒1本の値段
let wantCount = 3; // 買いたい本数
let result = money >= umaiboPrice * wantCount ? "うまい棒を3本買える！" : "お金が足りない…";「随分コンパクトになったけど、最後の行、演算子がいっぱい出てきてよく分からない…」
と、思わず悲鳴を上げてしまう人もいるかもしれません。
でも、ご安心ください。
ゆっくり一つずつ考えていけば、ちゃんと理解できます。
まずは演算子の優先順位を思い出そう
JavaScriptでは、演算子には 優先順位 があります。
今回のコードでは、
*（掛け算）>=（比較演算子）- =（代入演算子）
が使われていますね。
ルールとしては、
計算や比較が先、代入は最後
という順番で処理されます。
つまり、result = の右側に書かれている式は、
先に中身がすべて計算されたあとで、最後に代入されるというわけです。
このあたりをもう少し詳しく知りたい方は、先に紹介した記事
「JavaScriptの演算子の優先順位 x = a == b はどうやって処理される？」
も参考にしてみてください。
最初に計算されるのはどこ？
まず最初に処理されるのは、この部分です。
money >= umaiboPrice * wantCountここで、
umaiboPrice * wantCountは
15 * 3 = 45になります。
つまり条件式は、
money >= 45という形になります。
条件式の結果を確認する
今回、money は 50 なので、
50 >= 45これは true（正しい） ですね。
この結果が、三項演算子の「条件」にあたります。
true のとき、どちらが選ばれる？
三項演算子では、
条件 ? trueのとき : falseのときというルールでした。
今回の条件は true なので、? の後ろに書かれている
"うまい棒を3本買える！"が選ばれます。
最後に代入が行われる
そして最後に、代入演算子 = によって、
let result = "うまい棒を3本買える！";という形で result に値が代入されます。
まとめると処理の流れはこう
- 掛け算で合計金額を計算
- 所持金と比較して true / false を判定
- 三項演算子で結果を選択
- 最後に
resultに代入
一つひとつ分解して見ていくと、
if文で書いていた処理と同じことをしているのが分かりますね。
if文と三項演算子、どちらがいい？
今回のように、
- 条件が1つ
- true / false の処理が短い
場合は、三項演算子を使うとスッキリ1行で書けるのがメリットです。
一方で、
- 条件が増えてきた
- 処理が長くなった
場合は、無理に三項演算子を使わず、if文の方が読みやすいことも多くあります。
三項演算子は「すべての文を短く書くための魔法」ではありません。
読んで一瞬で意味が分かるかどうかを基準に、if文と使い分けることが大切です。