三項演算子の省略記法まとめ

業務で見かけた便利な三項演算子の省略記法、初見は何だこれ？って思いますが、とても便利なのでまとめます。

実例

React/Vueなどでpropsで子コンポーネントに値を渡す時、例えばその値がAPIから受け取るもので、何かしらの理由でundefinedになって渡せないケースもある場合にエラーを回避する為の三項演算子です。

<SomeComponent
 data={fetchData ? fetchData.name : undefined}
/>

//これを↓こう省略できます

<SomeComponent
 data={fetchData?.name}
/>

次はfetchDataがあればfetchData、なければdefaultDataを使うというケースの三項演算子。

const data = fetchData ? fetchData : defaultData;

//これを↓こう省略できます

const data = fetchData ?? defaultData;

見慣れない記法が出てくると焦りましたが、からくりが分かればなんてことないですね。

そもそも三項演算子とは、二項演算子は？

以下のような計算は2つのオペランド (値や変数のこと)を操作するので、二項演算子です。

a + b
a - b
a * b
a / b
a && b

以下は3つのオペランドを操作するので、三項演算子です。

条件式 ? 式1 : 式2

三項演算子は条件分岐で使われますので、条件演算子とも呼ばれます。