Slide 1
Slide 1 text
Bengo4.com, Inc.
TypeScript を
より型安全に扱うプラクティス
2025.06.06
辻 佳佑
Slide 2
Slide 2 text
Bengo4.com, Inc.
辻 佳佑 Keisuke Tsuji
フロントエンドエンジニア
弁護士ドットコム株式会社
クラウドサイン
＜ 趣味 ＞
服作り・ボイトレ
＜ X アカウント ＞
@t0daaay
2
自己紹介
Slide 3
Slide 3 text
Bengo4.com, Inc.
型安全（Type Safety）とは、プログラム内で期待される型の値のみを許可し、
それ以外の型の値が誤って使われることを防ぐ仕組み のことを指す。
3
型安全とは
Slide 4
Slide 4 text
Bengo4.com, Inc.
基本的な
静的解析の設定で
型安全性向上 ⛑
4
Slide 5
Slide 5 text
Bengo4.com, Inc.
5
コンパイラオプション（ Type Checking）
● strict （9種類のオプションが有効に）
● noImplicitReturns
● noUncheckedIndexedAccess
● noPropertyAccessFromIndexSignature
● exactOptionalPropertyTypes
...など
Slide 6
Slide 6 text
Bengo4.com, Inc.
6
typescript-eslint
recommendedTypeChecked
その他必要に応じて個別に導入
Slide 7
Slide 7 text
Bengo4.com, Inc.
静的解析だけで安全？ 🤔
7
Slide 8
Slide 8 text
Bengo4.com, Inc.
8
フォーム送信データ
フォーム入力
type User = {
name: string,
email: string,
}
Slide 9
Slide 9 text
Bengo4.com, Inc.
9
type User = {
name: undefined,
email: string,
}
name は
string 型
って書いて
あるが？
フォーム送信データ
フォーム入力
type User = {
name: string,
email: string,
}
Slide 10
Slide 10 text
Bengo4.com, Inc.
10
API からの受信データ
API サーバー
type User = {
id: number,
name: string,
email: string,
}
Slide 11
Slide 11 text
Bengo4.com, Inc.
11
API からの受信データ
type User = {
id: number,
name: string,
}
email も取得
するって型に
は書いてある
が？
API サーバー
type User = {
id: number,
name: string,
email: string,
}
Slide 12
Slide 12 text
Bengo4.com, Inc.
TypeScript は実行時の型
チェックはしない
12
Slide 13
Slide 13 text
Bengo4.com, Inc.
Zod で
実行時の型チェック
をしよう🚀
13
Slide 14
Slide 14 text
Bengo4.com, Inc.
14
Zod
Zod は実行時のスキーマチェックライブラリとして有名。
単純な文字列から複雑にネストされたオブジェクトまで、さまざまなデータを検証
するためのスキーマを定義可能。
また、定義したスキーマから TypeScript の型を簡単に生成することも可能。
Slide 15
Slide 15 text
Bengo4.com, Inc.
15
入出力のスキーマを
定義して
Slide 16
Slide 16 text
Bengo4.com, Inc.
16
スキーマ通りか
実行時にチェック
Slide 17
Slide 17 text
Bengo4.com, Inc.
実行時の型チェックもできた ✌
17
Slide 18
Slide 18 text
Bengo4.com, Inc.
● コンパイラオプションの設定
● typescript-eslint 導入
● 実行時の型チェック
18
Slide 19
Slide 19 text
Bengo4.com, Inc.
これで完全に型安全なのか？
19
Slide 20
Slide 20 text
Bengo4.com, Inc.
20
Slide 21
Slide 21 text
Bengo4.com, Inc.
21
{
foo: 1,
}
obj が number
になっている 😱
string
なのに
型推論の限界
Slide 22
Slide 22 text
Bengo4.com, Inc.
ミュータブルな操作の型推論は
限界がある ...💀
22
Slide 23
Slide 23 text
Bengo4.com, Inc.
23
ミュータブルな操作を禁止する
eslint-functional/eslint-plugin-functional のデータをイミュータブルとして扱
うことを強制するルール immutable-data を適用。
Slide 24
Slide 24 text
Bengo4.com, Inc.
24
オブジェクトの変更でエラー
ミュータブルな記述がないかチェック
Slide 25
Slide 25 text
Bengo4.com, Inc.
25
ミュータブルな記述がない形に修正
Slide 26
Slide 26 text
Bengo4.com, Inc.
適切な型になった 👍
26
Slide 27
Slide 27 text
Bengo4.com, Inc.
ミュータブルな操作がなければ
完全な型安全？
27
Slide 28
Slide 28 text
Bengo4.com, Inc.
28
bar に型注釈して
型の一致検証
したった！
Slide 29
Slide 29 text
Bengo4.com, Inc.
型推論がアップキャスト
アップキャストで型が矛盾する
Slide 30
Slide 30 text
Bengo4.com, Inc.
型 実態
y が number
になっている😱
アップキャストで型が矛盾する
Slide 31
Slide 31 text
Bengo4.com, Inc.
型の一致の検証は satisfies で
これなら元の型推論が保持される
Slide 32
Slide 32 text
Bengo4.com, Inc.
探せば、型の抜け道は
まだある...💣
32
Slide 33
Slide 33 text
Bengo4.com, Inc.
33
TypeScript は型の表現力と利便性が優先され、健全性とトレードオフになっ
ている。
そもそも完全な型安全を目指していない
TypeScript の型安全性
Slide 34
Slide 34 text
Bengo4.com, Inc.
34
おわりに
型安全の設定は最初が肝心
後から型チェックを厳しくしようとすると、修正コストが高くなりがちなので、最初のうちに厳しめに
設定しておいた方がよい。
基本的な設定でも型システムは十分に実用的 （...じゃないですかね？）
コンパイラオプションを厳格に設定と、 typescript-eslint の導入だけでも、バランスよく型安全性
が確保される（個人的には実務で型の矛盾に困る場面に直面していない）。
Slide 35
Slide 35 text
Bengo4.com, Inc.
ありがとうございました