はじめに

React における props は、コンポーネント間でデータを受け渡すための重要な仕組み です。

props を使うことで、親コンポーネントから子コンポーネントへデータや関数を渡すことができます。これにより、再利用可能なコンポーネントを作成することができます。

本記事では、基本的な props の使い方から、デフォルト値の設定、関数の受け渡し、リストのレンダリングなど詳しく解説します。

1. props の基本的な使い方

1.1 親コンポーネントから子コンポーネントへデータを渡す

以下の例では、親コンポーネント App から Greeting コンポーネントへ props を渡しています。

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

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

export default App;

✅ ポイント

• props.name を使って親から受け取った値を表示。
• <Greeting name="太郎" /> で name というプロパティを渡す。

1.2 オブジェクトの分割代入を使う

props はオブジェクトなので、分割代入（Destructuring Assignment） を使うことでコードを簡潔に書くことができます。

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

✅ メリット

• props.name ではなく、直接 { name } と記述できるため、コードが短くなる。

2. props にデフォルト値を設定する

props の値が渡されなかった場合に備えて、デフォルト値を設定 することができます。

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

✅ ポイント

• name に値が渡されない場合、デフォルト値 "ゲスト" が適用される。

3. 関数を props として渡す

props には関数を渡すこともできます。

JSX
function Button({ onClick }) {
  return <button onClick={onClick}>クリック</button>;
}

function App() {
  const handleClick = () => {
    alert("ボタンがクリックされました");
  };

  return <Button onClick={handleClick} />;
}

✅ ポイント

• onClick を props として渡し、ボタンがクリックされたときに親の関数を実行。

4. リストを props に渡してレンダリングする

配列データを props として渡し、リストを動的に生成することも可能です。

JSX
function UserList({ users }) {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

function App() {
  const users = ["太郎", "花子", "次郎"];
  return <UserList users={users} />;
}

✅ ポイント

• map() を使って配列の各要素をリストアイテムとしてレンダリング。
• key プロパティを設定することで、React の再レンダリングの最適化をサポート。

5. まとめ

props を適切に活用すると、コンポーネント間でのデータの受け渡しがスムーズになり、再利用性の高いコンポーネントを作成 できます。

✅ 学んだこと

• props を使うと 親コンポーネントから子コンポーネントへデータを渡せる。
• 分割代入を使うとコードが簡潔に書ける。
• デフォルト値を設定できる。
• 関数を渡してイベント処理を実装できる。
• 配列を渡してリストを動的にレンダリングできる。

これらを活用し、より効率的な React 開発を行いましょう。