【React】Props(children)について

# Propsとは
Propsとはコンポーネントに渡す引数のようなもので、コンポーネントを受け取ったPropsに応じて表示する内容を変化させます。簡単にいうと、コンポーネント（パーツ）に外部から値を与えるものです。Propsのイメージとしては、親コンポーネントから子コンポーネントに値を渡す際の入れ物のようなものになります。余談ですが、Propsは親から子へデータを一方通行（←オタクなのでアクセラレータって読みたくなります）で渡すものなので、原則Propsの中身を子から書き換えることはできません。
→ [コンポーネントについて曖昧な方はこちらへ](https://qiita.com/seino_914/items/50b3d573c92d87631165)

# Propsの使い方
Propsを使用するには渡す方（親コンポーネント）のタグの中に任意の名称を付け、値を属性値として=のあとに定義して、受け取る方（子コンポーネント）に渡します。
```react:親コンポーネント
const App = () => {
	return (
		<>
			<子コンポーネント関数名 任意の名称="値" />
		</>
	);
};
```
```react:子コンポーネント
const 関数名 = (props) => {
	return (
		<>
			<p>{ props.任意の名称 }</p>
		</>
	);
};
```
### 簡単な例（フォントサイズの指定、文字色の指定、文の内容の指定）
```react:親コンポーネント
const App = () => {
	return (
		<>
			<fontColorMessage fontSize="20px" color="skyblue" message="今日はデリシャスパーティプリキュアを見ました。" />
            <fontColorMessage fontSize="30px" color="pink" message="昨日はぼっち・ざ・ろっく！を見ました。" />
		</>
	);
};
```
スタイル（CSS）はオブジェクトで指定も出来るので、以下のように変数を定義しておき、Propsを受け取りスタイルを割り当てる事も出来ます。
```react:子コンポーネント
const fontColorMessage = (props) => {
	const fontColor = {
		fontSize: props.fontSize,
		color: props.color
	};

	return (
		<>
			<p style={ fontColor }>{ props.message }</p>
		</>
	);
};
```
すると以下のようになります。
![スクリーンショット 2022-10-30 164709.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629594/74f85d97-ade5-4d39-45f3-b4bb673e5e55.png)
※プリキュアの放送日は日曜日で、この記事の執筆日は2022/10/30（日）なので上記の文の通りプリキュアを見てから執筆してます。ちなみにぼっち・ざ・ろっく！の放送日は土曜日。まじ神アニメ。

# Propsを扱うテクニック
### Propsでの分割代入と、オブジェクトの省略記法
上記の子コンポーネント内のCSSオブジェクトコードを見てみるとPropsを扱う場合毎回props.～と書いています。
```react
const fontColor = {
		fontSize: props.fontSize, // ←　ここのこと
		color: props.color // ←　ここのこと
	};
```
同じPropsを複数回使用する時、Propsの数が多い場合に毎回props.～と書くのはめんどくさいです。そこで以下のように最初の段階でPropsを分割代入しておくことで簡潔に扱うことができます。
```react:分割代入
const fontColorMessage = (props) => {
    const { fontSize, color, message } = props; // Propsを分割代入

	const fontColor = {
		fontSize: fontSize, // propsが不要
		color: color // propsが不要
	};

	return (
        // ↓ propsが不要
		<>
			<p style={ fontColor }>{ message }</p>
		</>
	);
};
```
さらに、Propsを取り出したことにより、CSSオブジェクト内のfontSizeと、colorはプロパティ名と値の部分が同じになったので以下のようにオブジェクトの省略記法を用いて、省略して書くことができます。
```react:オブジェクトの省略記法
const fontColor = {
		fontSize, // 省略
		color // 省略
	};
```

### 引数の段階で展開
以下のように子コンポーネントでPropsを引数の()内で分割代入すると更に省略して書くことができます。
```react:子コンポーネント
const fontColorMessage = ({ fontSize, color, message }) => { // 引数の()内で分割代入
	const fontColor = {
		fontSize: fontSize,
		color: color
	};

	return (
		<>
			<p style={ fontColor }>{ message }</p>
		</>
	);
};
```

### ※destructure
Propsでの分割代入についてはプロジェクトのルール等にもよりますが、あえてprops.～と書いて分割代入しないことによってPropsから渡ってきた値だと認識しやすくする場合があります。一般的に分割代入してPropsを書くことをdestructureすると言います。頭の片隅にでも置いときましょう。

# children
上記のPropsではタグ内で任意の名称を設定していました。それ以外でもchildrenというものも存在します。以下のように任意の要素をタグで囲って使用することができます。囲まれた部分がchildrenとしてPropsに設定されます。
```react:children　親コンポーネント
const App = () => {
	return (
        // ↓ messageの部分がchildrenになった
		<>
			<fontColorMessage fontSize="20px" color="orange">明日はBLEACHの放送日です。</fontColorMessage>
            <fontColorMessage fontSize="30px" color="red">明日はジャンプの発売日です。</fontColorMessage>
		</>
	);
};
```
値を受け取った子コンポーネント内では以下のようにprops.～のあとにchildrenと付けることで内容を表示することができます。
```react:children　子コンポーネント
const fontColorMessage = (props) => {
	const fontColor = {
		fontSize: props.fontSize,
		color: props.color
	};

	return (
        // ↓ props.～のあとにchildrenを付ける
		<>
			<p style={ fontColor }>{ props.children }</p>
		</>
	);
};
```
すると以下の様になります。
![スクリーンショット 2022-10-30 184759.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629594/ae883368-eebd-0cfc-88c1-0377804bfbb1.png)
※ちなみにchildrenでは単純な文字だけではなく、以下のようにタグで囲んだ要素を丸ごと渡すこともできます。
```react:children　親コンポーネント
<fontColorMessage>
    <>
        <p>明日はBLEACHの放送日です。</p>
        <p>明日はジャンプの発売日です。</p>
    </>
</fontColorMessage>
```
子コンポーネントには以下のような値が渡ります。
```react:children　子コンポーネント
<>
    <p>明日はBLEACHの放送日です。</p>
    <p>明日はジャンプの発売日です。</p>
</>
```
プロジェクトが大きくなると複雑なコンポーネントを組む機会が多くなるのでchildrenに関しては必須知識となります。

# 最後に
ここまで読んでくれてありがとうございます！Props、childrenについて自分なりのメモ、アウトプットの一環として書きました。僕にはReact仲間がいないので、これを読んでReact仲間が少しでも増える事を願います。