【入門編】 PickとOmitユーティリティ型 – TypeScript実践ガイド

こんにちは!TypeScriptの世界へようこそ。
「型定義」なんて言葉を聞くと、なんだか数学の授業みたいで身構えてしまいますよね。でも大丈夫。TypeScriptの「型」は、プログラムを壊さないための「魔法の仕切り板」みたいなものなんです。

今日は、オブジェクトという大きな塊から、必要な部分だけを切り出したり、いらない部分を捨てたりする魔法の道具、`Pick`と`Omit`についてお話しします。

—

1. 「フルコースの注文」をイメージしてみよう

例えば、あなたがカフェの店長さんだとします。メニューには「名前」「価格」「カロリー」「アレルギー情報」「仕入れ先」……なんていう、たくさんの情報が詰まった「商品データ」があります。

type Product = {
name: string;
price: number;
calories: number;
allergyInfo: string;
supplier: string;
};

でも、Webサイトの「メニュー表」を作る時には、全部の情報は必要ないですよね? お客さんに見せるのは「名前」と「価格」だけでいい。そんなとき、この大きなデータから必要なものだけを「つまみ食い(Pick)」できるのが `Pick` です。

`Pick` で必要なものだけを抜き取る

`Pick` は、「この型の中から、これとこれだけちょうだい!」という指定をするための道具です。

// 商品名と価格だけを取り出した「メニュー用型」を作る
type MenuDisplay = Pick;

// これで MenuDisplay は { name: string; price: number; } という型になります
const menu: MenuDisplay = {
name: “特製ブレンドコーヒー”,
price: 450
};

簡単でしょう? `|` (パイプ) で区切るだけで、「これと、これ」と選べるのがポイントです。

—

2. 「断捨離」の `Omit`

今度は逆に、不要なものをサクッと捨てたい時のお話です。
例えば、Webサイトの管理画面では「商品名」や「価格」は編集できるけれど、「仕入れ先」の情報はお客さんには見せたくないし、編集もさせたくない。そんな時は `Omit`(除外する)の出番です。

`Omit` は、「これ以外全部ちょうだい!」という、とても便利な引き算の型です。

`Omit` でいらないものを捨てる

// 仕入れ先(supplier)だけを外した「編集用型」を作る
type ProductEditor = Omit;

// これで ProductEditor は { name, price, calories, allergyInfo } を持つ型になります
const editItem: ProductEditor = {
name: “特製ブレンドコーヒー”,
price: 500,
calories: 120,
allergyInfo: “なし”
// supplier は書かなくていいので楽ちん!
};

「これとこれはいらない!」と指定して、残りのメンバーを自動的に抽出してくれる。まさに、型定義の断捨離ですね。

—

3. なぜわざわざこんなことをするの?

「そのままの `Product` 型を使えばいいじゃん」と思うかもしれません。でも、ここが現場のプロが一番大切にしているポイントです。

もし、あとから `Product` に「在庫数(stock)」という項目が増えたとします。
もし毎回手書きで `type MenuDisplay = { name: string; price: number; }` と書いていたら、いちいち修正しないといけませんよね。

でも、`Pick` や `Omit` を使っていれば、元の `Product` 型を書き換えるだけで、依存している他の型も自動的に最新の状態に追従してくれるんです。

「修正漏れ」というバグの温床を、コード自体が勝手に防いでくれる。これが、TypeScriptを使いこなす最大のメリットであり、心地よさなんです。

—

まとめ:怖がらなくて大丈夫

最初は「型」と聞くと、「厳格すぎて面倒くさい」と感じるかもしれません。でも、`Pick` や `Omit` は、あなたの代わりに「いらないものを片付けてくれる優秀な秘書」のような存在です。

1. `Pick<型, 'A' | 'B'>`: 「AとBだけちょうだい!」(必要なものだけ摘む)
2. `Omit<型, 'C'>`: 「C以外全部ちょうだい!」(いらないものを捨てる)

まずはこの2つを覚えておくだけで、あなたのコードはぐっと洗練されて、メンテナンスが劇的に楽になります。

もしコードを書いていて「型が合わない!」と怒られても、それはTypeScriptが「もっといい方法があるよ」と優しく教えてくれているだけです。一つずつ、楽しみながら試してみてくださいね。応援しています!

コメント

タイトルとURLをコピーしました