こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。
新しい技術を学び始めた頃って、「なんだかルールが厳しそう」「エラーが赤く光って怖い……」と感じてしまいますよね。特にTypeScriptは、型というガードレールがしっかりしすぎていて、時には「ちょっとだけここを書き換えたいだけなのに！」と息が詰まることもあるでしょう。
大丈夫ですよ、安心してください。今日一緒に見ていく `Partial
それでは、身近な例えからゆっくり紐解いていきましょうか。
—
1. ユーザープロフィールの更新で、こんなモヤモヤを感じたことはありませんか？
Webアプリケーションを作っていると、よくあるのが「ユーザーのプロフィール編集画面」です。
例えば、次のような「ユーザーのデータ型」を定義したとします。
// ユーザーの基本情報（全部必須！）
interface User {
id: number;
name: string;
email: string;
age: number;
}
「IDも、名前も、メールアドレスも、年齢も、絶対にないと困る！」という新規登録の画面であれば、この `User` 型は完璧です。誰も文句は言いません。
しかし、考えてみてください。ユーザーが「あ、メールアドレスだけ変えたいな」と思ったとき、プロフィール編集画面から送信されてくるデータはどうなるでしょうか？
そう、「メールアドレスだけ」ですよね。名前や年齢は変えていないので、わざわざ送ってこないのが普通です。
ここで、TypeScriptの厳しいお約束を思い出してください。
「ねえ、この `User` 型のデータを受け取る関数を作ったんだけど、`name` も `age` も入ってないよ？ エラーにしちゃうからね！」
……TypeScript君、それは困るよ！全部そろってないと怒られちゃうの？ という場面で登場するのが、今回主役の `Partial
—
2. `Partial` ってなに？（身の回りの例え話）
`Partial
イメージとしては、「オーダーメイドの注文書」 を思い浮かべてみてください。
最初から完璧に決まっているセットメニュー（通常の `User` 型）とは違って、`Partial
- 名前だけ変えてもいい
- メールアドレスだけ変えてもいい
- 全部空っぽでも、まあエラーにはならない（意味はないけど）
そんな「融通のきく状態」を、たった一語で作り出してくれるのが `Partial
—
3. 実際のコードで動きを見てみましょう
百聞は一見に如かず。実際にエディタを叩く気持ちで、コードを見ていきましょう。
まずは、通常の厳しい世界から。
// ユーザーの型定義
interface User {
id: number;
name: string;
email: string;
age: number;
}
// ❌ エラーになる例
// ユーザーが「名前だけ」変えようとしたデータを送ってきたつもり
const updatingData: User = {
name: “新しい田中さん” // エラー！ id, email, age が足りないよ！と怒られる
};
ここで、`Partial
// ⭕️ Partial
// 「Userのプロパティは全部なくてもOK（オプショナル）にするよ！」という意味
const updatingData: Partial
name: “新しい田中さん” // これならエラーになりません！
};
// メールアドレスだけ変えるのももちろんOK
const updatingEmailOnly: Partial
email: “new_tanaka@example.com”
};
どうですか？ 「これだけでいいの？」と思うくらいシンプルですよね。
`Partial
—
4. 実務でよくある使い方：データ更新関数（update関数）
では、もう少し実務っぽい例を見てみましょう。受け取った部分的なデータを使って、既存のユーザーデータを更新する関数を作ってみます。
interface User {
id: number;
name: string;
email: string;
age: number;
}
// データベースにある既存のユーザー（と仮定）
const existingUser: User = {
id: 1,
name: “山田太郎”,
email: “yamada@example.com”,
age: 28
};
/
- ユーザー情報を更新する関数
- @param id 更新したいユーザーのID
- @param partialUser 変更したい部分だけのデータ（Partial
型）
/
function updateUser(id: number, partialUser: Partial
// 実際のアプリではここでデータベースを書き換えます
console.log(`ID: ${id} のユーザーを更新します`, partialUser);
}
// — 実際に使ってみる —
// パターンA：名前と年齢だけ変えたい！
updateUser(1, {
name: “山田次郎”,
age: 29
});
// ちゃんと受け入れてもらえます。emailやidがなくても怒られません！
// パターンB：メールアドレスだけ変えたい！
updateUser(1, {
email: “jiro_yamada@example.com”
});
// これもバッチリOKです。
もしここで、`Partial
—
5. つまずきやすいポイントと、チーフアーキテクトからのアドバイス
初心者の頃、`Partial
function printUserEmail(user: Partial
// コンパイルエラーにはならないけれど……
// もし user に email が含まれていなかったら、表示したときに 「undefined」 になっちゃう！
console.log(user.email.toUpperCase());
}
`Partial
function printUserEmailSafe(user: Partial
// email が存在するかどうかを確認してから使う
if (user.email) {
console.log(user.email.toUpperCase()); // 安心！
} else {
console.log(“メールアドレスは更新されませんでした”);
}
}
「オプショナルにするということは、値がない世界線も考慮しなきゃいけないんだな」という感覚を少しずつ掴んでいってくださいね。
—
おわりに
TypeScriptの型ユーティリティ（`Partial
でも、本質はとてもシンプルです。
「全部必須のままだと窮屈だから、部分的な更新のときは、ゆるふわ（任意）にしてあげようね」 という、TypeScriptからの優しい配慮なんです。
今日から、APIからのデータ更新や、フォームの入力途中の状態を管理する場面などで、ぜひこの `Partial
それでは、また次のTipsでお会いしましょう！Happy Coding!
コメント