先生と生徒の会話形式で理解しよう

生徒

「ReactでPropsを渡さなかったときに、自動で値を入れる方法ってありますか？」

先生

「はい、それがデフォルト値を設定する方法です。Propsに値が渡されなかった場合に、あらかじめ決めた値を自動で使うことができます。」

生徒

「なるほど！例えばどういうときに使うんですか？」

先生

「たとえばボタンの色や文章が渡されなかった場合でも、見た目や動作が崩れないようにするために使います。実際のコードを見てみましょう！」

1. デフォルト値とは何か？

デフォルト値とは「もし何も渡されなかったときに使う標準の値」のことです。日常生活に例えると、自動販売機で飲み物を買うときに「カップがない場合は自動で紙コップが出てくる」という仕組みに似ています。ReactでもPropsに値が指定されなかったときに備えて、デフォルト値を設定しておくと便利です。

2. Propsにデフォルト値を設定する基本方法

React（TypeScript）では、Propsにデフォルト値を設定する方法はいくつかあります。最もシンプルなのは、コンポーネントの引数でデフォルト値を指定する書き方です。


type ButtonProps = {
  label?: string; // オプショナル
};

function Button({ label = "クリック" }: ButtonProps) {
  return <button>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="送信" />
      <Button />
    </div>
  );
}

（1つ目のボタンには「送信」と表示され、2つ目のボタンには「クリック」と表示されます）

3. デフォルト値を使うメリット

デフォルト値を設定することで、次のようなメリットがあります。

コードがシンプルになる：呼び出す側で毎回Propsを指定しなくてもよい。
表示が崩れない：値が渡されなかったときでも、見た目が整う。
初心者でも使いやすい：最低限のPropsだけで動作するので学習しやすい。

4. 複数のPropsにデフォルト値を設定する例

複数のPropsにデフォルト値を設定することもできます。たとえばボタンの色や大きさに標準の設定を与える場合です。


type ButtonProps = {
  label?: string;
  color?: string;
  size?: "small" | "medium" | "large";
};

function Button({ label = "ボタン", color = "blue", size = "medium" }: ButtonProps) {
  return (
    <button style={{ backgroundColor: color, fontSize: size === "large" ? "24px" : size === "small" ? "12px" : "16px" }}>
      {label}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button label="保存" color="green" size="large" />
      <Button />
    </div>
  );
}

（1つ目のボタンは緑色で大きめに表示され、2つ目のボタンは青色の標準サイズで「ボタン」と表示されます）

5. デフォルト値と必須Propsの使い分け

すべてのPropsにデフォルト値を付ける必要はありません。たとえば「ユーザー名」のように必ず必要な情報は必須にすべきです。一方で「色」や「説明文」のように省略できるものにはデフォルト値を設定しておくと便利です。このように必須とオプショナルを上手に組み合わせることで、Reactのコンポーネントは使いやすくなります。