Javascript:条件（三項）演算子とは何？定義・読み方・使い方まとめ（例文あり）: How to read and use The Conditiong (Ternary) Operator with Demo code

Javascriptの条件（三項）演算子の定義・読み方・使い方について解説します。

if文をより簡潔に表現したい時によく使われる方法で、条件（三項）演算子は英語でThe Conditional (Ternary) Operatorと呼ばれ、Ternary Expressionと呼ばれることも多いです。

condition ? exprIfTrue: exprIfFalse

読み方は「もしconditionがtrueならexprIfTrueを実行する、さもなければexprIfFalseを実行する」というものです。

もっとシンプルに書くと以下のようになります。

A ? B : C

「もしAがtrueならBを実行、さもなければ（Aがfalseなら）Cを実行する」

英語にすると、"if A is true, execute B. If not (otherwise), execute C"ということになります。

JSXを含む場合はJSXの周りに()（丸括弧・parenthesis)、演算子の周りに{}(波括弧・single curly braces)をつけてコードを書きます。JSXの中身はdivで囲みます。

{A ? (
JSX
) : null}

Mozillaの例文を借りてきますとわかりやすいと思います。

var age = 26;
var beverage = (age >= 21) ? "ビール" : "ジュース";
console.log(beverage);

この場合は、var ageを26とします。var beverageは21以上ならビール、それ以下（20まで）はジュースということになります。ageに26を代入しているので、console.log(beverage)の答えはビールです。

nullを当てはめた場合は以下のとおりです。

function greeting(person) {
    var name = person ? person.name : "お客さん";
    return "やあ、" + name;
}

console.log(greeting({name: 'アリス'})); 
console.log(greeting(null));

var nameで、「もしpersonがtrueならperson.nameを表示、falseなら”お客さん”と表示する」と定義されています。表示するものはreturn後の"やあ、"+name です。

console.log(greeting({name: 'アリス'})); の場合は、personに名前があり、nameは’アリス'ですので、”やあ、アリス”と表示されます。

console.log(greeting(null()); の場合は、name(名前）がない(null)。つまり、personはnullとなってしまうので、名前のかわりに"やあ、お客さん”と表示されます。

参照記事：条件 (三項) 演算子（MDN web doct Mozilla)