JavaScriptの三項演算子が分かりにくくて発狂するかたへ～三項演算子とはなにか、覚え方とメリットは何か

JavaScript

2023.02.20

(条件) ? 真/trueの場合 : 偽/falseの場合;

プログラムの書き方は最適解は存在するものの絶対正であることはあまりない（構文以外の話）と個人的には考えています。その最たるものが三項演算子を使うか使わないかや、アロー関数にするかしないかで、これは結局好みの問題に行き着くことが多いです。

「こんな分かりにくい記述すんな」派と「効率的でいいじゃん」派に分かれますよね。

ただ、こうしたほうが記述がスッキリするんじゃないか？という論点に至ることがほとんどなので「じゃあどっちがスッキリするの？」という観点で三項演算子をかみ砕いていきます。

そもそも三項演算子とは何か
三項演算子の使い方
三項演算子の覚え方　条件？シンコロギ
どんな場面で便利なのか具体的に
入れ子が3項演算子を害悪に替えた
まとめ

そもそも三項演算子とは何か

三項演算子は3つのオペランドをとる演算子です。条件、真の場合、偽の場合の分岐を1行で書くことが出来ます。if()文では、改行を含め最低5行かかります。

次の例を見て見ましょう。

if(A <= 5) {
  console.log("Aハ5以上デス");
} else {
  console.log("Aハ5未満デス");
}

普通のif()文です。5行使っているのがわかります。（正確には1行にも出来ますが、可読性が悪く使い物になりません）

試しに1行にしてみましょう。

if(A <= 5) { console.log("Aハ5以上デス"); } else { console.log("Aハ5未満デス"); }

あれ、いける、別に読める！（笑）ということも無い体でお願いします。一応見にくくなりました。

このぱっと見分かりにくいコードをもっとシンプルにするのが三項演算子です。

三項演算子の使い方

使い方を見る前に先ほどの1行にしたif()文を見ておきましょう。

if(A <= 5) { console.log("Aハ5以上デス"); } else { console.log("Aハ5未満デス"); }

これを三項演算子に置き換えると

(A <= 5) ? console.log("Aハ5以上デス") : console.log("Aハ5未満デス");

見やすいのか見やすくないのか分かりづらい例を挙げてしまいました。

前のコードと比べると

ifが消えている
{}が消えている
elseがない
「;（セミコロン）」が末尾に付いている

上記4点で言葉が削られているのが分かります。構文として説明を交えて三項演算子を書いてみます。

(条件) ? 真/trueの場合 : 偽/falseの場合;

これが三項演算子の基本形です。何も難しくはありません。

でも、そういうことじゃなくてそもそも分かりにくいんだよなぁ、って方！ちょっと待ってください。おそらくその「そもそも分かりにくい」っていうのは普段使わないからです。

JavaScript（あるいは最初に覚えた言語）を勉強したての、若かりし日々を思い出してください。「if()文ってなんだよ」ってなってませんでした？「変数ってなんだよ」ってなってませんでした？それと今の状況似ていません？

ある程度プログラムが出来るようになって、仕事ももらえてバリバリ書けるようになって。そんな中たまたま見た人のソースコードに見知らぬ書き方が、、こういうことたまにあります。

「何書いてるのか分からんw」ってなります。そこで興味や好奇心が芽生えるか、もしくは嫌悪感が生まれるかは人それぞれです。若かりし頃の僕は後者で「こんな回りくどい書き方するなよ、if()文使えif()文を」という天邪鬼な考えに襲われてしまったのです。

きっとこの文章に好意的な方は「if()文使えよ」派が多いんじゃないかなと思います。

三項演算子の覚え方　条件？シンコロギ

if()文派の方はとりあえず3項演算子を実際の業務で使ってみることをお勧めします。あれ、これなんか便利なんじゃ、、、みんなも使ったら？ってなることの方が多いです。

