環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0
まとめ
Propsとは
React コンポーネントは互いにやりとりをする際に props というものを使います。親コンポーネントは子コンポーネントに props を渡すことで情報を伝えることができるのです。props は HTML の属性と似ていると思われるかもしれませんが、props ではオブジェクトや配列、関数などのあらゆる JavaScript の値を渡すことができます。
つまり、
Propsは、Reactコンポーネント間でデータを渡すための仕組み
Propsは、コンポーネントに対して引数のような役割を果たし、親コンポーネントから子コンポーネントへ情報（オブジェクトや配列、関数などのあらゆる JavaScript の値）を渡す
なぜPropsが必要なのか
- コンポーネント間のデータ共有
- 再利用性の向上: 汎用的なコンポーネントを作成できる
- ステートと組み合わせた動的UI
親コンポーネント、子コンポーネントとは
Prposという視点のみから考えると以下
親コンポーネント: Propsを渡すコンポーネント
子コンポーネント: Propsを受け取るコンポーネント
e.g._folda_structure
├── public/
│ ├── index.html
└── src/
│ ├── index.js(index.jsx) (ここではインラインスタイルでCSSを記述)
│ ├── App.js(App.jsx) ← 親コンポーネント
│ └── components/
│ │ ├── ColorfulMessage.jsx/ ← 子コンポーネント
│ │ └── Other/
ソースコード
1. 子コンポーネント、Propsを使わない場合
フォルダ
folda_structure
├── public/
│ ├── index.html
└── src/
│ ├── index.js(index.jsx) (ここではインラインスタイルでCSSを記述)
│ └── App.js(App.jsx)
JavaScript
App.js
export const App = () => {
const onClickButton = () => alert();
const contentStyleA = {
color: "blue",
};
const contentStyleB = {
color: "green",
};
return (
<>
<h1>こんにちは!</h1>
<p style={contentStyleA}>お元気ですか？</p>
<p style={contentStyleB}>元気です!</p>
<button onclick={onClickButton}>ボタン</button>
</>
);
};
2. 子コンポーネントを使う場合
フォルダ
folda_structure
├── public/
│ ├── index.html
└── src/
│ ├── index.js(index.jsx) (ここではインラインスタイルでCSSを記述)
│ ├── App.js(App.jsx) ← 親コンポーネント
│ └── components/
│ │ ├── ColorfulMessage.jsx/ ← 子コンポーネント
│ │ └── Other/
JavaScript
App.js
+import { ColorfulMessage } from "./components/ColorfulMessage";
export const App = () => {
const onClickButton = () => alert();
- const contentStyleA = {
- color: "blue",
- };
const contentStyleB = {
color: "green",
};
return (
<>
<h1>こんにちは!</h1>
- <p style={contentStyleA}>お元気ですか?</p>
+ <ColorfulMessageage />
<p style={contentStyleB}>元気です!</p>
<button onclick={onClickButton}>ボタン</button>
</>
);
};
ColorfulMessage.jsx
export const ColorfulMessage = () => {
const contentStyleA = {
color: "blue",
};
return <p style={contentStyleA}>お元気ですか？</p>;
};
3. 子コンポーネント、Propsを使う場合
フォルダ
folda_structure
├── public/
│ ├── index.html
└── src/
│ ├── index.js(index.jsx) (ここではインラインスタイルでCSSを記述)
│ ├── App.js(App.jsx) ← 親コンポーネント
│ └── components/
│ │ ├── ColorfulMessage.jsx/ ← 子コンポーネント
│ │ └── Other/
JavaScript
App.jsx
import { ColorfulMessage } from "./components/ColorfulMessage";
export const App = () => {
const onClickButton = () => alert();
const contentStyleB = {
color: "green",
};
return (
<>
<h1>こんにちは!</h1>
- <ColorfulMessageage />
+ <ColorfulMessageage color="blue" message="お元気ですか？" />
<p style={contentStyleB}>元気です!</p>
<button onclick={onClickButton}>ボタン</button>
</>
);
};
ColorfulMessage.jsx
-export const ColorfulMessage = () => {
+export const ColorfulMessage = (props) => {
const contentStyleA = {
- color: "blue",
+ color: props.color,
};
- return <p style={contentStyleA}>お元気ですか？</p>;
+ return <p style={contentStyleA}>{props.message}</p>;
};
4. 他のpタグにもPropsを応用する
JavaScript
App.jsx
import { ColorfulMessage } from "./components/ColorfulMessage";
export const App = () => {
const onClickButton = () => alert();
- const contentStyleB = {
- color: "green",
- };
return (
<>
<h1>こんにちは!</h1>
<ColorfulMessageage color="blue" message="お元気ですか？" />
- <p style={contentStyleB}>元気です!</p>
+ <ColorfulMessageage color="green" message="元気です!" />
<button onclick={onClickButton}>ボタン</button>
</>
);
};
ColorfulMessage.jsx
export const ColorfulMessage = (props) => {
const contentStyleA = {
color: props.color,
};
return <p style={contentStyleA}>{props.message}</p>;
};
イメージ
Applied
h1、pタグと同様に閉じタグで実装したい時（可読性向上）
h1、pタグと同様に閉じタグを使ってPropsを受け渡すことこもできる
App.jsx
import { ColorfulMessage } from "./components/ColorfulMessage";
export const App = () => {
const onClickButton = () => alert();
return (
<>
<h1>こんにちは!</h1>
- <ColorfulMessageage color="blue" message="お元気ですか？" />
+ <ColorfulMessageage color="blue">お元気ですか？<ColorfulMessageage/>
+ // or
+ <ColorfulMessageage color="blue" message="お元気ですか？"><ColorfulMessageage/>
- <ColorfulMessageage color="green" message="元気です!" />
+ <ColorfulMessageage color="green">元気です!<ColorfulMessageage/>
+ // or
+ <ColorfulMessageage color="green" message="元気です!"><ColorfulMessageage/>
<button onclick={onClickButton}>ボタン</button>
</>
);
};
ColorfulMessage.jsx
export const ColorfulMessage = (props) => {
const contentStyleA = {
color: props.color,
};
- return <p style={contentStyleA}>{props.message}</p>;
+ return <p style={contentStyleA}>{props.children}</p>;
+ // or
+ return <p style={contentStyleA}>{props.message}</p>;
};
Propsが多い時（可読性向上）
分割代入を用いる
App.jsx
import { ColorfulMessage } from "./components/ColorfulMessage";
export const App = () => {
const onClickButton = () => alert();
return (
<>
<h1>こんにちは!</h1>
<ColorfulMessageage color="blue" message="お元気ですか？"><ColorfulMessageage/>
<ColorfulMessageage color="green" message="元気です!"><ColorfulMessageage/>
<button onclick={onClickButton}>ボタン</button>
</>
);
};
ColorfulMessage.jsx
export const ColorfulMessage = (props) => {
+ const { color , children} = props
const contentStyleA = {
- color: props.color,
+ color: color,
};
- return <p style={contentStyleA}>{props.children}</p>;
+ return <p style={contentStyleA}>{children}</p>;
};