中級

オプショナルチェイニング（?.）でnull/undefinedアクセスのエラーを防ぐ

ネストしたプロパティの途中がnullやundefinedかもしれない場合、通常のドットアクセスではTypeErrorになります。?.を使うと、途中がnull/undefinedのときに例外を投げず、undefinedを返して処理を続けられます。

エラーメッセージの読み方

main.js:2

main.js

ファイル名

2

行番号 — 実際にクラッシュした行

TypeError

例外クラス — 何が起きたか。ここを検索するのが最短です

Cannot read properties of null (reading 'name')

内容 — 期待していたもの、または受け付けられなかったもの

このエラーが出る典型パターン

 1  const user = { profile: null };
 2  console.log(user.profile  .name);
                             ^

 1  const config = { settings: null };
 2  console.log(config.settings  .theme);
                                ^

 1  const response = { data: null };
 2  console.log(response.data  .items);
                              ^

 1  const account = { owner: null };
 2  console.log(account.owner  .email);
                              ^

 1  const order = { customer: null };
 2  console.log(order.customer  .address);
                               ^

よくある誤解

「存在確認は毎回if文で書くしかない」という思い込みは、?.を知らないと起きがちです。ネストが深いほど毎回のnullチェックは冗長になり、?.を使えば1箇所で安全に済みます。

実務での勘所

?.の効果は、その直後の1箇所だけでなく、そこから続くチェーン全体に及びます。a?.b.c.d()と書いた場合、aがnull/undefinedであれば、bやcへのアクセスはもちろん、d()という関数呼び出しさえも実行されずに式全体がundefinedになります。途中に副作用のある関数呼び出しが挟まっていても、その呼び出し自体が起きません。「?.を書いた場所だけが安全になる」のではなく「そこから右側のチェーン全体が短絡評価される」という理解が正確です。

演習をはじめる

関連するエラー

• undefinedのプロパティ読み取りエラーの原因undefinedになった値のプロパティやメソッドにアクセスしようとしたときに出る、JavaScript学習者が最も多く遭遇するエラーです。
• JSON.parse()が投げるSyntaxErrorは実行時エラーであるJSON.parse()に不正な形式の文字列を渡すとSyntaxErrorを投げますが、これはJavaScript自体の構文解析エラーとは異なり、関数呼び出しの結果として実行時に発生する例外です。