オプショナルチェーン(?.)ってなに？

参照が nullish (null または undefined) の場合にエラーとなるのではなく、式が短絡され undefined が返されるところが異なります。関数呼び出しで使用すると、与えられた関数が存在しない場合、 undefined を返します。

例①

このコードは、studentsという配列に学生の情報が入っており、それぞれの学生がテニスをしているかどうかをチェックしています。forEachメソッドを使って配列をループし、includesメソッドを使ってtennisが含まれているかどうかを確認しています。最後に、学生の名前とテニスをしているかどうかをコンソールに出力しています。
①の場合、鈴木太郎さんはtennisが含まれていない為、falseが返ってきます。

例②

②の場合、鈴木太郎さんはsportsプロパティがそもそも存在しない為、エラーが返ってきます。

オプショナルチェーンを使用した場合

上記のように、オプショナルチェーンをsports?.includes('tennis')の部分で使用することで、sportsプロパティが存在しない場合でもエラーが発生せず、undefinedが返されます。

まとめ

例えば、フォームを作成する際に任意項目を作りたい時に、空配列返すという方法もあるがそういった対処法が使えない場合に、JS側で任意項目のプロパティに対してオプショナルチェーンを使用すれば、とりあえずエラーを回避することができるのでこの演算子はとても便利だなと思いました！