5.4. コンポーネントへのプロップスの渡し方

はじめにこのStateとPropsの章の一部で、コンポーネントにPropsを渡すことに焦点を当てます。これにより、親コンポーネントから子コンポーネントにデータを渡すことができ、Reactアプリをよりモジュール化され、ダイナミックにすることができます。GeekとGalの楽しいコンビで、このエキサイティングな概念に取り組みましょう！

じゃあ、コンポーネントにPropsを渡す方法を学ぶ準備はできた？

もちろん！どのように動くのか知りたいよ。

いいね！親コンポーネントから子コンポーネントにデータを渡したいときは、Propsを使うのよ。HTMLの属性のように考えてみて！

Propsの渡し方

Propsを渡すのは簡単よ。HTML要素と同じように、子コンポーネントに属性を追加するだけでいいの。そして、子コンポーネントはその関数の中でPropsにアクセスできるわ！

それって簡単そうだね！

そうなの！例を見てみよう。親コンポーネントが"App"で、子コンポーネントが"UserInfo"だと想像してみて：

function App() {
  return (
    <div>
      <UserInfo name="Alice" age={30} />
    </div>
  );
}

function UserInfo(props) {
  return (
    <div>
      <h1>Name: {props.name}</h1>
      <h2>Age: {props.age}</h2>
    </div>
  );
}

なるほど！"name"と"age"のPropsをUserInfoコンポーネントに渡して、それを使ってユーザーの情報を表示してるんだね！

その通り！Propsを使うと、簡単に異なるデータでコンポーネントを再利用できるのよ！

面白い例

Propsを使った面白い例がある？

もちろん！ランダムにペットとその特徴を表示する"PetChooser"アプリを作ってみましょう。ペットの詳細をPropsとしてPetコンポーネントに渡すわ！

import React from 'react';

function App() {
  const pets = [
    { type: 'Dog', sound: 'Woof!', likes: 'Playing fetch' },
    { type: 'Cat', sound: 'Meow!', likes: 'Napping' },
    { type: 'Bird', sound: 'Chirp!', likes: 'Singing' }
  ];

  const randomPet = pets[Math.floor(Math.random() * pets.length)];

  return (
    <div>
      <Pet petInfo={randomPet} />
    </div>
  );
}

function Pet(props) {
  return (
    <div>
      <h2>Type: {props.petInfo.type}</h2>
      <h3>Sound: {props.petInfo.sound}</h3>
      <h4>Likes: {props.petInfo.likes}</h4>
    </div>
  );
}

ハハ、面白いね！違うペットとその詳細をPropsとして渡して、楽しくてダイナミックなアプリを作っているんだね！

楽しんでもらえてうれしいわ！Propsを使って素晴らしいアプリを作成する練習を続けてね！

おわりに ReactでコンポーネントにPropsを渡すことは、柔軟でダイナミックなコンポーネントを作成するために不可欠です。親コンポーネントから子コンポーネントにデータを渡すことで、アプリをより再利用可能で保守性の高いものにすることができます。Propsは、Reactアプリの可能性を広げます！😄