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

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

これは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;

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