こんにちは。最近Githubが大草原どころか荒れ地と化しているSarasaです（ただの更新不足）。

「更新してねえってことはつまり君は勉強をサボっていたということじゃな！！」

って声が聞こえてきそうなのですが、、、今まですっ飛ばしてきた基礎を改めて勉強していたためです、、涙

ということなので私がこの一ヶ月くらいに調べたことやら学んだことをいつも通りゆるーくまとめていきます。（シリーズ化したいなあ（フラグ

propsが難しい

Qiita界のエンジニアレベルを下げている要因ランキングやったらダントツ一位獲得できちゃいそうなネタをぶっこみます。

え？でもぶっちゃけ「〇〇をprops化して××という関数にして～」って最初に読んだとき「？？？」ってなりません？？
意味は「コンポーネントに渡される任意のデータ」ってことらしいのですが、
データ渡す？
なんのため？？
状態の私にはこのレベルでも難しい。。

「あ～もっと身近な話に例えたらわかりやすいのに。。。」

もしJavaScriptでカレーを作るとしたら

PC画面とのにらめっこに飽きたので、視点をがらりと変えてみます。

今日の晩御飯はカレー。ただ、うさママは日中は予定が詰まっていてどうも晩御飯の時間までに作れそうになく、娘のウサミに晩御飯づくりをお願いすることに。

ママ「ウサミ～」
ウサミ「？？」
ママ「多忙な母に代わってカレーを作ってほしいのだけれど、、」
ウサミ「いいけど材料と調理器具ってどこにあるんだｋっけ」
ママ「調理器具はシンクの下よ。あと、材料は冷蔵庫に入ってるから」

ここでの調理器具と材料がpropsになります。

まず、この調理器具と材料という言葉に含まれる情報を細かく分解してみます。

調理器具
なべ、包丁、まな板、木べら、おたまなど、、

材料
にんじん、たまねぎ、カレールーなど、、

これらの情報を口頭で伝える際にいちいち
「なべ、包丁、まな板、木べら、おたまetcを揃えてとにんじんたまねぎetcがあればカレー作れるよ」
と言うよりは
「調理器具はこれで、材料は冷蔵庫のやつから使って」
と言った方が簡潔に伝えられますよね。

ちなみに、カレー作りをざっくりとJavaScript風に言い換えると、、

うさママ（親コンポーネント）から調理器具と材料を引数として受け取り、ウサミ（子コンポーネント）がカレー作りという処理を実行する。

となります。

まず、上記をコードとして起こしてみます。

Makecurry.js

function Makecurry=(props)=>
{
const 調理器具=props.調理器具
const 材料=props.材料
///カレー作りの工程もろもろ///
}

（ざっくりしすぎやろ、、、

ここでやたらとprops.と出てくるのは、「親コンポーネントから持ってきた要素ですよー」ということが一目見ただけでわかるようにするためです。

ウサミ（子コンポーネント）はあくまで「カレーを作る工程」をまとめたコンポーネントのため、それ以外の部分は割愛することで簡略なコードの記述を実現しています。

ちなみに、割愛されたコンポーネントの中身、、つまりうさママからの情報の詳細(親コンポーネント)については、

App.js

<Makecurry
調理器具={[`なべ`,`包丁`,`まな板`,`木べら`,`おたま`]}
材料={[`にんじん`,`たまねぎ`,`カレールー`,`水`,`サラダ油`,`鶏もも肉`]}
/>

という記述になります。

この「（いちいち細かくいうよりまとめて簡潔に言った方が楽っしょ」という考え方は、プログラミングの中でもよく出てくるので、「なんか見たことない省略方法出てきたんだけど！！」ってなったときは省略することによるメリットについて考えてみるよいかもしれません。