TypeScriptの扉を開いたばかりの皆さん、こんにちは。型定義の世界へようこそ！
最初は「型？ 何それ美味しいの？」という気分だったかもしれません。特に`any`や`unknown`といった魔法のような型に出会うと、「とりあえず全部`any`にしておけば動くじゃん！」という誘惑に駆られるのも、通る道です。
でも、ちょっと待ってください。その「とりあえず」を積み重ねると、半年後のあなたがコードを読み返した時に「これ、何のデータが入ってくるんだ……？」と頭を抱えることになります。
今日は、そんな皆さんのコードを「読みやすく、壊れにくく」する最強の武器、「判別可能なユニオン型（Discriminated Unions）」という魔法のテクニックを伝授します。
—
「何が入っているか分からない」を解決する合言葉
例えば、あなたがカフェの注文システムを作っているとしましょう。
お客さんの注文には、コーヒー、ケーキ、そして紅茶があります。これらはそれぞれ中身が違いますよね。
- コーヒーなら「豆の種類」と「ホットかアイスか」が必要。
- ケーキなら「種類（ショートケーキなど）」と「プレートの有無」が必要。
これを一つの型でどう表現するか？ TypeScriptのユニオン型（`|`でつなぐやつ）は便利ですが、そのままでは「この中身、どっちなんだろう？」とTypeScriptが迷子になってしまいます。
そこで登場するのが「タグ」です。
身近な例え：宅配便の荷札
荷物を送る時、箱に「これは『精密機器』です」「これは『食品』です」というシールを貼りますよね？
このシール（タグ）さえ見れば、中身を開けなくても何が入っているか分かります。 これが「判別可能なユニオン型」の正体です。
—
コードで見てみよう：注文システムの裏側
まずは、TypeScriptに「中身の判別方法」を教えるコードを書いてみます。ポイントは、すべての型の中に同じ名前のキー（ここでは`kind`）を持たせることです。
// コーヒーの型定義
type Coffee = {
kind: “coffee”; // これが「タグ」です！
bean: string;
isHot: boolean;
};
// ケーキの型定義
type Cake = {
kind: “cake”; // これも同じ名前で、違う値にするのがコツ
flavor: string;
hasPlate: boolean;
};
// 注文の型をまとめる（ユニオン型）
type Order = Coffee | Cake;
// 注文を表示する関数
function displayOrder(order: Order) {
// ここで「タグ」を見て絞り込みます
switch (order.kind) {
case “coffee”:
// ここではTypeScriptが「これは間違いなくCoffeeだ！」と確信してくれる
console.log(`${order.bean}のコーヒー、${order.isHot ? “ホット” : “アイス”}ですね。`);
break;
case “cake”:
// ここでは「これはCakeだ！」と確信
console.log(`${order.flavor}ケーキをご用意しますね。プレートは${order.hasPlate ? “あり” : “なし”}ですね。`);
break;
}
}
なぜこれが「最強」なのか？
もし、あなたがうっかり`cake`の中に`bean`（コーヒー専用のデータ）を書き込もうとしたら、TypeScriptが即座に「ちょっと待って！ その注文はケーキだよ。コーヒーの豆なんて入ってないよ！」と赤線を引いて止めてくれます。
これこそが、TypeScriptの真骨頂です。「実行する前に、ミスを教えてくれる」。これだけで、夜中にバグを追いかけて泣く時間が激減します。
—
初学者がつまずきやすいポイントへのフォロー
「でも、毎回`kind`なんて書くの面倒くさくないですか？」
そう思うかもしれません。最初は少し面倒に感じるはずです。でも、想像してみてください。プロジェクトが大きくなって、注文の種類が10個、20個と増えた時、この`kind`があるかないかで、あなたのデバッグ時間は天と地ほど変わります。
コツは、「何が起きたら型を区別したくなるか？」を想像することです。
- APIから返ってくるデータに`status: “success” | “error”`というタグがあるなら、それをそのまま判別のスイッチにすればいいんです。
- もしタグがないデータなら、自分でデータを受け取った瞬間にタグを付け足してあげればいいんです。
—
最後に：型は「守り」ではなく「守ってくれるもの」
TypeScriptの型定義を、自分の自由を奪う「枷（かせ）」だと思わないでください。むしろ、あなたが自由奔放にコードを書いている間、後ろからこっそり転ばないように支えてくれる「ガイド」だと思ってあげてください。
「判別可能なユニオン型」を使うと、コードを読んだ瞬間に「あ、ここはこういうデータの流れなんだな」とパッと分かるようになります。これは、未来の自分や、一緒に働く仲間への最高の手紙になります。
今日は、ぜひ皆さんのコードで「タグ」を一つ追加してみてください。それだけで、あなたの書くTypeScriptの質はグッと上がります。大丈夫、ゆっくり慣れていきましょう。何かわからないことがあれば、またいつでも聞きに来てくださいね。
コメント