😊
TypeScriptの型ガードについて

2025/07/28に公開
今回は「型ガード」について改めて調べたため、記事としてまとめています！
この記事を読めば、あなたはTypeScriptの型ガードの基本を理解し、JavaScriptでありがちな「あれ？」を未然に防ぎ、もっと安全で分かりやすいコードを書けるようになります。そして、きっと「型ガード、面白い！実際に試してみたい！」と感じてもらえるはずです！🚀

 1. JavaScriptの「あれ？」をなくそう！型チェックの重要性とは？🔍まず、TypeScriptと型ガードの話に入る前に、なぜ「型」がそんなに大切なのか、少しだけお話しさせてくださいね。
私たちが書くプログラムの多くは、異なる種類のデータを扱います。例えば、数字だったり、文字の羅列だったり、真偽（はい/いいえ）だったり。これらのデータの種類を「型」と呼びます。
JavaScriptは、とっても自由な言語なんです。「動的型付け言語」といって、変数を宣言する時に「これは数字だよ」「これは文字列だよ」と教えてあげなくても、プログラムが実行される時に自動で判断してくれます。とても便利ですよね！
でも、この「自由さ」が、先ほどのような「heightがheigthになっちゃって、気づいたらNaN！」みたいな、意図しないエラーを引き起こす原因にもなるんです。このようなエラーの多くは「間違った種類の値が使われた」という「型エラー」として説明できます。

 TypeScriptは、あなたのコードの「警備員さん」👮そこでTypeScriptの登場です！TypeScriptは、あなたの書いたJavaScriptのコードが実行される前に（これを「静的」と呼びます）、「このデータの型は正しいかな？」「ここでこの使い方をしたら、変なことにならないかな？」とチェックしてくれる、賢い「型チェック」ツールなんです！
まるで、家を出る前に「鍵閉めたかな？」「財布持ったかな？」と確認してくれる警備員さんのようなイメージですね。TypeScriptは、JavaScriptの文法をそのまま使える上に、この「型システム」という追加のレイヤーを提供してくれます。だから、普段書いているJavaScriptのコードは、そのままTypeScriptのコードとしても使えるんですよ。
TypeScriptは、変数にどんな値が代入されるかを自動で推測してくれる「型推論」という機能も持っています。例えば、let helloWorld = "Hello World";と書けば、TypeScriptは自動的にhelloWorldがstring型だと判断してくれるんです。すごいですよね！

 2. 型ガードってなあに？🤔 「もし〜だったら」を安全にする魔法！「TypeScriptがコードをチェックしてくれるのは分かったけど、型ガードって何？」って思いますよね。
TypeScriptは、非常に柔軟な「ユニオン型」というものを持っています。これは「この変数は、A型かB型、どちらかの型ですよ！」と宣言できる型のことなんです。
例えば、「数字」か「数字の配列」のどちらかが入ってくる可能性がある関数を考えてみましょう。
function getLength(obj: number | number[]) {
  // objが数字だったらlengthプロパティはないし、配列だったらlengthがある...どうしよう？
  // return obj.length; // TypeScriptが怒る！
}
この時、TypeScriptはobjがnumber型かもしれないし、number[]型かもしれないので、obj.lengthにアクセスしようとすると「number型にはlengthプロパティはないよ！」と教えてくれます。賢いですよね！
でも、私たちはコードの中で「もしobjが配列だったらこうする、数字だったらこうする」というように、状況に応じて処理を変えたいことがありますよね？
ここで「型ガード」の出番です！🛡️
型ガードとは、コードの特定のブロック内で変数の型をより具体的な型に絞り込む（＝ナローイングする）ための仕組みのことです。
例えるなら、空港の保安検査場のようなものです。手荷物検査（型ガード）をすることで、「この人は危険物を持っていない（型が安全である）」と確認し、次のステップ（具体的な処理）に進める、といったイメージです。
JavaScriptで普段使っているif文やtypeof演算子などが、そのままTypeScriptの型ガードとして機能するんですよ。それでは、どんな型ガードがあるのか、具体的に見ていきましょう！

 3. いろんな型ガードを使ってみよう！💡 具体例でマスター！型ガードにはいくつか種類があります。基本的なものから、ちょっと応用的なものまで、一緒に見ていきましょう！

 3-1. typeof 型ガード: 一番身近な「型」のチェック！これはJavaScriptでもよく使う、一番基本的な型ガードです。変数の「型」が何かを文字列で教えてくれます。
