概要
動的型言語であるJavaScriptでは、実行時に変数の型を正しく識別し、安全に扱うための明示的な制御構造が必要となる。
それが「型ガード（type guard）」である。
JavaScript単体では typeof や instanceof などのプリミティブな手段に限られるが、TypeScriptと組み合わせることで、型推論と条件分岐の連動による安全な制御フローを構築できる。
本稿では、JavaScriptおよびTypeScriptにおける型ガードの設計的活用法、条件分岐との連携、再利用可能な判定ロジックの分離戦略について解説する。
1. 型ガードの基本：typeof, instanceof
function print(value: string | number) {
if (typeof value === 'string') {
console.log(value.toUpperCase()); // ✅ stringと推論される
} else {
console.log(value.toFixed(2)); // ✅ numberと推論される
}
}
- ✅
typeofはプリミティブ型（string, number, boolean など）に適用 - ✅ 型推論によってブロック内で型が絞り込まれる
2. オブジェクト判定には in や instanceof
class Dog {
bark() {}
}
class Cat {
meow() {}
}
function speak(pet: Dog | Cat) {
if (pet instanceof Dog) {
pet.bark();
} else {
pet.meow();
}
}
- ✅
instanceofはクラスベースの判定に強い - ✅ コンストラクタを利用したインスタンス識別が可能
3. カスタム型ガード（Type Predicate）
type Admin = { role: 'admin'; privileges: string[] };
type User = { role: 'user'; name: string };
function isAdmin(user: Admin | User): user is Admin {
return user.role === 'admin';
}
function handle(user: Admin | User) {
if (isAdmin(user)) {
console.log(user.privileges);
} else {
console.log(user.name);
}
}
- ✅ 戻り値の型アノテーション
user is Adminによって、ブロック内で明確な型が推論される - ✅ 複雑な条件判定ロジックを外部に分離可能
4. 再利用可能な型ガードの分離設計
export function isString(value: unknown): value is string {
return typeof value === 'string';
}
export function isNonEmptyArray<T>(value: unknown): value is T[] {
return Array.isArray(value) && value.length > 0;
}
- ✅ 型ガード関数はライブラリ的に共通化できる
- ✅ 各ドメインでの型制御を 関数単位で再利用可能に設計
5. 型ガードと条件分岐の戦略的分離
- ❌
if (...) { typeof === ... && instanceof === ... && Array.isArray() && ... }のように複数条件を混在させない - ✅ 判定ロジックは型ガードに抽出し、主処理と条件処理を分離する
設計判断フロー
① 型の振る舞いに応じて処理を分岐させているか？
② 判定ロジックは読みやすく・再利用しやすいよう切り出されているか？
③ `typeof` / `instanceof` / `in` を正しく選択しているか？
④ ブロック内で型が明示されるように制御しているか？
⑤ 条件式が肥大化していないか？ → 型ガードへ分離できないか？
よくあるミスと対策
❌ typeof による不正な型判定（nullは "object"）
→ ✅ null チェックは別途行い、typeofは補助的に使う
❌ 型判定ロジックが複雑化して分岐が読めない
→ ✅ 型ガード関数に切り出して整理・明示化
❌ instanceof を配列などに対して使う
→ ✅ Array.isArray() を使用。型に適した判定を選択する
結語
型ガードとは「型を確認する」ためのものではない。
それは**“型に応じた安全な制御フローと、構造的に整理された条件設計を構築するための手段”**である。
- 型推論を最大限に活かし、不要な型アサーションを排除
- 判定ロジックは抽象化し、ドメインに応じて再利用可能に構築
- 条件式をデザインの一部と捉え、その可読性と拡張性を常に意識する
JavaScriptにおける型ガード設計とは、
“動的な言語においても、安全性と構造を両立させるための条件制御戦略である。”