概要

動的型言語である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における型ガード設計とは、
“動的な言語においても、安全性と構造を両立させるための条件制御戦略である。”