【入門編】ユーザー定義型ガード (User-Defined Type Guards) – JavaScript実践ガイド

こんにちは！現場でバリバリとコードを書きながら、日々「JavaScriptって本当に奥が深いな」と楽しんでいるエンジニアです。

今日は、TypeScriptを触り始めた人が必ず一度は「これ、どうやって解決すればいいの？」と頭を抱える、「ユーザー定義型ガード」という魔法についてお話しします。

難しそうな名前ですが、大丈夫。実はこれ、私たちの日常生活にある「仕分け作業」と同じくらいシンプルで、とっても便利な仕組みなんですよ。

—

1. なぜ「型」で悩むのか？（スーパーのレジの例え）

想像してみてください。あなたは今、スーパーのレジ打ちのバイトをしています。
ベルトコンベアの上には「リンゴ」も「洗剤」も「雑誌」も、バラバラに流れてきます。

もし、目の前の物体が「リンゴ」なのか「それ以外」なのか分からないまま、適当にカゴに詰めようとしたらどうなるでしょう？洗剤の上にリンゴを置いて潰してしまったり、大変なことになりますよね。

JavaScriptの世界でも同じです。データが「数字」なのか「文字列」なのか「オブジェクト」なのか、プログラムが確信を持てないと、安全に処理ができないんです。

そこで登場するのが「型ガード」です。

2. ユーザー定義型ガードとは？

普段の `typeof`（これは数字？文字？）といったチェックだけでは限界があります。そこで、「この箱の中身は、私が責任を持って『リンゴ』だと保証します！」とプログラムに教えてあげるのが、「ユーザー定義型ガード」です。

これは、関数が `arg is Type` という特殊な合言葉を返すことで実現します。

さっそくコードで見てみよう

例えば、「猫」なのか「犬」なのかを見分けるプログラムを作ってみましょう。

// 1. 猫という型を定義
interface Cat {
meow: () => void; // 猫は鳴くことができる
}

// 2. 犬という型を定義
interface Dog {
bark: () => void; // 犬は吠えることができる
}

// これが「ユーザー定義型ガード」の関数です
// 「pet is Cat」という記述が、魔法の合言葉！
function isCat(pet: any): pet is Cat {
// もし pet に meow という機能があれば、それは猫だと判断する
return (pet as Cat).meow !== undefined;
}

// 実際に使ってみましょう
function playWithPet(pet: Cat | Dog) {
if (isCat(pet)) {
// ここに入った瞬間、TypeScriptは「あ、これは猫だ！」と理解します
pet.meow();
} else {
// ここに来るということは、猫じゃないから犬ですね
pet.bark();
}
}

3. なぜこの「魔法」が必要なのか？

「別に `if` 文でチェックすればいいじゃない？」と思うかもしれません。でも、普通の `if` 文だと、TypeScriptという優秀な秘書が「本当にそのデータ、その操作をして大丈夫？」と疑い続けてくれるんです。

この `pet is Cat` という記述を書くことで、秘書（TypeScript）に対して「私が責任を持ってチェックしたから、このブロックの中では安心して猫として扱っていいよ！」と、明確な許可証を渡しているようなものなんです。

これで、コードを書いている最中に「このプロパティは存在しないかもしれません」という真っ赤なエラーに怯える必要がなくなります。

—

初学者のあなたへ：つまずいた時のヒント

最初は、この `arg is Type` という記法が少し不思議に見えるかもしれません。「なんで関数の中で型を宣言するの？」と不思議に思って当然です。

でも、安心してください。現場のベテランエンジニアも、最初はみんなここでつまずきます。

「迷ったらまずは console.log！」：データの中身がどうなっているか、まずはログを出して確認する。その癖をつけるだけで、型ガードの設計がぐっと上手くなります。
「完璧を目指さない」：最初は `any` を使って逃げてもいいんです。そこから少しずつ「このデータはこういう形をしているはずだ」と型を定義していく。その積み重ねが、堅牢なシステムを作る第一歩になります。

まとめ

ユーザー定義型ガードは、プログラムに「このデータはこういう形だよ！」と保証するための合言葉。
`arg is Type` という形を使うだけで、複雑な条件分岐でもTypeScriptが賢く型を絞り込んでくれる。
それはまるで、レジでお客さんの荷物を丁寧に仕分けるような、優しくて安全な仕組み。

JavaScriptの型システムは、あなたのコードを壊れにくく守ってくれる強力な味方です。怖がらずに、ぜひ今日のサンプルコードをエディタに貼り付けて、いろいろと動かしてみてください。

もしエラーが出ても、それは「もっと君のことを知りたいよ」というTypeScriptからのサインです。ぜひ仲良く付き合っていってくださいね！

また次の記事で、現場の知恵を共有しましょう。Happy Coding!