Props (プロップス) とは

親コンポーネントから子コンポーネントへデータを渡すための仕組みです。関数の引数と同じように機能し、コンポーネントを再利用可能にします。

// 子コンポーネント：データを受け取って表示
const WelcomeMessage = (props) => {
  return <h1>こんにちは、{props.name}さん！</h1>;
};

// 親コンポーネント：データを渡して呼び出す
const App = () => {
  return <WelcomeMessage name="User" />;
};

分割代入による記述の簡略化

JavaScriptの「分割代入」を使うと、props.xxx と書かずに直接変数として扱えるため、コードがスッキリします。

// 推奨される書き方：引数の部分で直接分解する
const WelcomeMessage = ({ name }) => {
  return <h1>こんにちは、{name}さん！</h1>;
};

TypeScript との相乗効果

TypeScriptで受け取るデータの型（interface など）を定義することで、以下のメリットが得られます。

• 渡し忘れ・間違いの防止: 必須のデータを渡し忘れたり、違う型のデータを渡すとエラーで教えてくれます。
• 強力な入力補完: エディタが「どんなPropsが必要か」を候補に出してくれるため、開発スピードが向上します。

まとめ

• Props: コンポーネントの「設定値」や「入力データ」。
• 一方通行: データは常に「親から子」へ流れます。
• 再利用性: 渡すデータ（Props）を変えるだけで、同じ部品を使い回せます。