TypeScriptでPick・Omitなどユーティリティ型をインターフェースに適用する方法

1. ユーティリティ型とは？

1. ユーティリティ型とは？

まず、「ユーティリティ型（Utility Types）」という言葉を覚えましょう。これは、TypeScriptに最初から用意されている便利な型変換ツールのことです。TypeScriptではインターフェースや型を定義してデータ構造を表現しますが、開発中に「この型の一部だけ使いたい」「この型の特定の部分を除外したい」といった場面がよくあります。そうしたときに使えるのがPickやOmitといったユーティリティ型です。

2. Pick型とは？必要なプロパティだけを抜き出す

2. Pick型とは？必要なプロパティだけを抜き出す

Pick型は、インターフェースから特定のプロパティだけを取り出すためのユーティリティ型です。英語の「pick（ピック）」には「選ぶ」という意味があります。その名の通り、必要なプロパティを選んで新しい型を作ることができます。

たとえば、次のようなUserインターフェースがあるとします。

interface User {
    id: number;
    name: string;
    email: string;
    age: number;
}

この中から「名前」と「メールアドレス」だけを使いたい場合、Pickを使うと簡単にできます。

type UserContact = Pick<User, "name" | "email">;

const contact: UserContact = {
    name: "山田太郎",
    email: "taro@example.com"
};

このように、Pick<元の型, "プロパティ名" | "プロパティ名">のように書くことで、元の型から必要なプロパティだけを抽出できます。複数指定したいときは、パイプ（|）で区切ります。

実際に実行すると、次のようなオブジェクトが作成されます。

{
    name: "山田太郎",
    email: "taro@example.com"
}

3. Omit型とは？特定のプロパティを除外する

3. Omit型とは？特定のプロパティを除外する

次に紹介するのがOmit型です。こちらはPickの反対で、特定のプロパティを除外して新しい型を作ることができます。英語の「omit（オミット）」は「省く」「除外する」という意味です。

先ほどと同じUserインターフェースを使って、emailだけを除外したい場合を考えてみましょう。

type UserWithoutEmail = Omit<User, "email">;

const user: UserWithoutEmail = {
    id: 1,
    name: "田中花子",
    age: 25
};

このように、Omit<元の型, "除外したいプロパティ名">と書くと、そのプロパティを除いた新しい型が作られます。これにより、再利用性の高い型設計ができるようになります。

4. PickとOmitの使い分けのポイント

4. PickとOmitの使い分けのポイント

では、どんなときにPickを使って、どんなときにOmitを使うのが良いのでしょうか？

• Pick：使いたいプロパティが少ないとき（欲しいものを選ぶ）
• Omit：除外したいプロパティが少ないとき（いらないものを除く）

例えば、10個のプロパティのうち2個だけ使いたいならPickが便利です。一方で、1個だけ除外したい場合はOmitを使う方がスッキリします。

このように、どちらを使うかは「どのプロパティを残したい・消したいか」によって決めると良いでしょう。

5. PickとOmitを使った実践例

5. PickとOmitを使った実践例

実際のWebアプリ開発では、API通信やフォーム入力などで、全ての情報を扱う必要がない場面が多くあります。そんなときにユーティリティ型が活躍します。

たとえば、次のような例を見てみましょう。

interface Product {
    id: number;
    name: string;
    price: number;
    description: string;
    stock: number;
}

// 商品の登録フォームでは、idとstockは不要
type ProductForm = Omit<Product, "id" | "stock">;

// 商品の一覧表示では、nameとpriceだけを表示
type ProductListItem = Pick<Product, "name" | "price">;

const newProduct: ProductForm = {
    name: "ノートパソコン",
    price: 120000,
    description: "最新モデルのノートPCです。"
};

const productListItem: ProductListItem = {
    name: "ノートパソコン",
    price: 120000
};

このように、場面に応じてPickやOmitを組み合わせることで、柔軟で安全な型設計ができるようになります。これにより、誤って不要なデータを扱うリスクも減らせます。

6. 他のユーティリティ型との組み合わせ

6. 他のユーティリティ型との組み合わせ

