こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
TypeScriptを書き始めた頃って、`string`や`number`といった基本の型だけでも「おっ、いい感じにエラーを防げて便利だな！」って感動しますよね。でも、少し慣れてくると、複数の型を「`|`（パイプ）」で繋いだ「ユニオン型（Union Types）」という壁にぶつかります。
「あっちの型もこっちの型も入り混じっていて、今扱っているのが一体どれなのか分からない……！」
そんな風に頭を抱えた夜、ありませんか？
大丈夫ですよ、安心してください。みんな最初はそこで立ち止まります。
今日は、そんなカオスになりがちなユニオン型の中から、「私たちが本当に欲しい型だけをスルスルっと抜き出す魔法の道具」、`Extract
—
1. 身近なたとえ話：「おもちゃ箱」からお目当てのものを取り出す
まずは難しいコードのことはちょっと脇に置いて、日常の景色を思い浮かべてみてください。
あなたの目の前に、大きなおもちゃ箱があります。中身はごちゃまぜです。
- 赤い車（ミニカー）
- 青い飛行機（プラモデル）
- 黄色い車（ミニカー）
- 赤いブロック
ここで、あなたが「車（ミニカー）だけを全部集めたい！」と思ったとします。
あなたはどうしますか？ おもちゃ箱の中をひっくり返して、「車」というラベルがついているものだけをパパッと選び取りますよね。
TypeScriptの `Extract
- `T`（おもちゃ箱全体）：いろんな型がごちゃ混ぜになったユニオン型
- `U`（ほしいものの条件）：抽出したい条件（今回は「車」）
- `Extract
これを知っていると、型定義が急にスッキリして、コードを書くのが楽しくなりますよ。
—
2. 実コードで見てみよう！`Extract` の基本のき
言葉だけだと少しフワッとしてしまうので、実際にエディタで書くようなコードを見てみましょう。
たとえば、あるWebアプリで、ユーザーの「権限（ロール）」を以下のように定義したとします。
// サイトに存在するすべての権限（おもちゃ箱の中身）
type AllRoles = “admin” | “editor” | “reader” | “guest”;
この `AllRoles` は、管理者、編集者、閲覧者、ゲストの4つの文字列型が混ざったユニオン型ですね。
ここで、記事の管理画面を作るにあたって、「記事をいじれる人（管理者と編集者）」だけに許可したい機能を作るとしましょう。
そんなとき、`Extract` の出番です！
// 管理者と編集者だけを抽出したい！
type EditableRoles = Extract
// 【結果】EditableRoles は実質的にこうなります：
// type EditableRoles = “admin” | “editor”;
おぉ、見事に `reader` と `guest` が取り除かれ、欲しかった `”admin” | “editor”` だけが手に入りました！
これによって、「記事を編集できる権限を持つユーザーだけにこの関数を渡す」という安全な仕組みが簡単に作れるようになります。
—
3. なぜ `Extract` が実務で重宝されるのか？
「あれ、これって最初から `type EditableRoles = “admin” | “editor”` って書けばよくない？」って思いませんでしたか？
鋭いですね！ その通り、固定の文字列なら自分で書いた方が早いです。
でも、実務の現場では、元の型 `AllRoles` がどこか別の大きなライブラリからインポートされていたり、APIの仕様変更でコロコロ変わったりするんです。
もし元の型が変わったとき、自分で直書きしていると、修正漏れが起きてバグの温床になります。
しかし、`Extract
—
4. ちょっとステップアップ：オブジェクトの型を絞り込む
文字列だけでなく、もう少し複雑な型（オブジェクトの型）でも `Extract` は使えます。
たとえば、画面の「状態（ステータス）」を表すこんな型があったとします。
type AppState =
| { status: “loading”; progress: number }
| { status: “success”; data: string }
| { status: “error”; message: string };
ローディング中、成功、エラーの3つの状態が混ざっていますね。
この中から、「ステータスが成功またはエラーのとき」の型だけを取り出したい場合はどう書くでしょうか？
// “success” または “error” のステータスを持つ型だけを抽出する
type FinishedState = Extract
// 【結果】
// type FinishedState =
// | { status: “success”; data: string }
// | { status: “error”; message: string };
このように、部分的な一致を見て、合致するオブジェクトの構造をごっそり抜き出すこともできるのです。これ、実務で非同期処理の状態管理（ReduxやReactのuseReducerなど）を書くときに、本当に救われるテクニックですよ。
—
まとめ：恐れずに、まずは手元のコードで試してみよう
ここまで `Extract
- `Extract` は、ごちゃ混ぜになったユニオン型（おもちゃ箱）から、欲しいものだけをスマートに選び出す道具。
- 元の型が変わっても自動で追従してくれるので、コードが壊れにくく（堅牢に）なる。
最初は難しく感じるかもしれないTypeScriptの高度な型操作ですが、仕組みを分解してみると、私たちの日常の整理整頓とやっていることは同じです。
まずは今日の夜でも、あなたのエディタで適当なユニオン型を作って、`Extract` で遊んでみてください。「おっ、本当に絞り込めた！」という小さな感動の積み重ねが、あなたを確実に頼もしいフロントエンドエンジニアへと育ててくれます。
それでは、また次回のTypeScriptの深淵でお会いしましょう。ハッピー・コーディング！
コメント