TypeScriptのコードを読んでいると、
突然こんな記号が出てきます。
const btn = document.getElementById("add")!;
user?.name
「!って何？」
「?は三項演算子じゃないの？」
と混乱した人も多いはずです。
私自身、DOM操作をTypeScriptで書き始めた頃、
エラーを消すために意味も分からず ! を付けていました。
結論から言うと、
これらは TypeScriptの型安全を保つための記号 です。
「!」の意味（ノンヌルアサーション）
const btn = document.getElementById("add")!;
この ! は、
「この値は null や undefined ではありません」
と コンパイラに断言する記号 です。
TypeScriptは安全のため、
document.getElementById("add");
が HTMLElement | null になると警告します。
それに対し ! を付けると、
HTMLElement
として扱われます。
注意点：実行時の安全は保証しない
const el = document.getElementById("none")!;
el.textContent = "test"; // 実行時エラー
! は
型チェックを黙らせるだけ で、
実行時の安全までは保証しません。
「?」の意味①：オプショナルチェイニング
user?.name
これは、
userが存在する場合だけ name を取得する
という意味です。
if (user) {
user.name
}
を短く書いたものです。
なぜ必要なのか
JavaScriptでは、
null.name
のようなアクセスは即エラーになります。
?. を使えば、
- null / undefined の場合は undefined を返す
- エラーで止まらない
という安全な挙動になります。
「?」の意味②：オプショナルプロパティ
type User = {
name: string;
age?: number;
};
この ? は、
このプロパティはあってもなくてもよい
という意味です。
APIレスポンスやフォーム入力など、
不確定なデータを扱う場面で必須 になります。
なぜこれらの記号が重要なのか
TypeScriptは、
バグを「実行前」に減らす
ための言語です。
!→ 開発者の責任で保証する?→ 不確実性を許容する
という役割分担があります。
DOM操作やAPI通信など、
不確実な世界と向き合うための道具 だと考えると理解しやすくなります。
まとめ
!は「nullではないと断言する」?.は「安全にアクセスする」?（型定義）は「存在しない可能性を許可する」
意味を理解せず使うと危険ですが、
理解した上で使えば TypeScript最大の武器 になります。
コメント