ですが、いざ使おうとすると構文の記号の位置だったり、真偽の位置関係がおぼろげでググってしまうことがあります。毎回これだとうーん、めんどくさいってなりがちなのでいっそのことゴロ合わせで覚えてしまいましょう。

こればっかりは記号の意味を考え出すと沼にハマって時間がかかります。僕は以下に仕事に時間を使わないかをモットーに生きている人間なので一瞬考えてめんどくさそうなものはどれだけ簡単に出来るかを考えるクセがついてしまっています。もちろん好きな言葉は「効率化」です。

そこで活躍するのが「条件？シンコロギ」です。シンコロギがなにを指すのか、どんな陰の団体なのか、どこの密輸組織なのかは分かりません。ただシンコロギはシンコロギなのです。シンコロギの存在そのものが人々のの生活を支えているのです。

プログラムを書いている時に、「この条件なんだけど‥‥」と耳にしたときは既にシンコロギです。

「条件?」といったらもう反射的に「シンコロギ」となります。

という冗談はさておき、「条件？シンコロギ」は三項演算子の左から順の位置を表しています。「（条件）? 真 : 偽;」ですね。「条件？」は条件の後ろには「?」クエスチョンマークが来ます。その次の「シンコロギ」は「真」の場合、「：」コロン、「偽」の場合と続きます。シンコロギには「;（セミコロン）」が含まれていないですが、JavaScriptの基本ルールの分の末尾には「;」ってことで必ず付けるので割愛しています。

これでもう条件反射的に「条件？」「シンコロギ」という言葉のキャッチボールが出来るようになりました。ぜひ、条件?シンコロギゲームをお友達とやってみてください。

どんな場面で便利なのか具体的に

三項演算子の例を挙げましたがまだまだ使い勝手の良さが伝わらないはずなので、今度は実際のコードで示してみたいと思います。

let hantei = true;
let userRank;
let shinkorogi = hantei ? userRank = "SS" : userRank = "F";
console.log('あなたのシンコロギランクは" + shinkorogi + "です");

先ほどの条件？シンコロギの法則に当てはめれば難なくよめるのではないでしょうか。ここでif()文を使うよりもオイシイメリットがあるのがお分かりでしょうか？

行数が抑えられる
if()文では出来ない、「変数」に値を直代入出来る

ただデメリットとしては

三項演算子をあまり理解していない人がソースを読むのに苦労する。

デメリットをいかに潰すかが課題ですね。でももうそんなことは簡単です。あなたが教えてあげればいいんです。さっき三項演算子を習得したことと同じことを使って広めていきましょう。条件？

入れ子が3項演算子を害悪に替えた

実は3項演算子って入れ子に出来るんですよね。

 condition1 ? value1　: condition2 ? value2　: condition3 ? value3　: value4;

何書いてあるか分かりますか??僕は「if()でかけよカ〇野郎」と思っていました。こっちにかんしては今もif()推奨の方がいいじゃ、とすら感じています。

仕方ないのでこれを読み解くんですが、じつは、結構容易にできちゃうんですよね。

上記例を日本語にすると

condition1が真だったらvalue1ね、偽だったら、うーん、、、あ、こっちのcondition2で決めるわ。condition2が真だったらvalue2で。偽だったら、うーん、決めかねるなあ、じゃcondition3が真だったらvalu3で、偽だったらvalue4にします！（ドヤ）

みたいな感じになりますかね。別に敵意はありません。ただ、これやるんだったらif()文でよくね？ってなるんですよね。。。たぶん同じ考えの方多い気がする。上のサンプルをif()文にすると、

 if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }

え、これで良くない？だってさっきの、condition1、condition2、condition3が出るたびに「条件？」「シンコロギ…だと」が出て気じゃうんで、おじさん焦っちゃう。

最初からif()分で分かりやすく書いてくれればこんなことならんと思うんだけど……

どうも三項演算子の入れ子は作業者のクセか、自己満、あドヤにしか見て取れなくて。
でも、皆さん、読めましたよね！三項演算子を大体わかればソースもずいぶん楽に読めます。