こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
「よし、TypeScriptの型定義をバリバリ書いていくぞ！」と意気込んでみたものの、公式ドキュメントを見たら難解な専門用語のオンパレード……。特に `Pick
「なんだか難しそう……私に使いこなせるかな？」
大丈夫ですよ、安心してください。今日ここで、私と一緒にその不安をスッキリ解消していきましょう。実は `Pick` の正体は、私たちが日常でやっている「お買い物」や「お弁当作り」とまったく同じ、とってもシンプルな仕組みなんです。
肩の力を抜いて、リラックスして読み進めてみてくださいね。
—
1. `Pick` ってなんだろう？（身近な例え話で理解する）
突然ですが、あなたは今、街の小さなおしゃれなカフェで「オリジナルパフェ」を作ろうとしています。
目の前には、フルーツ、アイス、生クリーム、スポンジケーキ、チョコチップなど、全部で20種類以上のトッピングが乗った巨大なショーケース（型 `T`）があります。
このショーケースの中には、あなたが使いたいものもあれば、今回は使わないものも混ざっています。さて、あなたはパフェを作るために、ショーケース全体からどう行動するでしょうか？
そう、「イチゴとバニラアイスと生クリームだけを『選んで（Pickして）』手元に持ってくる」はずです。
TypeScriptの `Pick
「大きな型（ショーケース）の中から、自分が本当に欲しい特定のプロパティ（具材）だけを摘み出して、新しい型を作るための魔法の道具」なんです。
英語の “Pick” のイメージ
英語の「pick」には、「（たくさんの中から）選ぶ、摘み取る」という意味がありますよね。まさにそのイメージのまま！
「でっかい型の中から、必要な部分だけをつまみ食いする」と覚えておけば、もう忘れません。
—
2. なぜ `Pick` が必要なの？（実務でのよくある悩み）
Web制作やアプリケーション開発の現場では、サーバーからユーザーのデータを受け取ることがよくあります。例えば、こんな感じです。
// サーバーから送られてきた「ユーザーの全データ」を表す型
interface User {
id: number;
name: string;
email: string;
address: string;
phoneNumber: string;
createdAt: string;
updatedAt: string;
}
「うわっ、項目がいっぱいあって賑やかだなあ」と思いましたか？その通り、実務のデータは基本的に大盛りです。
さて、ここで問題です。
画面の片隅にある「小さなユーザーアイコンと名前だけのパーツ（コンポーネント）」を表示したいとしましょう。このパーツを作るために、先ほどの巨大な `User` 型をそのまま使うのは、ちょっと大げさ（オーバースペック）ですよね。住所も電話番号も、この画面では1ミリも使いません。
「じゃあ、名前とIDだけの新しい型をもう一回ゼロから書けばいいか！」……ちょっと待ってください。それだと、将来もし `name` の仕様が変わったときにあちこちの型を修正しなきゃいけなくなり、バグの温床になってしまいます。
ここで登場するのが `Pick` です。
「`User` 型の中から、`id` と `name` だけをちょーだい！」とスマートにお願いできるんです。
—
3. 基本的な書き方とコード例を見てみよう
百聞は一見にしかず。実際にコードを書いてその動きを確かめてみましょう。
以下のコードを、あなたのエディタ（VS Codeなど）にコピーして試してみてください。
// 1. まず、元となる大きな型を定義します（これがショーケースです）
interface User {
id: number;
name: string;
email: string;
address: string;
phoneNumber: string;
}
// 2. Pickを使って、「User」の中から「id」と「name」だけを抽出します！
// 構文: Pick<元の型, '欲しいキー1' | '欲しいキー2'>
type UserSummary = Pick
// 3. 実際に使ってみましょう
const myUser: UserSummary = {
id: 1,
name: ‘TypeScript 太郎’,
// 試しに、Pickしていない ‘email’ や ‘address’ を入れようとすると…？
// email: ‘taro@example.com’ // <- エラーになります！「そんなプロパティ知らないよ！」と怒られます
};
console.log(myUser);
どうでしょう？ `Pick
ここでポイントなのが、第2引数の `’id’ | ‘name’` の部分。TypeScriptの世界では、これを「ユニオン型（Union Types）」と呼びます。縦棒（`|`）で繋ぐことで、「これと、これと、これ！」と複数のキーを同時に選ぶことができるんです。お弁当のおかずを選ぶみたいで、なんだかちょっとワクワクしませんか？
—
4. チーフアーキテクトが教える、現場で使えるちょっとしたコツ
`Pick` は非常に強力なユーティリティ型ですが、実務で使う際にはいくつかの「お作法」や「つまずきポイント」があります。最後に、現場で役立つ実践的な知見を少しだけシェアしますね。
つまずきポイント：タイポ（スペルミス）に気をつけよう
`Pick` の第2引数に指定する文字列は、元の型に存在するプロパティ名と1文字たりとも違ってはいけない厳格な世界です。
もし `’naame’` のようにスペルミスをすると、TypeScriptは親切に「そんなキーは元の型に存在しないよ」と教えてくれます。赤く波線が出たら、まずはスペルを疑ってみてくださいね。
他の型（Omitなど）との使い分け
`Pick` は「必要なものだけを残す（抽出する）」アプローチですが、その逆で「不要なものを取り除く（除外する）」ための `Omit
- Pick: 「これと、これと、これだけ欲しい！」（ホワイトリスト方式）
- Omit: 「これと、これ以外は全部欲しい！」（ブラックリスト方式）
データ構造やシチュエーションに合わせて、この2つをスマートに使い分けられるようになると、あなたのTypeScriptスキルは一気に中級者の扉を叩くことになりますよ。
—
おわりに
お疲れ様でした！
`Pick
最初は暗号のように見えた型定義も、こうして身近な例に置き換えてみると、「開発者の負担を減らすために、TypeScriptが用意してくれた便利な道具なんだな」と感じていただけたのではないでしょうか。
TypeScriptは、あなたのコードのミスをそっと見守ってくれる心強い相棒です。分からないことが出てきても、今日のように一つひとつ優しく分解していけば、絶対に使いこなせるようになります。
焦らず、自分のペースで楽しくコードを書いていきましょう。それでは、また次の記事でお会いしましょう！チーフアーキテクトの私でした。
コメント