1. Propsの必須とオプショナルとは？

Reactでは、コンポーネントに値を渡す仕組みとしてProps（プロップス）があります。その中で「必須」とは、必ず渡さなければならない値のことです。一方で「オプショナル」とは、渡さなくてもエラーにならない値です。日常生活でたとえると、カレーを作るときの「ご飯」は必須ですが、「福神漬け」はあってもなくても良いオプショナルな存在と考えると分かりやすいです。

2. TypeScriptで必須Propsを指定する方法

TypeScriptでは、Propsの型を定義するときに何も記号をつけなければ、そのプロパティは必須になります。たとえば「名前」を必ず表示したい場合、次のように書きます。


type UserProps = {
  name: string; // 必須
};

function UserCard(props: UserProps) {
  return <h1>こんにちは、{props.name}さん</h1>;
}

function App() {
  return (
    <div>
      <UserCard name="太郎" /> 
      {/* nameを渡さないとエラーになる */}
    </div>
  );
}

（画面に「こんにちは、太郎さん」と表示されます）

3. TypeScriptでオプショナルPropsを指定する方法

オプショナルPropsは、型定義の後ろに「?」をつけます。これで「渡してもいいし、渡さなくてもいい」状態になります。たとえば「年齢」をオプショナルにすると次のように書けます。


type UserProps = {
  name: string;     // 必須
  age?: number;     // オプショナル
};

function UserCard(props: UserProps) {
  return (
    <div>
      <h1>こんにちは、{props.name}さん</h1>
      {props.age && <p>{props.age}歳です</p>}
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="太郎" age={20} />
      <UserCard name="花子" />
    </div>
  );
}

（1つ目は「こんにちは、太郎さん」と「20歳です」と表示され、2つ目は「こんにちは、花子さん」とだけ表示されます）

4. デフォルト値を設定する方法

オプショナルPropsには、デフォルトの値を設定することもできます。これにより、Propsを渡さなかった場合でもあらかじめ決められた値が表示されます。


type UserProps = {
  name: string;
  age?: number;
};

function UserCard({ name, age = 18 }: UserProps) {
  return (
    <div>
      <h1>こんにちは、{name}さん</h1>
      <p>{age}歳です</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="太郎" age={25} />
      <UserCard name="花子" />
    </div>
  );
}

（1つ目は「こんにちは、太郎さん」「25歳です」と表示され、2つ目は「こんにちは、花子さん」「18歳です」と表示されます）

5. 必須とオプショナルを使い分けるポイント

では、どのように必須とオプショナルを決めればよいのでしょうか。基本的には「その値がないと意味が通じない」場合は必須にし、それ以外はオプショナルにすると良いです。たとえば「ユーザー名」は必須ですが、「プロフィール画像」はオプショナルでも大丈夫です。必須とオプショナルを適切に使い分けることで、Reactのコンポーネントは柔軟で使いやすくなります。