TypeScriptの世界へようこそ！チーフアーキテクトの私です。
日々のフロントエンド開発、本当にお疲れ様です。「型定義ってなんだか難しそう…」「`any`で逃げたくなる気持ち、すごくよく分かります」。でも、大丈夫ですよ。一つひとつ、身近なところから紐解いていけば、TypeScriptはあなたの最高の相棒になってくれます。
今回は、数ある便利な機能（ユーティリティ型）の中でも、現場でめちゃくちゃよく使う`Exclude
難しそうに聞こえる名前ですが、お買い物の「引き算」に例えると、一瞬でスッと頭に入ってきますよ。さあ、一緒に見ていきましょう！
—
1. `Exclude`って、一言で言うと何？
ざっくり言うと、「ごちゃ混ぜの選択肢（ユニオン型）の中から、いらないものをスッキリ取り除くハサミ」です。
TypeScriptには、`string | number` のように「これか、あれか」と複数の型をまとめるユニオン型という仕組みがあります。便利なんですけど、時々「この中の、この一部だけは今回は使いたくないんだよなぁ」という場面が出てくるんです。
そんなときに「これとこれは除外して！」とお願いできるのが、`Exclude`（除外する）というわけです。
—
2. お買い物の「アレルギー食材除外」でイメージしてみよう
ちょっと想像してみてください。
あなたは今、大きなお弁当屋さんで働いています。
今日のお弁当のベースには、以下の具材（ユニオン型 `T`）が入っています。
- `”お肉”`
- `”お魚”`
- `”野菜”`
- `”卵”`
これをTypeScriptの型で書くと、こうなります。
// 今日使えるすべての具材リスト（ユニオン型）
type AllIngredients = “お肉” | “お魚” | “野菜” | “卵”;
ここに、アレルギー持ちのお客様がやってきました。「すみません、卵とお肉は抜いてください」とのこと。
このとき、「お肉と卵を除いた、残りの安全な具材リスト」を作りたいですよね。
それをやってくれるのが、`Exclude`です！
// “お肉” と “卵” を除外する！
type SafeIngredients = Exclude
// 結果： SafeIngredients は “お魚” | “野菜” になります！
すごくないですか？ 大きなグループ（`AllIngredients`）から、不要なもの（`”お肉” | “卵”`）をピッと取り除いて、残ったものだけをきれいに抽出してくれました。これが`Exclude
—
3. 実務でよくあるシチュエーション：画面のステータス管理
もう少し、Web制作やアプリ開発の現場っぽい例を見てみましょう。
例えば、ユーザーの読み込み状態（ステータス）を管理する型があったとします。
// アプリ全体で使えるステータス
type Status = “idle” | “loading” | “success” | “error”;
ここで、とある小さなコンポーネントを作るときに、「初期状態（`idle`）と、読み込み中（`loading`）のときは、このデザインは出さない！ 結果が決まったとき（`success`か`error`）だけでいいんだ！」というケースがあります。
そんなとき、わざわざ新しく型を書き直さなくても、`Exclude`を使えばこう書けます。
// “idle” と “loading” を除外して、結果のステータスだけを作る
type ResultStatus = Exclude
// 結果は “success” | “error” だけになる！
もし元の `Status` に新しい状態（例えば `”timeout”` など）が追加されたときも、`Exclude`を使っていれば自動的に追従してくれます。手動で書き直す手間が減るのって、エンジニアにとって最高のご褒美ですよね。
—
4. エディタで動かして試してみよう！
百聞は一見にしかず。以下のコードを、あなたのVSCodeなどのエディタにそのまま貼り付けて、マウスカーソルを型の上に載せてみてください。TypeScriptがどんな型になっているか、優しく教えてくれますよ。
/
- 基礎的な型（プリミティブ型）の除外の例
- 文字列、数値、真偽値がごちゃ混ぜになった型から、boolean（真偽値）を消してみる
/
type MixedTypes = string | number | boolean;
// boolean を除外する
type OnlyStringOrNumber = Exclude
// マウスを乗せてみてね：「string | number」になっているはずです！
/
- 少し実践的な例：ユーザーの権限（ロール）管理
/
type UserRole = “admin” | “editor” | “writer” | “guest”;
// “admin”（管理者）以外の一般メンバー用の権限リストを作りたいとき
type MemberRole = Exclude
// 結果：「”editor” | “writer” | “guest”」になります
—
5. チーフアーキテクトからのメッセージ
最初は `Exclude
でも、恐れる必要は全くありません。これはあなたを困らせるためのものじゃなく、「めんどくさい重複定義をなくして、コードを安全で綺麗にするため」の優しいお片付けツールです。
「元の大きなグループ（T）」から、「いらない子たち（U）」をサッと取り除く。
このイメージだけ心に留めておけば、明日からの型定義が少しだけ楽しく、軽やかになるはずです。
つまずいたときは、いつでもこの記事を読みに戻ってきてくださいね。あなたのTypeScriptライフを、私はいつも応援しています！
コメント