TypeScriptにはPartial（全てを任意にする）やReadonly（すべてを読み取り専用にする）といった他のユーティリティ型もあります。これらとPickやOmitを組み合わせると、さらに高度な型を作ることもできます。

type EditableUser = Partial<Omit<User, "id">>;

この例では、idを除外したうえで、残りのプロパティをすべて任意にしています。つまり、編集フォームなどで一部だけ入力を許可したい場面に便利です。

まとめ

まとめ

ユーティリティ型を使う理由をあらためて整理しよう

TypeScriptでPickやOmitといったユーティリティ型を使うと、既存のインターフェースから必要な情報だけを抽出したり、不要な部分を取り除いたりといった柔軟な型の再構築ができます。実際の開発では、商品データ、ユーザー情報、フォーム入力、APIレスポンスなど、用途によって必要なデータの粒度が異なります。そのたびに新しい型を一から作るのではなく、もともとのインターフェースを土台にして、欲しい部分だけを取り出すことで、管理しやすく、直感的なコード設計が可能になります。

特にインターフェースの項目数が多い場合や、大規模なアプリケーションで同じ型を用途別に使い分けたいときには、PickとOmitは大きな力を発揮します。必要な部分だけを明確に指定したり、余計な部分を切り離したりすることで、「この場面では何を扱いたいのか」が型レベルで整理され、読みやすさや保守性も向上します。

また、PickやOmitを単体で使うだけでなく、PartialやReadonlyと組み合わせて「任意入力のフォーム型」「読み取り専用のリスト型」など、用途にぴったり合わせた構造を作ることもできます。これにより、データを扱う範囲を型で厳密に制御しつつ、安全に拡張できるようになります。TypeScriptの型システムをうまく活用すると、エラーを未然に防ぎ、より堅牢なコードを書くことができるのです。

PickとOmitを応用したサンプルコード

実際の開発現場でありがちなケースとして、「編集画面では一部だけ変更できるが、一覧画面では別の項目を強調したい」といった場面を想定した例を見てみましょう。

interface Article {
    id: number;
    title: string;
    content: string;
    author: string;
    createdAt: string;
    updatedAt: string;
}

// 一覧表示用：タイトルと著者だけ
type ArticleListItem = Pick<Article, "title" | "author">;

// 編集用：id以外を編集可能、ただし入力は任意
type ArticleEditForm = Partial<Omit<Article, "id">>;

const listItem: ArticleListItem = {
    title: "型安全な開発を実現するTypeScript",
    author: "佐藤"
};

const editForm: ArticleEditForm = {
    title: "記事タイトルを変更しました",
    content: "内容を更新中です"
};

このように、PickとOmitを中心に、Partialなど他のユーティリティ型と組み合わせることで、記事一覧、記事編集、詳細画面といった画面ごとに最適化された型を簡潔に表現できます。データの取り扱い方を型として明確に記述できるため、読み手にも意図が伝わりやすく、チーム開発でも安心して利用できます。

ユーティリティ型を活かすための考え方

ユーティリティ型をうまく使うためのポイントとして、「何を残すか」「何を省くか」を先に明確にしておくことが大切です。フォーム、API、一覧、詳細、編集など、それぞれの機能で必要となる項目は異なります。そのたびに型定義を増やしてしまうと、数が増えすぎて管理が大変になりますが、PickやOmitを使えば、もともとの型から必要な部分だけを再構成できるので、重複や管理コストを減らせます。

また、インターフェースを設計するときも「再利用しやすい構造」にしておくと、ユーティリティ型の効果がより高まります。データ構造の粒度を適度に保ちつつ、後から抽出・除外しやすい形にしておくことで、柔軟で拡張性のあるプロジェクト設計につながります。

TypeScriptには今回扱ったユーティリティ型のほかにも、Record、Required、Exclude、Extractなど、目的に応じた便利な仕組みが多数用意されています。使い慣れてくると、開発中に「このデータはこういう扱いにしたい」という意図を型で自然に表現できるようになり、より安全で読みやすいアプリケーションを作れるようになります。