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

生徒

「Reactでコンポーネントを作るときに、Propsを渡さなかったらどうなりますか？」

先生

「Propsを渡さないと、その値はundefined（未定義）になります。そのまま表示すると空っぽに見えることもありますね。」

生徒

「それだと困ることがありそうです。何か対策はありますか？」

先生

「そんなときに便利なのが、defaultPropsを使ってデフォルト値を設定する方法です。具体的に見ていきましょう！」

1. Propsにデフォルト値を設定する必要性とは？

Reactのコンポーネントは、親コンポーネントから受け取るPropsをもとに表示や処理を行います。ところが、親から値が渡されないと、そのPropsはundefined（未定義）になります。undefinedのまま文字列に埋め込むと「空っぽ」に見えたり、数値や画像などの場面では想定外の表示崩れやエラーの原因になります。

とくに「ユーザー名」「ボタンの文言」「画像の代替テキスト」のように、そのまま画面に出すPropsは未定義だとユーザー体験が悪化します。こうした事故を防ぐために、あらかじめデフォルト値（初期値）を用意しておくのが安全です。

簡単なサンプル（未定義だとどう見える？）


function Greeting({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

// 親側で <Greeting /> とだけ書く（name を渡さない）と、name は undefined
// => 画面には「こんにちは、 さん！」のように空欄が出る

未定義のままだと「空白」や「崩れ」に見えることがあります。
こうしたリスクを減らすには、Propsにデフォルト値を準備しておくのが定番です。

初心者の方は、まず次のポイントを押さえましょう：

表示に直結するPropsは、未定義だと体験が悪化しやすい。
API遅延や入力漏れなど、実運用では「渡されない」場面が必ず起きる。
デフォルト値を用意すれば、画面が常に安全で読みやすい状態を保てる。

このように、Propsが渡らない状況でもアプリが安定して動くようにするため、Reactではデフォルト値の設計が欠かせません。

2. defaultPropsを使った基本的な書き方

classコンポーネントでは、defaultPropsに値を用意しておくと、親コンポーネントからPropsが渡されなかったときに自動でその初期値が使われます。これにより、未定義（undefined）による表示崩れや思わぬエラーを避けられます。

基本サンプル


import React from "react";

class Greeting extends React.Component {
  render() {
    return <h1>こんにちは、{this.props.name}さん！</h1>;
  }
}

// 親が name を渡さない場合に備えて初期値を設定
Greeting.defaultProps = {
  name: "ゲスト"
};

export default Greeting;

親で <Greeting /> とだけ書いても、name は「ゲスト」に置き換わって表示されます。
=> 画面には「こんにちは、ゲストさん！」と出るので安全です。

親コンポーネント側の呼び出し例


function App() {
  return (
    <div>
      {/* 1. name を渡さない（defaultProps が使われる） */}
      <Greeting />

      {/* 2. name を渡す（渡した値が優先） */}
      <Greeting name="田中" />
    </div>
  );
}

ポイントは次の3つです。

defaultPropsはclassコンポーネント専用の基本テクニック。
親から値が来ないときだけ初期値が適用され、渡された場合は渡された値が優先されます。
画面に直接出す文字列や、ボタンのラベルなどは初期値を用意すると見た目が安定します。

まずは文字列の初期値から始めると理解しやすいです。数字や真偽値でも同様に設定できます。ここを押さえておくと、次のセクション以降の応用もスムーズに読めます。

3. 関数コンポーネントでのデフォルト値設定

関数コンポーネントでは、Propsの分割代入（デストラクチャリング）にデフォルト値を指定するのがいちばん簡単です。親コンポーネントから値が渡されなかったときだけ、その初期値が使われます。余計な設定ファイルや特別なAPIは不要で、読みやすく保守もしやすい書き方です。

基本サンプル（関数コンポーネント）


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

export default Greeting;

親が <Greeting /> とだけ書いた場合でも、name は「ゲスト」に置き換わって表示されます。
=> 画面には「こんにちは、ゲストさん！」と出るので、未定義による表示崩れを避けられます。

親コンポーネント側の呼び出し例


function App() {
  return (
    <div>
      {/* デフォルト値が使われる例 */}
      <Greeting />

      {/* 渡した値が優先される例 */}
      <Greeting name="田中" />
    </div>
  );
}

覚えておくポイント

分割代入に「= 初期値」を書くと、未定義のときだけその値が使われます。
渡された値がある場合は、必ず渡された値が優先されます（上書きしません）。
表示ラベルやメッセージなど、画面に直結するPropsに設定しておくと安定した表示になります。

まずは文字列のメッセージから始めると理解がスムーズです。仕組みはシンプルなので、小さなコンポーネントでも積極的に活用してみてください。

4. defaultPropsと分割代入の違い

では、classコンポーネントのdefaultPropsと、関数コンポーネントの引数デフォルト値は何が違うのでしょうか？

defaultProps：classコンポーネントでよく使われる方法。React公式でもサポートされています。
分割代入のデフォルト値：関数コンポーネントで自然に書ける方法。よりシンプルで、現在はこちらが主流です。

どちらを使うかはコンポーネントの種類によりますが、最近のReactでは関数コンポーネントが推奨されているので、分割代入を使った書き方を覚えておくと便利です。

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

もちろん、ひとつのPropsだけでなく、複数のPropsに対してデフォルト値を設定することもできます。


function UserCard({ name = "ゲスト", age = 20, country = "日本" }) {
  return (
    <div>
      <h2>{name}さんのプロフィール</h2>
      <p>年齢: {age}</p>
      <p>国: {country}</p>
    </div>
  );
}

export default UserCard;

（Propsを渡さなくても「ゲストさんのプロフィール」「年齢: 20」「国: 日本」と表示されます）

このように、Propsが不足していてもデフォルト値を使うことで安全に表示ができます。実際のアプリ開発では「ボタンの色」「サイズ」「表示する文言」などによく使われます。

6. 初心者が気をつけるポイント

最後に、Propsのデフォルト値を設定するときに初心者が注意すべきポイントを整理します。

Propsをそのまま表示するときは、デフォルト値を設定しておくと安心。
関数コンポーネントでは分割代入でのデフォルト値指定がシンプルで便利。
classコンポーネントを使う場合はdefaultPropsを使う。
複数のPropsにもデフォルト値を指定できる。

これらを意識することで、Reactのコンポーネントがより堅牢で使いやすくなります。

まとめ

この記事ではリアクトのコンポーネントにおけるプロップスのデフォルト値という基礎的でありながら実務でも出番の多い考え方を順を追って確認しました。まず、親から値が渡らないときに未定義となってしまう挙動を具体例で眺め、画面に直接出す文言や見た目に影響する数値が空白になることで読み手の理解や操作が妨げられることを整理しました。つづいて、クラスコンポーネントではデフォルトプロップスを宣言するだけで初期値を設定でき、関数コンポーネントでは分割代入に初期値を添えるだけで同じ効果が得られることを確認しました。さらに、複数のプロップスをまとめて初期化する例を通して、名前や年齢や地域の情報が部分的に欠けてもカードの表示が破綻しない設計のコツを身につけました。どの節でも共通しているのは、渡されないことが前提の日常的な状況を最初から想定し、読める文章と崩れない見た目を守るという視点です。

実践ミニチェックリスト

画面に出る文言と数値に初期値を与え、未定義の空白をなくす。
未定義だけ初期値に置き換え、空文字やぜろといった意図のある値は尊重する。
同じ文言の初期値は統一し、見出しや説明の語尾をそろえる。
表示、計算、判定の三箇所で未定義の影響を点検する。

小さなサンプル

次の例では通知カードに初期値を与え、読み込み順に左右されず読める画面を守っています。呼び出し側の記述量も少なく済むため、部品の再利用が進みます。


function NoticeCard({
  title = "おしらせ",
  message = "ただいま準備をおこなっています。",
  highlight = false
}) {
  return (
    <div className={highlight ? "card p-3 border border-2" : "card p-3"}>
      <h3>{title}</h3>
      <p>{message}</p>
    </div>
  );
}

function Page() {
  return (
    <div>
      <NoticeCard />
      <NoticeCard title="メンテナンス" />
      <NoticeCard message="よるの時間に作業をおこないます。" highlight={true} />
    </div>
  );
}

初期値で読みやすさを守ると、値の抜けや通信の揺らぎでも落ち着いた見た目を保てます。

初期値は目立たない存在ですが、画面の安定と理解のしやすさを下支えします。文言、数値、画像の代替文、リンクの案内文など、読み手が迷いそうな箇所に最初から手を打っておくと、崩れを気にせず開発を進められます。未定義と無効値を区別し、必要な箇所だけ初期値で補う姿勢が大切です。

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

生徒

「きょうの学びは、値が来ない場面を先回りして初期値で受け止める、という考え方でした。文言や数値が未定義だと画面が空っぽになってしまうので、最初から用意しておくのが安心ですね。」

先生

「その通りです。分割代入に初期値を書く方法は関数コンポーネントで自然に書けますし、クラスコンポーネントならデフォルトプロップスが役に立ちます。」

生徒

「未定義だけ初期値で置き換え、空文字やぜろのような明示的な値はそのまま使うという区別も覚えました。呼び出し側を試したら違いがよく分かりました。」

先生

「文言の初期値を統一すると、表記がそろって修正も楽になります。小さな取り決めが大きな安心につながりますよ。」

生徒