Null安全な書き方(??・?.)

このレッスンでは、JavaScriptのNull安全な書き方(??・?.)を学び、値が存在しないデータを安全に扱えるようになることを目標にします。「JavaScript オプショナルチェーン 使い方」「JavaScript null undefined 違い」で調べている方向けです。

??(null合体演算子)は、左側がnullやundefinedのときだけ右側の値を使います。?.(オプショナルチェーン)は、値が存在しないときにエラーにならずundefinedを返してくれます。「住所が登録されていない場合はエラーで止まらずに『未設定』と表示したい」といった、データが欠けている可能性がある場面で威力を発揮します。比較的新しい構文ですが、今ではモダンなコードの定番です。

サンプルコードでは、user.addressがnullの場合でもuser.address?.cityはエラーにならずundefinedを返し、それを?? "住所未設定"で代わりの文字列に置き換えています。?.と??を組み合わせることで、「存在するかどうか分からないプロパティ」に安全にアクセスしつつ、代わりの表示まで一気に書けます。

初心者がよくつまずくのが、??と||の違いです。||は左側が0や空文字""のような「falsyな値」でも右側に切り替わってしまいますが、??はnullとundefinedのときだけ切り替わります。「点数が0点のときも0を表示したい」ようなケースでは??を使わないと意図しない結果になるので注意が必要です。

実際の開発現場では、APIから返ってくるデータの一部が欠けていることは珍しくありません。オプショナルチェーンとnull合体演算子を使いこなせると、いちいちif文で存在確認をしなくても安全にコードを書けるようになり、エラーによるアプリのクラッシュを防ぐ実践的なテクニックとして重宝されます。