JavaScriptのオプショナルチェイニング演算子(optional chaining)
#JavaScript(jQuery、そのたJS技術)

created: 2025/06/01, modified: 2025/06/01

標準のサムネイル 2024-06

GPTさんはいろいろ教えてくれる。config?.debug と見慣れない記述がでてきた、、これは、、

この ?. は 「オプショナルチェイニング演算子(optional chaining)」 と呼ばれる、ES2020 で追加されたJavaScriptの機能

config?.debug の意味

config が null や undefined でなければ、その中の debug を読みます。
もし config が null か undefined なら、式全体を undefined にして止めます。
null や undefined にアクセスしてエラーになるのを防げます。
特に 未初期化のオブジェクト や 非必須プロパティ を扱うときに便利です。

通常の書き方と比較

エラーになってしまう場合とオプショナルチェイニング

書き方 意味
obj?.prop obj が null/undefined でなければ prop を読む
obj?.[key] obj が定義されていれば key を使って読む
func?.() func が関数なら呼び出す(なければ何もしない)

よく使うパターン

オブジェクトの中のプロパティを安全に読む

  • user が null または undefined なら undefined を返す(エラーにならない)
  • user が定義されていれば user.name を返す

ネストされたオブジェクト

  • user が存在していないときも、TypeError を起こさず undefined を返す
  • 書き方がすっきりして、try-catch や冗長な && チェックが不要になる

配列アクセス

  • posts が null/undefined のときにエラーにならず、結果は undefined

関数が存在するか確認してから呼び出す

  • callback が関数でない(undefinedなど)なら何もしない
  • 存在していれば実行

?. + ?? よくある組み合わせ

  • ?? はnull合体演算子
  • user が null/undefined → name = 'Guest'
  • user.name が null/undefined → name = 'Guest'
  • それ以外なら name にちゃんとした値が入る