【JavaScript/TypeScript】?. と !. の違い

2022 11/16

2022年1月3日 2022年11月16日

URLをコピーしました！

副業先のフロントエンド開発で!.を初めて見て「?.は知っているけど!.は知らないぞ？」となったのでこの機会に両者の特徴や違いをまとめておこうと思う。

まず、両者の演算子の読み方？名前？は以下のとおり。

?.：オプショナルチェーン演算子
!.：非nullアサーション演算子

タイトルには「違い」と書いているが直接的な比較ではなく、それぞれが「どんなものなのか？」についてまとめる記事にする。

?.（オプショナルチェーン演算子）

?.はオプショナルチェーン演算子と言う。もしくはオプショナルチェイニングと呼ばれていたりするのでどちらでも良いかと思う。（どちらでも通じる）

ちなみにこれはTypeScriptではなくJavaScriptの機能。

あわせて読みたい

オプショナルチェーン (?.) – JavaScript | MDN オプショナルチェーン (optional chaining) 演算子 (?.) は、接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明…

この演算子の機能はオブジェクトやクラスのプロパティにアクセスしようと思った時にそのプロパティがnullishな値の場合、?.時点でコードの実行を終了しundefinedを返却する。

nullishは「null または undefined」のこと。

極端な例だがサンプルコードを書いてみる。

let org;

console.log(org); // undefined
console.log(org.length); // error: Uncaught TypeError: Cannot read properties of undefined (reading 'length')
console.log(org?.length); // undefined

変数orgはundefinedと定義されているので、.lengthで文字列の長さを取得しようとするとエラーになる。（文字列型のデータじゃ無いので当たり前）

ただ、?.を使うとエラーにはならず、undefinedを返却する。

これはTypeScriptの領域になるが、オプショナルチェーン演算子が入った式を変数に格納した場合、その変数のデータ型は必ず○○ | undefinedになる。

type User = {
	age: number
	name?: string
}

const user: User = {
	age: 30
}

const nameLength = user.name?.length // データ型は number | undefined

記事タイトルから若干脱線するけど、オプショナルチェーン演算子と似たような機能を持つnull合体演算子（??）との比較や使い分けについて解説された記事があったので貼っておく。

Enjoy IT Life

【JavaScript】Null合体(Nullish coalescing)とオプショナルチェーン(Optional chaining)の基本 | Enjoy IT… 目次1 Null合体演算子（Nullish coalescing operator）について2 Null合体演…

!.（非nullアサーション演算子）

!.は非nullアサーション演算子と呼ぶ。

これはJavaScriptではなくTypeScriptの機能。

この演算子の機能は、nullishの可能性のあるプロパティがnullishではないこと、つまりnullでもundefinedでもないことをコンパイラーに教えてあげる（保証してあげる）こと。

名前が「非null〜」であるが、nullish（null または undefined）を指す。

先述したnull合体演算子（??）に関しても「nullじゃなかったら左辺をそのまま、nullだったら右辺を返す」ではなく「nullishだったら左辺をそのまま、nullishだったら右辺を返す」である。英語表記がNullish coalescingでしっかりとnullishと書かれている。（「nullish合体演算子」「非nullishアサーション演算子」の方が絶対分かりやすいよね）

先ほど使ったサンプルコードで名前をオプションのプロパティを持つユーザーオブジェクトの名前の文字列長さに100を足してコンソールに出力するコードを書く。

type User = {
  age: number
	name?: string
}

const user: User = {
	age: 30
}

const nameLength = user.name?.length

console.log(nameLength + 100) // Object is possibly 'undefined'.

nameLengthがundefinedの可能性を持つ以上、undefined + 100はエラーになる。

このコードではnameを持たないオブジェクトを例にしているが、nameはオプショナルなプロパティであり、操作するオブジェクトはnameを持っている条件で考える。

type User = {
	age: number
	name?: string
}

const user: User = {
	age: 30,
	name: 'サンプル太郎'
}

const nameLength = user.name.length // Object is possibly 'undefined'.

console.log(nameLength + 100)

userオブジェクトにname： 'サンプル太郎'を定義&オプショナルチェーン演算子を消したとしてもUser型の段階でnameはstring | undefinedなので、user.name.lengthが「Object is possibly ‘undefined’.」でコンパイルエラーになり、やはりuser.name?.lengthにする必要がある→出力コードはエラーになる。

もったいぶった説明になってしまったけど、ここで!.の登場。

type User = {
	age: number
	name?: string
}

const user: User = {
	age: 30,
	name: 'サンプル太郎'
}

const nameLength = user.name!.length // number

console.log(nameLength + 100) // 106

user.name!.lengthでnameプロパティがnullsihではないことを保証することでnumber型となり、コンソールの出力は成功する。