こんにちは！TypeScriptの型定義、毎日お疲れ様です。
最初は「なんだこの暗号みたいな記号の山は…！」と、エディタをそっと閉じたくなる気持ち、痛いほどよく分かります。私も昔は `any` ばかり使って先輩によく怒られていました（遠い目）。
さて、今回はTypeScriptの中級者への第一歩であり、実務でもめちゃくちゃお世話になる「`Exclude
「ユニオン型？絞り込み？なんだか難しそう……」と思ったそこのあなた、大丈夫ですよ！身近な例えを交えながら、ゆっくり優しくほどいていきますので、コーヒーでも飲みながらリラックスして読んでいってくださいね。
—
そもそも「ユニオン型」ってなに？お菓子の詰め合わせパックで考えてみよう
`Exclude
TypeScriptにおけるユニオン型とは、ざっくり言うと「これか、これか、これのどれか！」という「選択肢のパック」のことです。縦棒の `|` （パイプ）を使って表現します。
例えば、スーパーのお菓子売り場を想像してみてください。
「チョコ、クッキー、せんべい」の3種類が入ったお菓子の詰め合わせパックがあるとします。
これをTypeScriptの型で書くと、こんな感じです。
// チョコ、クッキー、せんべいのどれかを選べるお菓子パックの型
type Oyatsu = “chocolate” | “cookie” | “senbei”;
この `Oyatsu` 型を持つ変数には、”chocolate” も入るし、”cookie” も入る。まさに「どれでもOKな状態」です。
—
厄介な問題発生！「アレルギーだから、これは抜いて！」
さて、ここからが本題です。
先ほどのお菓子の詰め合わせパック、すごく魅力的なんですが、もしあなたが「チョコレートアレルギー」だったらどうでしょう？
「チョコは食べられないから、クッキーとせんべいだけのパックに作り替えてほしい！」と思いますよね。
Web制作やアプリ開発の現場でも、これと全く同じことがよく起こります。
「既存の便利な型リストがあるんだけど、今回のページでは特定の1つだけ使わせたくないんだよなぁ……」というシチュエーションです。
そんな時にお呼びがかかるのが、今回主役の`Exclude
—
救世主登場：`Exclude` の使い方
`Exclude
英語の `exclude`（除外する）という言葉の通り、次のような働きをしてくれます。
> 「元となる型（T）のパックから、いらないもの（U）を取り除いた、新しいパックを作るよ！」
先ほどのお菓子の例で、チョコレートを除外してみましょう。
// 1. 最初のお菓子パック（チョコ、クッキー、せんべい）
type Oyatsu = “chocolate” | “cookie” | “senbei”;
// 2. チョコレートアレルギーの人用に、チョコを除外する！
type OyatsuWithoutChoco = Exclude
// 【結果】
// OyatsuWithoutChoco の中身は “cookie” | “senbei” になります！やったね！
たったこれだけです！
`Exclude<元の型, 除外したい型>` という順番で渡してあげるだけで、TypeScriptが賢く「あ、チョコね、はい除外ね！」と綺麗に取り除いてくれるんです。
—
実務でどう使うの？ もう少しリアルなコードを見てみよう
「お菓子の例えは分かったけど、実際のWeb制作ではどう使うの？」という声が聞こえてきそうですね。
例えば、Webサイトのボタンの「サイズ」を考えてみましょう。
デザインシステムでは `small`、`medium`、`large` が用意されているとします。
// ボタンのサイズ一覧
type ButtonSize = “small” | “medium” | “large”;
しかし、特定の「テキストリンク風ボタン」だけは、なぜか大きめの `large` を使ってはいけないというルール（要件）がデザイナーさんから降ってきたとします。
そんなとき、`Exclude` を使えばこんなふうにスマートに書けます。
// ボタンサイズ全体の型
type ButtonSize = “small” | “medium” | “large”;
// テキストリンク用には “large” を使わせたくない！
// Excludeを使って “large” を除外した新しい型を作る
type TextLinkSize = Exclude
// 実際に使ってみる
const goodLinkSize: TextLinkSize = “small”; // OK！
const anotherGoodSize: TextLinkSize = “medium”; // OK！
// エラーになる例：
// const badLinkSize: TextLinkSize = “large”;
// ❌ エジタが赤波線を出して「”large” は割り当てられないよ」と優しく教えてくれます
わざわざ最初から型を書き直さなくても、元の型を生かしつつ「ここだけ除外！」とピンポイントで調整できるのが、`Exclude` の最高にシビれるポイントなんですよ。
—
最後に：つまずきやすいポイントと応援メッセージ
初心者の頃、私がこの `Exclude` でよくやらかしたミスが、「除外する型（U）を間違える」というものです。
例えば、文字のつづりをうっかり間違えて `Exclude
「あれ？除外できないぞ？」と悩んだら、タイポ（入力ミス）がないか、そっと目を凝らして確認してみてくださいね。
TypeScriptの型定義は、最初は少し冷たく感じるかもしれませんが、使いこなせるようになると、あなたのコードの安全性を守ってくれる「一番頼りになる相棒」に変わってくれます。
「今日は一つ賢くなったぞ！」と、ご自身をたくさん褒めてあげてくださいね。
それでは、快適なTypeScriptライフを！
コメント