Optional Chaining

Optional Chainingを分かりやすく

Optional Chainingとは、JavaScriptとTypeScriptで使える特殊な構文で、オブジェクトのプロパティやメソッドが存在するかどうかを確認することができます。その特徴は、?.という記法を使うことで、オブジェクトがnullやundefinedである場合でもエラーを吐かずにその場でundefinedを返す点にあります。

例えば、映画情報のAPIから情報を取得して表示するアプリを考えてみましょう。このAPIは映画のジャンルが存在する場合にはジャンルを、存在しない場合にはnullを返すとします。従来のアクセス方法では、ジャンルがnullの時にプロパティにアクセスしようとするとエラーが発生しますが、Optional Chainingを使うことで、安全にアクセスすることが可能になります。

Optional Chainingの歴史的変遷

Optional ChainingはJavaScriptのECMAScript 2020（ES11）で正式に採用された機能で、それ以前は存在しなかった機能です。TypeScriptでも3.7からサポートされるようになりました。

これまでJavaScriptやTypeScriptでは深いネストにあるプロパティにアクセスするためには、各階層でnullチェックを行う必要がありました。しかし、Optional Chainingが導入されることで、この手間が大幅に減り、コードがシンプルで読みやすくなりました。

Optional ChainingとJamstackの関係

Jamstackの開発では、APIからデータを取得して表示することが多くあります。APIから取得するデータは常に同じ形状であるとは限らず、場合によってはプロパティが存在しない（nullまたはundefined）場合もあります。このような場合に、Optional Chainingは非常に有用です。さらに、Next.jsのようなフレームワークを使用すると、型安全な言語であるTypeScriptと組み合わせて、更に安全なコードを書くことが可能です。

Optional Chainingを使うメリット

エラーハンドリングが容易になる

Optional Chainingを使用することで、存在しないプロパティにアクセスした場合でもエラーを吐かず、そのままundefinedを返します。これにより、nullチェックなどのエラーハンドリングが容易になります。

コードがシンプルになる

Optional Chainingを使うと、複数階層に渡るプロパティにアクセスする際のコードが大幅にシンプルになります。その結果、コードの可読性も向上します。

TypeScriptとの相性が良い

TypeScriptはOptional Chainingをサポートしています。これにより、型安全性を損なうことなくOptional Chainingを利用することができます。

Optional Chainingを実装

Next.jsとTypeScriptでOptional Chainingを使ってみましょう。以下に、Optional Chainingを使ってAPIから取得したデータを安全に表示するコンポーネントの例を示します。

type Movie = {
  title: string
  genre?: {
    name: string
  }
}

const MovieComponent = ({ movie }: { movie: Movie }) => {
  return (
    <div>
      <h1>{movie.title}</h1>
      <p>{movie.genre?.name}</p>
    </div>
  )
}

ここで、映画のジャンルmovie.genreは存在しない可能性があるため、?.を使ってアクセスしています。このコードでは、movie.genreがnullまたはundefinedであった場合でも、エラーを発生させずにundefinedを返すため、安全にコードを実行できます。

Optional Chainingを学ぶ

Optional Chainingを学ぶために、以下の資料が役立つでしょう。

これらの資料を活用して、Optional Chainingの機能と使い方を深く理解しましょう。