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 に値が代入されます。

まとめると処理の流れはこう

  1. 掛け算で合計金額を計算
  2. 所持金と比較して true / false を判定
  3. 三項演算子で結果を選択
  4. 最後に result に代入

一つひとつ分解して見ていくと、
if文で書いていた処理と同じことをしているのが分かりますね。

if文と三項演算子、どちらがいい？

今回のように、

  • 条件が1つ
  • true / false の処理が短い

場合は、三項演算子を使うとスッキリ1行で書けるのがメリットです。

一方で、

  • 条件が増えてきた
  • 処理が長くなった

場合は、無理に三項演算子を使わず、if文の方が読みやすいことも多くあります。
三項演算子は「すべての文を短く書くための魔法」ではありません。
読んで一瞬で意味が分かるかどうかを基準に、if文と使い分けることが大切です。