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

生徒

「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のコンポーネントは使いやすくなります。

6. まとめてPropsを扱うときの注意点

Propsにデフォルト値を設定するときは、記述場所や書き方に注意しましょう。特にオブジェクトや配列のPropsにデフォルト値を付ける場合は、コンポーネントの外で定義した定数を使うと良いです。これにより毎回新しいインスタンスを作らず、パフォーマンスを保ちながら安全に利用できます。

まとめ

ReactのPropsデフォルト値の重要なポイントを振り返る

ReactにおけるPropsのデフォルト値は、コンポーネント設計において非常に重要な役割を持っています。Propsとは親コンポーネントから子コンポーネントへ値を受け渡す仕組みであり、アプリケーションの再利用性や保守性に大きく関わる要素です。その中でデフォルト値を設定することで、値が渡されなかった場合でも安定した表示や動作を維持することができるようになります。

特にReact初心者の方にとっては、Propsが未定義のまま扱われることによってエラーや意図しない表示崩れが発生するケースが多く見られます。そのため、最初の段階からデフォルト値の考え方を理解し、適切に実装できるようになることが大切です。これは実務でも頻繁に使われるテクニックであり、現場でのコード品質にも直結します。

デフォルト値を使うことで得られる設計のメリット

デフォルト値を設定することで、コンポーネントの利用者は最低限のPropsだけでコンポーネントを使用できるようになります。これによりコードの記述量が減り、開発効率が向上します。また、値の未指定による不具合を未然に防ぐことができるため、ユーザー体験の向上にもつながります。

さらに、デフォルト値を適切に設計することで、コンポーネントの意図が明確になります。例えばボタンコンポーネントであれば、標準のラベルや色を定義しておくことで、開発者間での認識のズレを防ぐことができます。このように、デフォルト値は単なる便利機能ではなく、設計思想の一部として考えることが重要です。

実務で役立つデフォルト値の設計パターン

実務では、すべてのPropsにデフォルト値を設定するのではなく、必要なものだけに限定することが重要です。必須となる情報は明確に必須として扱い、省略可能なものに対してのみデフォルト値を設定することで、コードの可読性と安全性を両立できます。

また、配列やオブジェクトをデフォルト値として扱う場合には、毎回新しい値を生成しないように注意する必要があります。外部で定義した定数を利用することで、無駄な再生成を防ぎ、パフォーマンスの低下を回避することができます。このような細かな工夫が、長期的に見て大きな差を生み出します。

サンプルコードで理解を深める

ここでは、デフォルト値の考え方を活かした実践的なサンプルを紹介します。複数のPropsに対して適切にデフォルト値を設定することで、柔軟で再利用しやすいコンポーネントを作成できます。


type CardProps = {
  title?: string;
  description?: string;
  bgColor?: string;
};

function Card({
  title = "タイトル未設定",
  description = "説明がありません",
  bgColor = "#f8f9fa"
}: CardProps) {
  return (
    <div style={{ backgroundColor: bgColor, padding: "16px", borderRadius: "8px" }}>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="React学習" description="Propsの理解を深める" bgColor="#d1ecf1" />
      <Card />
    </div>
  );
}

（1つ目のカードは指定した内容で表示され、2つ目のカードはデフォルトのタイトルと説明が表示されます）