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

生徒

「先生！Reactのコンポーネントでpropsを使うのはわかってきたんですが、値を渡さなかったときってどうなるんですか？」

先生

「とてもいい疑問ですね。値が渡されなかった場合、何も表示されなかったりundefinedになったりするんです。」

生徒

「それってちょっと不安ですね……。何か初期値を決めておく方法ってあるんですか？」

先生

「実はReactでは、propsに“デフォルト値”を設定できるんです。今回はその方法を詳しく説明していきましょう！」

1. ReactのPropsとは何か？

Reactでは、コンポーネントを呼び出すときに外からデータを渡すことができます。このデータをprops（プロップス）と呼びます。
たとえば「名前」や「メッセージ」など、表示する内容を動的に変えたいときにpropsが使われます。

propsとは「properties（プロパティ）」の略で、直訳すると「属性」という意味です。HTMLの<img src="...">のような属性をイメージすると分かりやすいでしょう。

2. Propsに値が渡されなかった場合は？

コンポーネントを使うときにpropsを渡し忘れると、Reactではundefined（未定義）になってしまいます。
そのまま画面に表示しようとすると、何も表示されなかったり、「undefined」と文字が出てしまったりして、見た目が崩れる原因になります。

こういった「もし渡されなかったとき」に備えて、あらかじめデフォルト値（初期値）を決めておくと安心です。

3. デフォルト値を設定する基本の方法

Reactの関数コンポーネントでは、propsのデフォルト値を設定するには「引数に初期値を代入する」という書き方を使います。


function Greeting({ name = "ゲスト" }) {
  return <h2>こんにちは、{name}さん！</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting />
    </div>
  );
}

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

このように、nameに「= "ゲスト"」と書くことで、propsが渡されなかったときに自動で「ゲスト」が使われるようになります。

4. 引数が複数ある場合の書き方

propsが複数ある場合も、それぞれにデフォルト値をつけておくことができます。


function Welcome({ name = "ゲスト", age = 0 }) {
  return <p>{name}さんは{age}歳です。</p>;
}

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

（画面に「花子さんは20歳です。」「ゲストさんは0歳です。」と表示されます）

こうすれば、必要なpropsが渡されなくてもエラーにならず、見た目も崩れにくくなります。

5. オブジェクト形式のpropsにデフォルト値をつける

少し応用になりますが、propsがオブジェクト形式で渡されるときにも、デフォルト値を設定できます。これは初心者の方がつまずきやすいポイントですが、仕組みを知れば難しくありません。


function Profile({ user = { name: "匿名", age: "不明" } }) {
  return (
    <div>
      <p>名前：{user.name}</p>
      <p>年齢：{user.age}</p>
    </div>
  );
}

このようにオブジェクトごと初期値を設定しておけば、userが未定義のときでもエラーになりません。

6. 初心者がよくあるミスと対策

よくあるミス1：propsが渡されなかったのにデフォルト値を設定していない → 表示が壊れる
→ 解決策：すべてのpropsにデフォルト値をつけておく癖をつけましょう。

よくあるミス2：デフォルト値を設定したのに、違う場所で上書きしてしまった
→ 解決策：propsの優先順位を意識し、明示的に渡した値が優先されることを理解しましょう。

よくあるミス3：オブジェクトの中の値に初期値を設定し忘れて、undefinedでエラーになる
→ 解決策：オブジェクトの初期構造ごとデフォルト値で用意しておくと安全です。

7. デフォルト値はなぜ大切なのか？

初心者にとって、propsにデフォルト値を設定することは、予期しない不具合を防ぐための「保険」のような役割を果たします。

すべてのパターンでpropsが必ず渡されるとは限りません。たとえば「表示したい名前がまだ決まっていない」「APIのデータ取得が遅れている」といった状況でも、エラーを出さずにやさしく初期表示ができるようになるのが、デフォルト値のメリットです。

Reactのpropsにデフォルト値を設定する習慣を身につけることで、初心者でも安心して柔軟なコンポーネント開発ができるようになります。

まとめ

Reactのコンポーネントでpropsにデフォルト値を設定する考え方は、初心者にとって理解しておきたい大切な基礎です。この記事で扱ったように、propsとは外からコンポーネントに渡す値であり、コンポーネントの柔軟性を高める重要な仕組みです。しかし、実際のアプリケーションでは「値が渡されない」ケースも多く、そのままだと表示崩れやエラーの原因になります。そのため、デフォルト値を設定しておくことは、安定した画面表示につながる非常に重要な対策になります。

特に関数コンポーネントで「引数に初期値を書く」方法はシンプルで強力です。例えば{ name = "ゲスト" }と書くだけで、propsが渡されなかった場合でも安全に表示できるため、初心者でもすぐに取り入れられます。複数のpropsを扱うときにはそれぞれに初期値を付けられ、表示の安定性が高まります。さらに、オブジェクト形式のpropsにもデフォルト値を付けられるため、実務的な応用にも役立ちます。特にAPIからのデータが遅れている場合に、オブジェクトの初期値を設定しておくと、undefinedによるエラーを避けられる点は大きなメリットです。

また、初心者がやりがちなミスとして「デフォルト値を設定していない」「意図しない上書き」「オブジェクト内の値に初期値を書いていない」などがあり、これらはどれも小さな注意で防ぐことができます。propsはReactの核になる仕組みであり、値がどのように渡されるか、デフォルト値がどう作用するかを理解することで、より読みやすく安定したコンポーネントを作れるようになります。

Reactのpropsにデフォルト値を設定する技術は、初歩ながら非常に応用範囲が広く、ページの品質やユーザー体験に大きく影響します。今回の内容をしっかり身につければ、複雑な画面構築でも落ち着いて対応でき、開発全体の安定感が増すでしょう。

サンプルプログラムの振り返り

以下は、propsにデフォルト値を設定したシンプルなサンプルです。この記事で学んだ内容をまとめて確認できます。


function MessageBox({ title = "お知らせ", message = "内容がありません" }) {
  return (
    <div className="card p-3">
      <h3>{title}</h3>
      <p>{message}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <MessageBox title="重要なお知らせ" message="本日のイベントは中止です。" />
      <MessageBox />
    </div>
  );
}

この例では、MessageBoxコンポーネントにtitleとmessageのデフォルト値を設定しています。値が渡された場合はその値が優先され、渡されなかった部分には初期値が適用されるため、どんな状況でも整った表示が維持されます。実際のアプリケーションでもよく使われる構成であり、propsとデフォルト値の関係がとても分かりやすい例です。

先生と生徒の振り返り会話

生徒「propsのデフォルト値ってこんなに便利だったんですね！値が渡されなくても安心できるのがすごく助かります。」

先生「その通りです。予期しないundefinedを防ぐだけで、エラーもしっかり減りますし、画面の安定感も高まります。」

生徒「オブジェクトにデフォルト値をつけるのが難しいと思っていたんですが、意外と単純な仕組みなんですね。」

先生「オブジェクト全体を初期値として用意しておけば安全に扱えますよ。APIの取得が遅いときなど特に役立ちます。」

生徒「確かに実務でも使いそうです！propsのデフォルト値って大切なんだとよくわかりました。」

先生「これからReactを使うときは、どのpropsに初期値を設定すべきか意識すると、より質の高いコードを書けるようになりますよ。」