共通パーツにいろんなデータや値を渡したああい！！（React props）
はい、タイトルの通りなのですが、
今日も共通パーツをせっせこ作成されているコーダーの皆さん、
こんなこと思ったことありませんか・・・？
何度も何度もコピペしんどい・・・
手直しする時全部直さなきゃやん・・・
共通パーツとして呼び出せたら楽なのに・・・
それ、React、できます！！！！
「props」っていいます！！！！
ちょっと前からReactに関する記事を書き始めましたが
遂にようやくReactっぽい言葉が出てきましたね・・・！
この仕組みがなんとなーく分かると
なんとなーくReactできそうかも・・・？
って思えるから最後まで読んでってね〜！
まずはざっくり最初に結論！！
「props」とは、Reactにおける
親コンポーネントから子コンポーネントに値を渡せる仕組み
となります！！！
はい。
文字だけで見てるとハゲそうなんで
さっさとコード見ていっちゃいましょう〜！！
共通パーツ側（子コンポーネント）の書き方
// Buttion.tsx
// 共通パーツのファイル
type Props = {
text: string;
};
export const Button = ({ text }: Props) => {
return <button type="button" className="button">{text}</button>;
};呼び出す側（親コンポーネント）の書き方
// main.tsx
// 共通パーツを呼び出すファイル
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { Button } from './components/Button.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<Button text="ボタンだよ" />
</StrictMode>,
)
そしたらこんな感じで表示される！！
それでは解説〜！！
共通パーツ側（子コンポーネント）の書き方
まず共通パーツ側（子コンポーネント側）では
どんなpropsを受け取りたいかを記述しておきます。
今回でいうと、
「text」っていう値を
string(文字列)として
受け取りたいってことですね！！
ここの値は好きな名前にしてOKですし、
いろんなデータを受け取る事ができます！
なので、
「hage」っていう値を
Boolean(trueかfalseか)として
受け取る！
みたいな設定もできるわけですね！笑
データの型ってなんやねんって人は下記の記事とかが参考になるかも😊
呼び出す側（親コンポーネント）の書き方
さて、受け取る側の設定はできたので、
次はデータを渡す側（親コンポーネント側）の書き方！
さっき作成した「Button」という子コンポーネントを呼び出すときに、
text="ここに表示させたい文字列をいれるよ"
って記述するだけでOK！！！
もちろん、受け取る側で設定さえしておけば、
クラス名
style
などなどを自由に渡す事が可能なんですー！！
（EJSよく使う人なら結構イメージしやすいかも！）
どうです？
結構便利でしょ？？
HTMLコーディングのときは
コピペして〜
必要な箇所を書き換えて〜
修正があったら全部直して〜
ってしていたのとおさらばできますよ😌
propsの気をつけろポイント！！
そんな便利なpropsですがちゃんとルールもあります。
難しいこと言ってもしょうが無いので簡単にいきましょ！
親コンポーネント → 子コンポーネントへの一方通行である！！
そして書き換えはできない！！！
子から親に向けてpropsを渡すことはできないし、
親から渡されたpropsの値を子ども側で書き換えることはできません。
親から渡されるものは
否が応でも受け取らなければならない！！
って覚えておけばOKです🙆
愛は両方向にできるけど、
propsは一方通行なんですね(キリっ)
はい。すみません。
切り替えて行きます。
あ、そうそう。
ちなみに今回はTypeScriptで記述してみました。
なぜって？
そう。かっこいいから！！
じゃなくって、
Reactって実はTypeScriptで書くことが多いから！！
いうてもJavaScriptとそんなに違いはなくって、
JavaScriptで書いてる内容に型指定を加えたものがTypeScriptになります！
今回でいうと、
type Props = {
text: string;
};の部分とかですね。
👨💻 textの型は文字列だよ〜
って指定してあげてるイメージ
記述量は増えちゃうけど、
変な値が入ってエラー起こしてしまう心配がなくなるから
基本的にTypeScriptで書かれることが多いかなーって感じです！
僕もまだまだ勉強中なので、
そのうちTypeScriptについても記事にしますね〜！！
さーて今回はpropsについて頑張って解説してみました。
他にもReactにはいろんな便利な機能や仕組みがたくさん！！
あーんなことや
こーんなことが
どんどんできるようんなっていくのは
やっぱり何歳になっても楽しいですよ✨️
ぜひあなたもReact沼に足を踏み入れてみては・・・？？
Reactだけに限らず、
新しいスキル身につけたい・・
単価アップしたい・・
あとちょっとな気がするのに・・
そんな思いをもったあなたの力に少しでもなりたい！！
ということで！
無料個別相談用の公式LINE作りましたー！
登録してくださったあなたの
「あとちょっと・・」
をサポートさせていただきます💪
ぜひお気軽にご応募くださいね！！
ではでは！！