□はじめに

こんにちは！株式会社iimonでフロントエンドエンジニアを担当している「奥島さん」です！

今回は新機能追加やバグ修正の際に、非nullアサーション（!）とオプショナルチェイニング（?）の使い方に確信が持てなかったため、正しく使うために改めて調べてみました！

□なぜ非nullアサーション（!）とオプショナルチェイニング（?）が必要なの〜

nullやundefinedを安全に扱い、コードの可読性とメンテナンス性を向上させるために必要みたいです。非nullアサーション（!）とオプショナルチェイニング（?）について役割と必要な理由についてみていきましょう。

□ (!) (Non-null assertion operator / 非null アサーション)ってなーに?

非nullアサーション（!）は、変数やオブジェクトのプロパティが「絶対にnullやundefinedではない」と確信した時に記載する記号です。このアサーションを使うことで、TypeScriptのコンパイラに「この値は必ず存在しているので、nullやundefinedのチェックは不要」と伝えることができるので便利ですね！

const human1 = {
    name: "ameku",
    age: "40",
};
  
const human2 = {
    name: "hideki",
    details: {
      age: "46",  // ageプロパティは存在する
    },
};
  

//出力結果！！
console.log(human1.age); // 出力は「40」
  
//human2.detailsプロパティがあり、その中の{ age: "46" }です。この場合、detailsが必ず存在することを確認しているため、非nullアサーション（!）を使用できますね。
console.log(human2.details!.age); // 出力は「46」

非nullアサーション（!）は、値が必ず存在することを前提に使用します。具体的には、「この値は絶対にある」と確信した場合に使います。しかし、もしその値が実際にnullやundefinedであった場合、実行時にエラーが発生します。そのため、非nullアサーションは「確信がある場合」のみ使用することが重要かと思います！

□ (?) (Optional chaining / オプショナルチェイニング)ってなーに?

オプショナルチェイニング（?.）は、変数やオブジェクトのプロパティにアクセスする際にnullやundefinedかわからない時に記載する記号です。このオプショナルを使うことで、nullやundefinedが含まれる可能性があるオブジェクトに対して、安全にアクセスできるようになり安心して居眠りできますね。


//human1 には details プロパティがあり、その中に age: 40 が含まれています。
const human1 = {
  name: "ameku",
  details: {
    age: 40,
  },
};


//human2 には details プロパティが存在せず、name プロパティのみが定義されています。
const human2 = {
  name: "hideki",
};


//出力結果！！
//オプショナルチェイニング（?.）があればエラーになりません！
console.log(human1.details.age); // 出力は「30」
console.log(human2.details?.age); // 出力は「undefined」

//オプショナルチェイニング（?.）がないとCannot read properties of undefined (reading 'age') 「未定義のプロパティを読み込めません」とエラーになります。
 console.log(human2.details.age);

オプショナルチェイニング（?.）を使わないでhuman2.details.age にアクセスしようとすると、Cannot read properties of undefined (reading 'age') 「未定義のプロパティを読み込めません」というエラーが発生してしまいます。オプショナルチェイニング（?.）は値が存在するかどうかわからない場合に使います！！！