1. オブジェクト型Propsとは？

オブジェクト型Propsとは、複数の値をまとめたものを一つのPropsとして渡す方法です。オブジェクトは「名前と値のセット」をまとめた箱のようなもので、現実世界でいえば「学生証」のようなイメージです。名前や生年月日、住所などの情報をひとまとめにして扱えるのがオブジェクトです。

2. 基本的なオブジェクト型Propsの使い方

ユーザーの情報をまとめたオブジェクトをPropsとして渡す例を見てみましょう。


type User = {
  name: string;
  age: number;
};

type UserCardProps = {
  user: User; // オブジェクト型
};

function UserCard({ user }: UserCardProps) {
  return (
    <div>
      <h1>{user.name}さん</h1>
      <p>{user.age}歳</p>
    </div>
  );
}

function App() {
  const user = { name: "太郎", age: 20 };

  return (
    <div>
      <UserCard user={user} />
    </div>
  );
}

（画面に「太郎さん」と「20歳」と表示されます）

3. ネストされたオブジェクトをPropsで扱う

オブジェクトの中にさらにオブジェクトを含む「ネスト構造」もPropsで渡せます。例えば住所を含むユーザー情報をまとめる場合です。


type Address = {
  city: string;
  zip: string;
};

type User = {
  name: string;
  age: number;
  address: Address; // ネストされたオブジェクト
};

type UserCardProps = {
  user: User;
};

function UserCard({ user }: UserCardProps) {
  return (
    <div>
      <h1>{user.name}さん</h1>
      <p>{user.age}歳</p>
      <p>{user.address.city}（郵便番号: {user.address.zip}）</p>
    </div>
  );
}

function App() {
  const user = {
    name: "花子",
    age: 25,
    address: { city: "東京", zip: "123-4567" }
  };

  return (
    <div>
      <UserCard user={user} />
    </div>
  );
}

（画面に「花子さん」「25歳」「東京（郵便番号: 123-4567）」と表示されます）

4. オブジェクト型Propsを分割代入で扱う

Propsを受け取るときに分割代入を使うと、コードがすっきりします。分割代入とは「オブジェクトの中の特定の値を取り出す書き方」です。


type User = {
  name: string;
  age: number;
};

type UserCardProps = {
  user: User;
};

function UserCard({ user: { name, age } }: UserCardProps) {
  return (
    <div>
      <h1>{name}さん</h1>
      <p>{age}歳</p>
    </div>
  );
}

（画面にユーザー名と年齢が表示されます）