- はじめに このセクションでは、ReactコンポーネントのPropsについて学びます。Propsは、親コンポーネントから子コンポーネントにデータを渡すのに役立ち、アプリをより柔軟でダイナミックにします。ReactのPropsを理解するために、GeekとGalの旅に参加しましょう！
ReactのPropsを探検する準備はできた？
もちろん！さらに学びたいよ。
素晴らしい！Propsは、「プロパティ」の略で、Reactの親コンポーネントから子コンポーネントにデータを渡す方法なの。
- Propsの渡し方
Propsを渡すのは簡単よ。HTML要素に属性を追加するのと同じように、子コンポーネントに属性を追加するだけでいいの！
ああ、それなら簡単そうだね！
そうよ！例えば、"App"という親コンポーネントと、"Greeting"という子コンポーネントがあるとしましょう。
function App() {
return (
<div>
<Greeting name="Alice" />
</div>
);
}
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
なるほど！Greetingコンポーネントに"name" propを渡して、それを使って個別のメッセージを表示しているんだね！
そのとおり！Propsを使うと、異なるデータでコンポーネントを再利用しやすくなるわ。
- Propsは読み取り専用
覚えておくべき重要なことは、Propsは読み取り専用であることです。子コンポーネント内でPropsを直接変更してはいけません。
じゃあ、propの値を変更する必要がある場合、どうすればいいの？
いい質問ね！子コンポーネントがPropを更新する必要がある場合、通常、コールバック関数やイベントを介して親コンポーネントに知らせるべきよ。
- 面白い例
Propsを使った面白い例はある？
もちろん！"JokeTeller"アプリを作成して、ボタンをクリックするとランダムなジョークを教えてくれるようにしましょう。ジョークをPropsとしてJokeコンポーネントに渡すわ！
import React from 'react';
function App() {
const jokes = [
'なぜニワトリは道路を渡ったの？向こう側に行くためよ！',
'なぜ6は7を怖がっていたの？だって7は8（食べ）た9（を）だから！',
'偽のスパゲッティを何と呼ぶ？インパスタ（なりすまし者）！'
];
const randomJoke = jokes[Math.floor(Math.random() * jokes.length)];
return (
<div>
<Joke joke={randomJoke} />
</div>
);
}
function Joke(props) {
return <h2>{props.joke}</h2>;
}
ハハ、それは面白いね！違うジョークをPropsとして渡して、楽しくダイナミックなアプリを作成できるのがいいね！
楽しんでもらえてうれしいわ！Propsを使ってもっと魅力的なアプリを作成する練習を続けてね！
- おわりに ReactのPropsを理解することは、柔軟でダイナミックなコンポーネントを作成するために不可欠です。親コンポーネントから子コンポーネントにデータを渡すことで、アプリをより再利用可能でメンテナンスしやすくできます。ただし、Propsは読み取り専用であり、子コンポーネント内で直接変更してはいけません！😊