function printValue(value: string | number) {
  if (typeof value === "string") { // ここで value は string 型に絞り込まれる！
    console.log(`文字列です: ${value.toUpperCase()}`); // stringなので toUpperCase() が使える
  } else { // ここでは value は number 型に絞り込まれる！
    console.log(`数値です: ${value.toFixed(2)}`); // numberなので toFixed() が使える
  }
}

printValue("hello"); // "文字列です: HELLO"
printValue(123.456); // "数値です: 123.46"
どうでしょう？typeof value === "string"という条件のおかげで、ifブロックの中ではvalueがstring型として扱われ、.toUpperCase()のようなstring型特有のメソッドが安全に使えるようになるんです。JavaScriptのtypeofで判別できる型は以下の通りです:
"string"
"number"
"boolean"
"undefined"
"function"
"bigint"
"symbol"

 3-2. instanceof 型ガード: オブジェクトの「出自」をチェック！これは、あるオブジェクトが特定のクラスのインスタンスであるかどうかをチェックする型ガードです。JavaScriptのinstanceof演算子と同じですね。
class Dog {
  bark() { console.log("ワン！"); }
}

class Cat {
  meow() { console.log("ニャー！"); }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) { // ここで animal は Dog 型に絞り込まれる
    animal.bark(); // Dogなので bark() が使える
  } else { // ここで animal は Cat 型に絞り込まれる
    animal.meow(); // Catなので meow() が使える
  }
}

const myDog = new Dog();
const myCat = new Cat();

makeSound(myDog); // "ワン！"
makeSound(myCat); // "ニャー！"
これで、animalがDogなのかCatなのかを確実に判断し、それぞれのクラスに合ったメソッドを安全に呼び出せるようになりました。クラスを扱うことが多い場面で大活躍しますよ！

 3-3. in 演算子による型ガード: プロパティの「有無」をチェック！オブジェクトが特定のプロパティを持っているかどうかを確認したいときに便利なのがin演算子です。
interface Car {
  drive(): void;
}

interface Boat {
  sail(): void;
}

function operateVehicle(vehicle: Car | Boat) {
  if ("drive" in vehicle) { // vehicleが'drive'プロパティを持っていたらCar型
    vehicle.drive();
  } else { // そうでなければBoat型
    vehicle.sail();
  }
}

const myCar: Car = { drive: () => console.log("ブーン！") };
const myBoat: Boat = { sail: () => console.log("スイスイ〜") };

operateVehicle(myCar);  // "ブーン！"
operateVehicle(myBoat); // "スイスイ〜"
これで、vehicleがdriveメソッドを持っているかどうかでCarとBoatを判別できるようになりましたね。特定のプロパティの有無で型を判断する際にとても役立ちます。

 3-4. ユーザー定義型ガード: あなただけのオリジナル型ガードを作ろう！🎨ここまでの型ガードは、JavaScriptの組み込み機能を利用したものでした。しかし、もっと複雑な条件で型を絞り込みたい場合や、特定のインターフェースに合致するかどうかをチェックしたい場合もありますよね？
そんな時に使うのが「ユーザー定義型ガード」です！これは、関数の戻り値の型を「parameterName is Type」という特殊な形で宣言することで、TypeScriptに「この関数がtrueを返したら、引数のparameterNameはType型だよ！」と教えてあげる魔法のような機能なんです。
interface AdminUser {
  id: number;
  name: string;
  role: "admin";
}

interface GuestUser {
  id: number;
  name: string;
  role: "guest";
  guestId: string;
}

// ユーザー定義型ガード！
function isAdmin(user: AdminUser | GuestUser): user is AdminUser {
  return user.role === "admin";
}

function displayUser(user: AdminUser | GuestUser) {
  if (isAdmin(user)) { // ここで user は AdminUser 型に絞り込まれる
    console.log(`管理者ユーザー: ${user.name} (ID: ${user.id})`);
    // AdminUser型なので role が "admin" であることを保証できる
  } else { // ここで user は GuestUser 型に絞り込まれる
    console.log(`ゲストユーザー: ${user.name} (ゲストID: ${user.guestId})`);
    // GuestUser型なので guestId にアクセスできる
  }
}

const admin = { id: 1, name: "太郎", role: "admin" } as AdminUser;
const guest = { id: 2, name: "花子", role: "guest", guestId: "abc-123" } as GuestUser;

