こんにちは！フロントエンド・アーキテクチャの現場を渡り歩いている者です。
TypeScriptを書き始めた頃、「`string | number | boolean`みたいなユニオン型は便利だけど、ここから特定の型だけをスッキリ抜き出したいな……」とモヤモヤしたことはありませんか？公式ドキュメントを見ると、なんだか小難しい数式みたいな説明が書いてあって、そっとタブを閉じたくなる気持ち、痛いほどよく分かります。
大丈夫ですよ。今日は、そんなTypeScriptの便利な道具の一つである `Extract
—
そもそも `Extract` ってどんな道具？
一言で言うと、「ごちゃ混ぜになった袋の中から、欲しいものだけをピンセットでつまみ出すマジックハンド」です。
英語の「extract」には、「抽出する」「搾り出す」という意味があります。TypeScriptの世界では、ユニオン型（型A | 型B | 型C…）という「ごちゃ混ぜの袋」から、条件に合う型だけをキレイに選び出すための組み込み型（最初からTypeScript用意されている便利機能）として活躍します。
身近な例え：おもちゃの仕分けボックス
例えば、あなたがお子さんのおもちゃ箱を片付けているとします。
おもちゃ箱の中には、「ブロック」「ぬいぐるみ」「ミニカー」「絵本」がごちゃ混ぜに入っています。
ここで、「ぬいぐるみとミニカーだけを別のカゴに分けたい！」と思ったとき、どうしますか？
手ずから一つずつ「これはぬいぐるみ、よし！」と仕分けていきますよね。`Extract
—
コードで見てみよう！基本の使い方
百聞は一見にしかず。実際のコードを見てみましょう。
まずは、色々な型が混ざった「おもちゃ箱」のようなユニオン型を用意します。
// 文字列、数値、真偽値がごちゃ混ぜになったユニオン型（おもちゃ箱）
type RandomBox = string | number | boolean | null | undefined;
// この中から「string」と「number」だけを抽出したい！
type OnlyStringAndNumber = Extract
// 結果はどうなる？
// 答え： string | number になります！
すごいですね！ `RandomBox` という広い世界から、私たちが欲しい `string` と `number` だけが綺麗に抜き出されました。
ここでよくある「あれ？」ポイント
初心者の方が最初につまずきやすいのが、「あれ？これって `Exclude` と何が違うの？」という疑問です。
- `Extract
- `Exclude
真逆の動きをするので、こんがらがったら「Extract（抽出する・取り出す）」という英単語の響きを思い出してくださいね。
—
実務でどう使うの？Web制作・開発の現場から
「理屈は分かったけど、実際のWeb制作やアプリ開発でそんな器用なこと使うの？」って思いますよね。実は、APIから返ってくるデータや、コンポーネントの状態管理（State）を綺麗に整理するときにめちゃくちゃ重宝します。
ちょっと実務っぽい例を見てみましょう。
例：ユーザーの権限（ロール）を絞り込む
Webサイトを作っていると、「管理者」「編集者」「一般ユーザー」「ゲスト」といったユーザーの権限を扱うことがよくあります。
// システム全体にあるすべてのユーザー権限
type AllRoles = ‘admin’ | ‘editor’ | ‘author’ | ‘subscriber’ | ‘guest’;
// 「記事を書ける人たち（管理者、編集者、著者）」だけに限定した型を作りたい！
type CanWriteRoles = Extract
// CanWriteRoles の中身は ‘admin’ | ‘editor’ | ‘author’ になります
もし将来、`AllRoles` に新しい権限（例えば `’super-admin’` や `’bot’`）が追加されたとしても、`Extract` を使っていればベースの定義変更に追従しやすくなります。わざわざ手動で書き直す必要が減るため、コードの保守性がグッと上がります。
—
つまずいたときの心の持ちよう
TypeScriptの型パズルを見ていると、「自分にはセンスがないのかな……」と落ち込んでしまうこともあるかもしれません。でも、安心してください。歴戦のフロントエンドエンジニアたちも、最初は意味不明なエラーメッセージと毎日格闘していました。
`Extract
「あ、なんかごちゃ混ぜの型から特定のやつだけ抜き出したいな」と思ったときに、「そういえば、なんかそんな便利ツールがあったな」と思い出して、このブログや公式ドキュメントをチラッと見に来てくれれば100点満点です！
一歩ずつ、あなたのペースでTypeScriptと仲良くなっていきましょうね。
それでは、また次回のモダンなフロントエンドの旅でお会いしましょう！Happy Coding!
コメント