デフォルトpropsを設定する

Reactでは、親コンポーネントからpropsが渡されなかった場合に使用される「デフォルト値」を設定することができます。TypeScript（TSX）環境では、関数引数のデフォルト値を使うのが一般的です。

1. 関数引数でデフォルト値を指定する（推奨）

TypeScriptでは、propsの分割代入時にデフォルト値を指定することで、安全かつ簡潔に記述できます。

type Props = {
  title?: string;
};

const Header = ({ title = "デフォルトタイトル" }: Props) => {
  return 
<h1>{title}</h1>;
};

✅ titleが渡されなかった場合、自動的に "デフォルトタイトル" が使われます。

2. 数値やbooleanのデフォルト値

type Props = {
  count?: number;
  visible?: boolean;
};

const Box = ({ count = 1, visible = true }: Props) => {
  return visible ? 
<p>表示数: {count}</p> : null;
};

• 型は ? をつけて省略可能にしておく必要があります。
• undefined の場合にのみデフォルト値が適用されます。

3. childrenのデフォルト値（例）

type Props = {
  children?: React.ReactNode;
};

const Wrapper = ({ children = 
<p>デフォルトの内容</p> }: Props) => {
  return <div className="wrapper">{children}</div>;
};

4. 関数外でデフォルト値を定義したい場合（オブジェクトのmerge）

type Props = {
  color?: string;
};

const defaultProps = {
  color: "blue",
};

const Box = (props: Props) => {
  const { color } = { ...defaultProps, ...props };

  return <div style={{ color }}>{color}色のテキスト</div>;
};

• このように ...props をmergeすれば、外部定義したデフォルト値を使うことも可能です。
• 状況に応じて 再利用可能なデフォルト定義 を共有したい場合に便利です。

5. React.FC使用時の注意点

かつてはMyComponent.defaultProps = {...}のように定義されることがありましたが、現在はTypeScript環境では非推奨です。

// 非推奨：型推論が効かず、IDE補完も弱くなる
MyComponent.defaultProps = {
  title: "..."
};

🎯 推奨されるのは、関数引数のデフォルト値による定義です。

propsにデフォルト値を設定することで、呼び出し側の記述を簡潔に保ちつつ、UIの安定性や安全性も確保できます。