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

生徒

「先生、ReactとTypeScriptを一緒に使うと便利だと聞いたんですが、Propsってなんですか？」

先生

「良い質問だね。Propsとはコンポーネントに渡すデータや値のことを指します。TypeScriptを使うと、そのPropsの型をしっかり定義できるんだ。」

生徒

「なるほど！でも、Propsにデフォルトの値を入れる方法はあるんですか？」

先生

「もちろん。ReactではデフォルトPropsを設定できるし、TypeScriptと一緒に使うことで型安全に扱えるんだ。具体例を見ながら学んでいこう！」

1. TypeScriptとReactでPropsを型定義する基本

まずはReactとTypeScriptの組み合わせで、コンポーネントに渡すPropsを型定義する方法を理解しましょう。TypeScriptは「型安全」と呼ばれる仕組みを提供しており、誤ったデータ型を渡したときにエラーを検出してくれる便利な言語です。型安全とは、たとえば数字を入れるべきところに文字を入れてしまった場合に、すぐに間違いを教えてくれる仕組みのことです。

ReactのコンポーネントにPropsを渡すときは、まずインターフェース（interface）を使って型を定義します。インターフェースとは、簡単に言うと「どんなデータを受け取るのかを説明する設計図」です。


import React from "react";

interface GreetingProps {
  name: string;
  age?: number;
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>こんにちは、{name}さん！</h1>
      {age && <p>あなたは{age}歳ですね。</p>}
    </div>
  );
};

export default Greeting;

（画面に「こんにちは、山田さん！」と表示され、年齢を渡した場合は「あなたは20歳ですね。」と追加で表示されます）

2. デフォルトPropsとは？

デフォルトPropsとは、コンポーネントにPropsが渡されなかったときに使われる「初期値」のことです。たとえば「名前を入力してね」と表示したい場合に、何も渡されなかったときのためにデフォルトの値を設定することができます。

これは日常生活に例えると、スマートフォンの設定で「初期設定」があるのと似ています。ユーザーが自分で設定を変更しなくても、あらかじめ決められた標準の設定が用意されている、というイメージです。

3. TypeScriptでデフォルトPropsを設定する方法

実際にTypeScriptでデフォルトPropsを設定する方法を見てみましょう。方法はいくつかありますが、もっともシンプルでわかりやすいのは「引数の分割代入にデフォルト値を指定する方法」です。


import React from "react";

interface ButtonProps {
  label?: string;
}

const Button: React.FC<ButtonProps> = ({ label = "クリック" }) => {
  return <button>{label}</button>;
};

export default Button;

（Propsを渡さずに使った場合は「クリック」と表示され、Propsを渡した場合はその内容が表示されます）

このようにすると、Propsを渡さなかったときでもエラーにならず、デフォルトの値が表示されるので安心です。

4. デフォルトPropsと必須Propsの違い

Propsには「必須」と「任意」の2種類があります。必須Propsは必ず渡さなければならないもので、渡さないとTypeScriptがエラーを出します。一方、任意Propsは渡してもしなくてもよいものです。任意Propsを扱うときにデフォルトPropsを設定しておくと、抜け漏れがあっても問題なく動作するようになります。

たとえば「ボタンのラベルは任意だけど、なければクリックと表示してね」といった使い方です。この考え方を覚えておくと、実際の開発でとても役立ちます。

5. よくある間違いと注意点

初心者の方がつまずきやすいポイントとして、デフォルトPropsを設定したのに型定義を忘れてしまうケースがあります。TypeScriptは型をしっかり定義することで本来の力を発揮するので、Propsを定義するときは必ずinterfaceやtypeを使うようにしましょう。

また、Reactの古い書き方ではComponent.defaultPropsを使う方法もありましたが、現在は関数コンポーネントで引数のデフォルト値を使う方法が主流です。新しい書き方を覚えておけば安心です。

6. デフォルトPropsを活用した便利な使い方

デフォルトPropsは単なる補助機能ではなく、コンポーネントを柔軟に使えるようにする大切な仕組みです。たとえば、ボタンの色や大きさにデフォルト値を設定しておけば、毎回すべての値を渡す必要がなくなり、簡単に再利用できるようになります。


interface StyledButtonProps {
  label?: string;
  color?: string;
}

const StyledButton: React.FC<StyledButtonProps> = ({
  label = "送信",
  color = "blue",
}) => {
  return <button style={{ backgroundColor: color }}>{label}</button>;
};

（Propsを渡さなかった場合は「送信」というラベルと青色のボタンが表示されます）

このようにしておくと、初心者でも迷わずにコンポーネントを利用でき、プロジェクト全体の統一感も出やすくなります。