displayUser(admin); // "管理者ユーザー: 太郎 (ID: 1)"
displayUser(guest); // "ゲストユーザー: 花子 (ゲストID: abc-123)"
isAdmin関数を見てください。戻り値の型がuser is AdminUserとなっていますね。これにより、isAdmin(user)がtrueを返した場合、TypeScriptはifブロック内でuserをAdminUser型として扱ってくれるんです。これは、あなたのコードの安全性を格段に上げてくれる強力なツールですよ！🚀

 4. 型ガードの落とし穴？🚫 注意点とベストプラクティスここまでで型ガードの便利さを感じてもらえたでしょうか？でも、いくつか知っておいてほしい注意点と、より良いコードを書くためのコツをお伝えしますね。

 4-1. TypeScriptの型は「消える」？！👻一番大切なことかもしれません。実は、TypeScriptで書いた「型」の情報は、コードがJavaScriptに変換される（コンパイルされる）時にすべて消えてしまいます！
「え、じゃあ意味ないじゃん！」って思うかもしれませんが、そんなことはありません。型情報は、あくまでコードを書いている時やコンパイルする時に、間違いがないかをチェックするために使われるんです。実行時には、クリーンなJavaScriptコードとして動きます。
だからこそ、型ガードのようにtypeofやinstanceofといった実行時にも動くJavaScriptの機能を使って、型を絞り込む必要があるんですね。

 4-2. 構造的型付けってなに？柔軟さと注意点TypeScriptは「構造的型付け」という考え方に基づいています。これは、「もし2つのオブジェクトが同じ形（プロパティの名前と型）を持っていたら、それらは同じ型とみなされる」というものです。
interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const obj = { x: 12, y: 26, z: 89 };
logPoint(obj); // エラーにならない！
objはPoint型として宣言されていませんが、xとyという必要なプロパティを持っているため、logPoint関数に渡してもエラーになりません。これはTypeScriptの柔軟さの源ですが、JavaやC#のような「名目型付け」に慣れていると、最初は少し驚くかもしれませんね。
この特性を理解しておくと、型ガードを使う際にも「形」を意識したチェックができるようになります。

 4-3. 厳格なチェックモードを活用しよう！TypeScriptには、より厳格に型チェックを行うためのコンパイラオプションがあります。例えば、"noImplicitAny": trueを設定すると、型推論でany型になってしまう場合にエラーを出してくれます。any型はTypeScriptの型チェックを無効にする「ワイルドカード」のようなものなので、極力使わないようにするのが安全なコードへの第一歩です。
"strict": trueオプションを設定すると、これを含む多くの厳格なチェックが有効になるので、ぜひtsconfig.jsonに設定してみてくださいね。

 まとめ：型ガードでJavaScriptのコードを強くしよう！💪今回の記事では、TypeScriptの型ガードについて深く掘り下げてきました。
JavaScriptの動的な性質がもたらす「型エラー」を、TypeScriptの静的型チェックが実行前に見つけてくれること。

型ガードは、コードの特定のブロック内で変数の型をより具体的に絞り込む「魔法」であること。

typeof、instanceof、in演算子といった組み込みの型ガードの活用法。
より複雑な条件で型を絞り込むためのユーザー定義型ガードの作り方。
TypeScriptの型がコンパイル時に消えることや、構造的型付けの考え方、厳格なチェックモードの活用など、注意点とベストプラクティス。
これらを理解し、実践することで、あなたのJavaScript（そしてTypeScript）コードは、より堅牢で、安全で、そして何より未来の自分やチームメイトにも優しい、読みやすいものになるはずです。
TypeScriptの型ガードについて

1. JavaScriptの「あれ？」をなくそう！型チェックの重要性とは？🔍

TypeScriptは、あなたのコードの「警備員さん」👮

2. 型ガードってなあに？🤔 「もし〜だったら」を安全にする魔法！

3. いろんな型ガードを使ってみよう！💡 具体例でマスター！

3-1. `typeof` 型ガード: 一番身近な「型」のチェック！

3-2. `instanceof` 型ガード: オブジェクトの「出自」をチェック！

3-3. `in` 演算子による型ガード: プロパティの「有無」をチェック！

3-4. ユーザー定義型ガード: あなただけのオリジナル型ガードを作ろう！🎨

4. 型ガードの落とし穴？🚫 注意点とベストプラクティス

4-1. TypeScriptの型は「消える」？！👻

4-2. 構造的型付けってなに？柔軟さと注意点

4-3. 厳格なチェックモードを活用しよう！

まとめ：型ガードでJavaScriptのコードを強くしよう！💪

Discussion
