こんにちは！TypeScriptの世界へようこそ、チーフアーキテクトの私です。
現場の第一線でバリバリとコードを書いていると、「あ、この巨大なデータ構造から、ほんの一部だけ抜き出して使いたいな」という場面に、ものすごく頻繁に遭遇します。全部のプロパティを持ち歩くのは、まるで一泊二日の旅行に行くのに、婚礼用の大きなタンスごと持ち歩くようなもので、どう考えてもオーバーですよね。
そんなときに私たちの強い味方になってくれるのが、今回お届けするユーティリティ型、`Pick
今回は、TypeScriptを始めたばかりのあなたが「なるほど、そういうことね！」と膝を打てるよう、身近な例えを交えながら、この魔法のような機能の裏側を優しく、そして徹底的に紐解いていきたいと思います。どうぞ肩の力を抜いて、リラックスして読んでいってくださいね。
—
1. `Pick` ってなんだろう？ お買い物でたとえてみる
まずは、難しいコードのことは少し横に置いておきましょう。
想像してみてください。あなたは今、近所の大きなおもちゃ屋さん（または家電量販店）にいます。そこには、1つの商品につき、以下のようなめちゃくちゃ細かい情報（データ）がタグとしてくっついています。
- 商品名（name）
- 値段（price）
- メーカー（maker）
- 在庫数（stock）
- 重さ（weight）
- 倉庫の保管場所（warehouseLocation）
お会計のレジや、商品の詳細ページ全体を表示するならこの「全部入り情報」が必要ですが、例えば今あなたが作っているのは「お買い物のカート画面（リスト表示）」だとしましょう。
カート画面でユーザーに見せたいのは、ぶっちゃけ「商品名」と「値段」だけで十分ですよね？ 重さや倉庫の場所まで一覧画面に出していたら、画面がごちゃごちゃして見づらくなってしまいます。
ここで、お店のカタログ（大きな型）の中から、「商品名」と「値段」という特定のパーツだけを「ピシャッ！」とつまみ食い（ピック）して新しい型を作る。これが、`Pick
英語の “Pick（選んで取る）” そのままの意味なので、イメージしやすいのではないでしょうか？
—
2. 基本のキ：実際にコードで見てみよう
それでは、このお買い物の例を、実際のTypeScriptのコードに落とし込んでみましょう。
まずは、すべてが詰まった「全部入り」の型（これを `T` と呼びます）を定義します。
// お店にある商品の、すべての情報が詰まった「全部入り」の型
interface Product {
id: number;
name: string;
price: number;
maker: string;
stock: number;
weight: number;
warehouseLocation: string;
}
「うわ、プロパティがいっぱいで目が回る……」と思いましたか？ 大丈夫ですよ、安心してください。ここから `Pick
// Product型の中から、’name’ と ‘price’ だけを「ピック」して新しい型を作る
type CartItem = Pick
// できた型（CartItem）を使ってみる
const myCartItem: CartItem = {
name: ‘スーパーファミコン風Bluetoothキーボード’,
price: 6800,
// 試しに、makerやstockを入れようとすると…？
// maker: ‘Nintendo’ -> 【エラー！】そんなプロパティは許可されていません
};
見てください！ `CartItem` 型には、元となった `Product` 型の中から `’name’` と `’price’` しか存在していません。そのため、余計なデータをうっかり混ぜ込んでしまうバグを、エディタが未然にバチッと防いでくれるのです。これが型の恩恵であり、実務で私たちが手放せない理由です。
—
3. `Pick` の仕組みを分解する
もう少しだけ、頭の中を整理するために「仕組みの解剖」をしてみましょう。
`Pick
Pick<もとの型, 抜き出したいプロパティの名前>
ここでポイントなのが、2つ目の引数（Kの部分）です。複数のプロパティを指定したいときは、TypeScriptの「ユニオン型（`|` ＝ または）」を使って、`’prop1′ | ‘prop2’` のようにパイプラインで繋ぎます。
「あ、HTMLのCSSセレクタや、JavaScriptの条件分岐なんかで見たことある！」という記号ですよね。あの `|` と同じ感覚で、欲しいプロパティを並べていくだけでOKです。
—
4. 実務の現場でどう役立つ？ つまずきやすいポイントと対策
初心者の方がよくやってしまうのが、「すべてのデータに対して、毎回新しい `interface` を手打ちで何個も作ってしまう」というミスです。
例えば、こんな風に書いていませんか？
// ❌ やりがちな書き方（非効率）
interface UserProfile {
id: string;
name: string;
email: string;
age: number;
address: string;
}
interface UserCardPreview {
id: string;
name: string;
}
interface UserEmailOnly {
id: string;
email: string;
}
これだと、もし元の `UserProfile` に「電話番号（phone）」が追加されたとき、他の型もぜーんぶ手動で書き直さなきゃいけなくなります。人間、絶対に書き忘れます。そしてそこからバグが生まれます（笑）。
ここで `Pick
// ⭕️ プロフェッショナルな書き方
interface UserProfile {
id: string;
name: string;
email: string;
age: number;
address: string;
}
// ユーザー一覧のカード表示には、idとnameだけ！
type UserCardPreview = Pick
// 通知を送る機能には、idとemailだけ！
type UserEmailOnly = Pick
これなら、大元の `UserProfile` さえ修正しておけば、そこから派生している `UserCardPreview` や `UserEmailOnly` も自動的に追従してくれます。保守性が爆上がりですね！
—
5. まとめと、あなたへのエール
今回は、TypeScriptの基本の型定義をさらに便利にする `Pick
- `Pick
- メリット：コードの重複をなくし、大元の変更に強い（メンテナンス性の高い）安全なコードが書けるようになる。
最初は「なんか記号が多くて難しそう…」と感じるかもしれませんが、実際にエディタを開いて `Pick<` と打って補完が出てきたときの「おお、動いた！」という小さな感動の積み重ねが、あなたを確実にTypeScript使いへと成長させてくれます。 もしコード書いていて「あ、ここエラーになったどうしよう」と手が止まったら、深呼吸をして、このブログ記事をまた覗きに来てくださいね。 あなたのフロントエンド開発の旅が、明日も楽しく素晴らしいものになりますように。チーフアーキテクトの私でした！それではまた。
コメント