【入門編】 Omitによるプロパティの除外 – TypeScript実践ガイド

こんにちは!TypeScriptの世界へようこそ。チーフアーキテクトの私です。

TypeScriptを触りはじめの頃って、「あれもこれも型をつけなきゃいけないの?」と、なんだか窮屈に感じちゃいますよね。特に、APIから返ってくるデータ(オブジェクト)が大きすぎたり、ほんの一部だけ変えたいのに全体の型を書き直さなきゃいけない気がして、めまいがした経験はありませんか?

大丈夫です、安心してください。今日のテーマである `Omit`(オミット) を知れば、そんなモヤモヤが一気に吹き飛びますよ。

今回は、難しい専門用語はできるだけポイッと除外して(まさに `Omit` ですね!)、身近な例えと一緒に優しく紐解いていきましょう。

—

1. `Omit` って、ぶっちゃけどんな道具?

いきなりコードを書く前に、頭の中でイメージを作ってみましょう。

あなたが今、大好きなハンバーガーを注文しようとしています。
標準(デフォルト)のメニューには、こんな具材が挟まっています。

  • 標準のハンバーガーセット = `バンズ` + `パティ` + `チーズ` + `ピクルス` + `トマト`

「うーん、私、実はピクルスとトマトが苦手なんだよね……。でも、他の部分はそのままがいいな」
そんなとき、店員さんにこう言いませんか?

「すいません、このハンバーガーセットから、ピクルスとトマト『抜き』でお願いします!」

この「〜抜きにする」「特定のパーツを取り除く」という現実世界の魔法のようなワザこそが、TypeScriptの `Omit` なんです。

プログラムの世界でも、「すでにある完璧な型(メニュー)をベースにして、不要なプロパティ(具材)だけをサクッと取り除いた新しい型を作りたい!」という場面が本当によくあります。そんなときのために、TypeScriptがあらかじめ用意してくれている便利な専用ツールが `Omit` なのです。

—

2. 実際のコードで仕組みをのぞいてみよう

百聞は一見にしかず。さっそく、コードを書いてその動きを確かめてみましょう。
まずは、先ほどのハンバーガーをTypeScriptで表現してみます。

// 1. 標準のハンバーガーの「型(メニュー表)」を定義します
type Hamburger = {
bun: string; // バンズ
patty: string; // パティ(お肉)
cheese: boolean;// チーズが入っているか
pickle: string; // ピクルス
tomato: string; // トマト
};

さあ、ここからが本番です。「ピクルスとトマトが苦手な人のためのハンバーガーの型」を、`Omit` を使って作ってみましょう。

// 2. Omitを使って、Hamburger型から ‘pickle’ と ‘tomato’ を除外する
type PlainHamburger = Omit;

// 出来上がった PlainHamburger の中身は、実質こうなっています:
// type PlainHamburger = {
// bun: string;
// patty: string;
// cheese: boolean;
// };

どうですか?すごくシンプルですよね!
`Omit<もとの型, '除外したいプロパティ名'>` という順番で指定するだけで、もとの型を汚すことなく、綺麗に不要なプロパティだけを削ぎ落とした新しい型が手に入るんです。

もし複数のプロパティを同時に除外したいときは、JavaScriptの「or」に似たパイプライン(`|`)でつなぐだけでOKです。

—

3. 実務でよくある「うれしい瞬間」

「へえ、便利そうだけど、実際のWeb制作やアプリ開発でいつ使うの?」って思いますよね。
一番よくあるのは、「ユーザー情報(User)」を扱うときです。

例えば、データベースに入っている完全なユーザー情報の型がこれだとします。

type User = {
id: number; // ユーザーID(自動で振られるので、人間が書くことはない)
name: string; // お名前
email: string; // メールアドレス
createdAt: string; // アカウント作成日(これもシステムが勝手に記録する)
};

ここで、新規会員登録の画面(フォーム)を作っているとしましょう。
ユーザーが入力するのは `name` と `email` だけです。`id` や `createdAt` は、まだデータベースに登録されていないので、フォーム画面では存在してはいけない(入力させちゃいけない)ですよね。

そんなとき、こう書けます。

// 新規登録フォーム用の型(idとcreatedAtは不要なのでオミット!)
type NewUserFormInput = Omit;

// これで NewUserFormInput は以下のようになります:
// {
// name: string;
// email: string;
// }

もし後から `User` 型に「電話番号 (`phone: string`)」が追加されても、自動的に `NewUserFormInput` にも反映される……わけではなく、基本の型が変わったときに一元管理しやすくなるという大きなメリットがあります(※厳密にはOmitは元が変われば追従します)。

わざわざ新規登録用の型を一から書き直さなくていいので、コードの重複(コピペ)を防ぎ、バグの温床を減らすことができるんです。「DRY(Don’t Repeat Yourself:同じことを何度も書かない)原則」をTypeScriptの型レベルで守れる、素晴らしい機能なんですよ。

—

4. 初学者がつまずきやすいポイントと「大丈夫」のメッセージ

ここで、よくある「あれ?」というポイントを先回りして解説しておきますね。

つまずきポイント:スペルミスや存在しないプロパティを指定したとき

「じゃあ、適当にない名前も除外できるかな?」と思って、`Omit` のように、もとの型に存在しないプロパティ名を指定したとします。

「エラーにならないの? 大丈夫?」

安心してください。TypeScriptはとても賢いので、もし間違ったプロパティ名を指定しても、静かに無視するか、あるいはエディタが「そんなプロパティ、もとの型にないよ!」と優しく教えてくれます。
ただ、実務ではサジェスト機能(入力補助)がちゃんと効くので、焦らず候補から選ぶようにすれば大丈夫です。

—

まとめ

お疲れ様でした!今回は `Omit` について、少しリラックスした雰囲気で解説してきましたが、いかがでしたでしょうか?

  • `Omit` とは:既存の型 `T` から、不要なプロパティ `K` を「抜きにする」ための便利なユーティリティ型。
  • メリット:コードの重複を減らし、「ここだけの型を作りたい」という願いをスマートに叶えてくれる。

TypeScriptの型定義は、最初はルールが多くて堅苦しく感じるかもしれませんが、こうした「ちょっと楽をするための便利ツール」を一つずつ知っていくと、パズルを組み立てるような楽しさがわかってきます。

「あ、ここ、いらないプロパティを削りたいな」と思ったときは、ぜひ思い出してくださいね。
あなたのTypeScriptライフが、少しでも快適で楽しいものになりますように!

コメント

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