こんにちは！Reactの学習、楽しく進められていますか？
画面にボタンを表示したり、文字を入力できるようにしたり……少しずつ自分の思い通りに動くようになってくると、Reactの面白さがグッと分かってきますよね。
さて、今日一緒に見ていくのは「Props（プロップス）の型操作」というテーマです。
「おっ、なんだか急に難しそうな名前が出てきたぞ……」と思いましたか？大丈夫ですよ、深呼吸してください。今日お話しするのは、コンポーネントを「もっと使い回しやすく、もっと自分に優しくする」ための、とっても便利な魔法のテクニックです。
TypeScriptを使っていると、「あれ、このProps、最初は必須にしたかったけど、状況によってはなくても動くようにしたいな……」とか、逆に「全部の項目をガチガチに必須にして、設定漏れを防ぎたいな！」と思う場面によく出会います。
そんなときに救世主となるのが、今回主役の `Partial`（パーシャル） と `Required`（リクワイアード） です。
身近な例えを交えながら、優しく紐解いていきましょう！
—
1. そもそも「Propsの柔軟な制御」ってどういうこと？
まずはイメージしやすいよう、身の回りのもので例えてみましょう。そうですね……「カスタマイズ注文ができるハンバーガー屋さん」を想像してみてください。
標準のハンバーガーセットには、以下の内容が決まっています。
- パンの種類（必須）
- お肉の焼き加減（必須）
- トッピングのチーズ（任意）
- ドリンク（任意）
Reactのコンポーネントもこれと一緒です。親から子へデータを渡す「Props」にも、「絶対に必要なもの（必須）」と「なくてもデフォルトで動くもの（任意）」があります。
ここで、開発をしているとこんなワガママな要望が出てきます。
- 「この画面では、細かい設定はいいから、ぜーんぶお任せ（任意）でパッと表示させたい！」
- 「逆に、この管理画面のフォームでは、うっかり空欄を作られたら困るから、ぜーんぶの項目を必ず入力（必須化）させたい！」
これを、わざわざ別の型をイチから書き直して作るのは、コードが重複してしまって面倒だし、後から変更があったときに地獄を見ます。
そんなとき、TypeScriptの標準機能であるユーティリティ型の `Partial` や `Required` を使えば、既存の型をベースにして、一瞬で「全部任意」にしたり「全部必須」にしたりできるんです。
—
2. `Partial` で「ぜーんぶ任意（あってもなくてもいいよ）」にする
まずは `Partial` から見ていきましょう。
英語の「partial（部分的な）」という意味の通り、「指定した型のプロパティを、すべて『任意（Optional）』に変換する」という力を持っています。型名の後ろに `?` がパタパタと自動でついてくれるようなイメージです。
🛒 例え話：オーダーメイドの家具カタログ
例えば、「プロフィールカード」を表示するコンポーネントを作ったとしましょう。
// 最初に定義した、しっかり者の基本の型
type ProfileProps = {
name: string; // お名前（必須）
age: number; // ご年齢（必須）
bio: string; // 自己紹介（必須）
};
この `ProfileProps` を使うと、名前も年齢も自己紹介も、すべて揃っていないとエラーになってしまいます。でも、例えば「お試し表示エリア」や「簡易版のユーザーリスト」では、名前だけあれば十分で、自己紹介はなくてもいいよね、というケースがありますよね。
そんなときに `Partial` の出番です！
import React from ‘react’;
// 基本の型
type ProfileProps = {
name: string;
age: number;
bio: string;
};
// ★ Partialを使って「すべて任意（あってもなくてもOK）」に変換！
type PartialProfileProps = Partial
// プロフィールを表示するコンポーネント
const UserProfile = (props: PartialProfileProps) => {
return (
{props.name ?? ‘名無しさん’}
年齢: {props.age ? `${props.age}歳` : ‘秘密’}
自己紹介: {props.bio ?? ‘よろしくお願いします！’}
);
};
// 使用する側（親コンポーネント）
export const App = () => {
return (
{/ おおっ、Partialのおかげで名前だけでもエラーにならない！ /}
);
};
どうでしょう？ `Partial
—
3. `Required` で「ぜーんぶ必須（絶対書いてね！）」にする
続いては、真逆の動きをする `Required` です。
こちらは、型の中に「あってもなくてもいいよ（`?` がついているもの）」が含まれていたとしても、「強制的にすべて必須（Required）にする」という、ちょっとスパルタだけど頼もしいやつです。
📝 例え話：絶対に抜けが許されない契約書のサイン
例えば、あらかじめ「初期値が入っている設定データ」があるとします。この設定データは、普段は省略可能（任意）に作られています。
type SettingsProps = {
theme?: ‘light’ | ‘dark’; // テーマ（省略時は自動でlightになる予定だった）
notifications?: boolean; // 通知設定（省略時はtrueの予定だった）
};
しかし、アカウントの「最終確認・決済画面」などでは、「テーマも通知設定も、ユーザーに必ず明示的に選んでもらいたい！」というシチュエーションがあります。そんなときに `Required` を使います。
import React from ‘react’;
type SettingsProps = {
theme?: ‘light’ | ‘dark’;
notifications?: boolean;
};
// ★ Requiredを使って、すべての項目を強制的に「必須」に変換！
type StrictSettingsProps = Required
const SettingsForm = (props: StrictSettingsProps) => {
return (
現在のテーマ: {props.theme}
通知を受け取る: {props.notifications ? ‘はい’ : ‘いいえ’}
);
};
export const App = () => {
return (
{/ ⚠️ エラー発生！「theme」や「notifications」が足りないよ！とTypeScriptが怒ってくれます /}
{/
);
};
「うっかり設定を塗り忘れてバグが起きた……」という現場のヒヤリハットを、この `Required` がビシッと防いでくれるわけですね。実務のフォーム開発などで本当に重宝します。
—
4. 実務でよくある！「一部だけを柔軟にする」応用テクニック
「全部を任意にするのは分かったけど、特定のプロパティだけ任意にしたいときはどうすればいいの？」
そんな疑問を持ったあなた、素晴らしい着眼点です！
実は、TypeScriptには `Omit` や `Pick` といった他の型操作や、既存の型を上書きするテクニックもありますが、今回は初学者のあなたが今日から使える、一番直感的な方法をこっそり教えちゃいます。
例えば、「名前は絶対必須だけど、自己紹介（bio）と年齢（age）は任意にしたい」という場合です。
type ProfileProps = {
name: string;
age: number;
bio: string;
};
// 基本の型から「name」だけはそのまま必須にして、残りを Partial にする合体技！
type FlexibleProfileProps = {
name: string; // ここは絶対必須
} & Partial
（※ `Omit` は「指定したプロパティを除外する」という意味です。今は「ふーん、そんな合わせ技もあるんだな」と心の片隅に置いておいてもらえれば大成功です！）
—
さいごに：型操作は「コードの防波堤」
お疲れ様でした！ `Partial` と `Required` についてのイメージは掴めましたでしょうか？
- `Partial
` ：ちょっと肩の力を抜いて、項目がなくても優しく受け止める（任意にする） - `Required
` ：ビシッと気を引き締めて、すべての項目入力を義務付ける（必須にする）
Reactでコンポーネントを書いていると、「あっちでもこっちでも同じような型定義を何度も書いちゃったな……」と手が疲れる瞬間が必ず来ます。そんなときは、今回紹介したユーティリティ型を思い出してください。
型はあなたを縛る窮屈なルールではなく、「未来のバグや、うっかりミスからあなたを守ってくれる心強い防波堤」です。
ぜひ、ご自身のコードエディタを開いて、試してみてくださいね。もしエラーが出ても「よし、TypeScriptが教えてくれたぞ！」と笑顔で受け止めてあげましょう。
あなたのReactライフが、より楽しく快適なものになりますように。それではまた次の記事でお会いしましょう！
コメント