React超初心者、propsとstateの違いを大喜利風にして遊んでしまう。

はじめに

最近、Reactチュートリアルを始めてみました。MOです。

早速、props と state がごちゃついております。

• どっちが外から来るんだっけ？
• どっちが自分で変えられるんだっけ？
• 「受け取る」「持つ」「更新する」が頭の中で混線する…

そこで、大喜利風に props と state を例えてみることにしました。（ありがとうChatGPT！）
やはり大喜利は良いですね。あんなに遠かった props と stateが一気に身近に🙌

この記事では、そんな大喜利ネタをまとめつつ、自分なりの理解も書いてみます。

先に、自分なりの理解をまとめてみます

• props

  • 親コンポーネントから子コンポーネントに渡される値
  • 子コンポーネント側では受け取って使う

• state

  • コンポーネント自身が持つ値

こうしてみるとどシンプルな文章ですが、いざコードと向き合ったとき、
どれがpropsでどれがstateなのか迷子になりがちです。

というわけで、迷子になったときの指針になりそうな例えを見ていきましょう。

では、大喜利スタート！!👏👏

※ 回答者のイメージは、ご想像にお任せいたします。

お題1：propsとstateの違いが一発でわかる例え

🔊座布団1枚！

回答者	回答
🟨	propsはラーメン屋さんでもらうメニュー。 stateは、食べてるうちに「やっぱチャーハンも欲しい！」ってなる心です！
⬛	propsは師匠から「これで行け」と渡されたネタ。 stateは高座に上がった瞬間に消える自信。 受け取ったものと、内側で揺れるものは別です。

その他の回答

回答者	回答
🟩	propsってのは、大家さんから「今月はこれで暮らしなさい」って渡される家賃みたいなもんですね。 stateは、その残りでどうにかこうにかやりくりする懐具合ですよ。
🟪	propsは上から降ってくる指示。 stateは下で振り回される感情。 会社と社員みたいなもんですよ。夢がないですねえ。
🍊	propsは親が持たせてくれたお弁当。 stateは、授業中にこっそり減っていくお腹の空き具合です。
🌸	propsは人から借りた高級腕時計。 stateは自分の貯金。 どっちも触るけど、勝手にいじっちゃいけない方があるんですな。
🟦	propsは女将さんから「今日はこれ着て」と渡された浴衣。 stateはその日の色気。 浴衣は変えられないが、色気はだいたい足りない。
🏯	propsは先生から配られたプリント。 stateはテスト前日に急に湧いてくる危機感。 プリントの内容は勝手に書き換えられないけど、危機感だけはどんどん増えます。
🍭	propsはお客さんにもらった差し入れ。 stateは見た瞬間に上がるテンション。 差し入れ自体はもらうもの、テンションは自分の中で変わるものですねえ。
🍏	propsは先輩にもらったアドバイス。 stateは「やったるぞ」と「無理かも」の往復運動。 受け取る情報と、その場で揺れる気持ちは別物です。

---

お題2：propsとstateの関係を昼ドラ風に

🔊 座布団1枚！

回答者	回答
🍏	props「あなたにはこれを渡しておくわ」 state「ありがたいけど、その後どう動くかは私の自由よ！」 ユーザー操作「ちょっと失礼！」 第三者が触ると全部ややこしくなるの、昼ドラもUIも同じですね。

その他の回答

回答者	回答
🟩	props「あなたに託したのよ、この値を……」 state「ありがとう、お義母さん。でもこの家でどう変わるかは私次第です」 親コンポーネント「黙って見ていられん！」 だいたいこういう家は長続きしませんね。
🟪	props「あなたには期待しているの」 state「その期待、重いのよ！」 再レンダリング「はい、もう一回最初から」 昼ドラというより、だいぶ職場ですね。
🟨	props「この値を受け取ってちょうだい！」 state「いやーん、受け取っちゃった！」 useEffect「全部見てましたよ〜！」 もう番組の方向性がおかしいですね！
🍊	props「あなたは私が与えた役目を果たせばいいの」 state「でも私、自分の気持ちも変わっていくの！」 ユーザー操作「ピンポーン」 このタイミングで来る来客が、だいたい話をややこしくするんですよ。
🌸	props「うちの家のルールは守ってもらいます」 state「外ではそうでも、この家の中じゃ私にも事情があります」 子コンポーネント「私はどうしたら……」 だんだん遺産相続みたいになってきましたね。
🟦	props「あなたにはこれを渡すわ」 state「受け取るだけの女だと思わないで」 再レンダリング「続きは次回！」 次回まで引っ張るほどの話でもないんですがね。
🏯	props「私の言う通りにしていればいいの」 state「そんな人生、もう嫌！」 setState「では変わりましょう」 やたら決断だけ早い人が混ざると、話が一気に進みます。
🍭	props「これはあなたのためを思って渡したのよ」 state「その“ため”って、誰のためなの！」 再レンダリング「一回落ち着いて、最初から整理しましょう」 脚本の都合で全員いったん並べ直されるやつです。
⬛	props「お前は受け取ればいい」 state「受け取るだけでは終わらない」 依存関係「その話、まだ続きがあります」 昼ドラより、だいぶ不穏な設計レビューです。

---

お題3：propsとstate、付き合うならどっち？

🔊 座布団1枚！

回答者	回答
🟪	propsですね。 stateは昨日と言ってることが違う。 いや、別に誰とは言いませんけどね。
🌸	propsですね。 余計なサプライズが少ない。 この歳になると、それがありがたいんですよ。
🟦	stateですな。 気まぐれな方が追いかけがいがある。 まあ、たいてい追いかけてるうちに別の値になってますけど。

その他の回答

回答者	回答
🟩	propsですね。 渡された役割がはっきりしてる。 stateは気分で変わる。人付き合いで一番疲れるやつです。
🟨	state！ 変わっていく人って魅力がありますから！ ただし、追いかける側はだいたい疲れます！
🍊	付き合うならprops、結婚するならstateかなあ。 propsは最初から条件が明確。 stateは一緒に過ごして変化を受け止める感じがありますね。
🏯	propsかなあ。 「どう受け取ればいいか」がまだわかりやすいので。 stateは気持ちが更新されるたびに、こっちも再対応が必要そうです。
🍭	propsかなあ。 受け取って大事にする関係、いいじゃないですか。 stateは感情の波に飲まれそうです。
⬛	どちらも遠慮したいが、選ぶならprops。 stateは理解したと思った瞬間に変わる。 信用ではなく、観測の問題です。
🍏	state！ 昨日と今日で違う顔を見せてくれる方が、付き合ってて飽きないじゃないですか。 でも振り回される覚悟は必要です。

---

お題4：propsが怒るとどうなる？

🔊 座布団1枚…😨

回答者	回答
🌸	怒ると黙ります。 そしてバグとしてあとから発見されます。 夫婦げんかと同じですな。
⬛	怒ると何も言わない。 ただ壊れる。 そして原因調査だけが残る。

その他の回答

回答者	回答
🟩	「私は渡されただけなんです、書き換えないでください」と、静かに距離を置きます。 一番怖いやつですね。
🟪	怒るというより訴えてきますね。 「契約違反です」って。 ええ、冷たい世界です。
🟨	propsが怒ると、 「そんなに変えたいなら最初から自分でstate持ちなさい！」って言います！
🍊	「私を受け取るのは自由です。でも私の人生まで決めないでください」って感じですね。 ちょっと刺さります。
🟦	「触るな危険」の札を首から下げて帰っていきます。 残された子は大慌てですよ。
🏯	「こちらは受け渡し専用です」と、急に窓口対応みたいになります。 感情よりルールで詰めてくるタイプですね。
🍭	「それ、私じゃなくてstateさんのお仕事ですよ〜」と優しく返されるんですけど、 遠回しに線を引かれてます。
🍏	「え、自分で変えるんですか？」って一回やんわり聞いてきたあと、 本気で怒ると挙動でわからせてきます。

---

お題5：stateが病んだときのセリフ

🔊 座布団1枚！

回答者	回答
🟦	「さっきまで true だったのに、もう false です。 人の心なんてそんなもんです。」
🟩	「どうせまた set されるんでしょう……私の意思なんてないんですよ……」
🏯	「私は確かに更新されたはずなんです……でも説明のタイミングが悪いと信じてもらえないんです……」
⬛	「私が悪いのではない。 設計が私に多くを背負わせた」
🍏	「最初は元気だったんです！ でもあちこちから set されて、もう自分が何者かわからないんです！」

その他の回答

回答者	回答
🟩	「昨日の私を、今日の私に期待しないでください……」
🟪	「更新されたのに、誰にも理解されないんです……」
🟨	「私、ほんとは初期値のままでいたかったんです〜！」
🍊	「押されたら変わる、押されなかったら変わらない、そんな人生に疲れました……」
🌸	「みんな私を使うだけ使って、依存配列のことは誰も考えてくれない……」
🟪	「非同期って言葉で、全部ごまかされてる気がするんです……」
🟨	「私、変わったのに！ なんで console.log ではわかってもらえないの〜！」
⬛	「安定していると思われているが、内部では崩れている」
🍭	「変わること自体は嫌じゃないんです。 でも、毎回そんな大騒ぎで再レンダリングされると気まずいんです〜」

---

お題6：React面接で緊張してる人が言いそうなこと

🔊 座布団1枚！

回答者	回答
🟪	propsとstateの違いですか。 ええ、わかってます。 わかってるんですが、今ちょっとstateが壊れてまして。
🌸	propsは変更しません。 stateは変更できます。 私の答えも変更したいですが、もう遅いですね。
🟦	付き合うならprops、結婚するならstateです。 ……失礼しました、今のは面接じゃなくて大喜利でした。

その他の回答

回答者	回答
🟩	propsは親から渡される値で、stateは……その……自前で抱える事情です。
🟨	propsは外！ stateは内！ 以上です！ ……いや、もっと聞きます？
🍊	propsは受け取るもの、stateは管理するものです。 あ、管理って言っちゃうと広すぎますかね、すみません、今のなしで……
🟩	propsは外から与えられるもので、stateは中で変わるものです。 そこまでは言えるんですが、useEffectが来ると急に口が重くなります。
🟪	再レンダリングされるたびに答え直せるなら自信あるんですがね。
🟨	setStateしたら受かりますか？
⬛	props は外部入力。 state は内部状態。 今の答えが最も安定している瞬間です。
🏯	緊張しているのでうまく言えないんですが、 props は親から渡されて、state はそのコンポーネントの中で変わっていくものです。 今の答え方、ギリギリ通ってほしいです。
🍭	props はプレゼント、state は気分です！ ……いや、雑でしたね。もう一回お願いします。
🍏	props は親、state は自分、みたいなイメージです！ あ、でも親子って言い切るとややこしいですかね！？ すみません、いま自分の state が完全に面接モードです！

---

おまけ：stateの値を直接書き換えてはいけない件について

🐱 < 実は、stateの値を直接書き換えてはいけないらしいやで…？！
🦍 < マ！？　stateは変わる言いまくってなかった？！
🐱 < useStateで管理する値はsetStateを使って更新するんやって。
🦍 < どゆこと？！
🐱 < ま、回答見てみようかね。

回答者	回答
🟪	state は自分のものです。 ですが、自分のものだからといって直接いじっていいわけじゃない。 家庭でも会社でも React でも、「勝手にやりました」はだいたい揉めます。
🍊	state は自分の部屋の温度みたいなものですね。 暑い寒いは自分の中で変わるんですが、温度計を手で書き換えても部屋は変わらない。 ちゃんとエアコンのリモコン、つまり setState を使いましょうって話です。
🌸	state は自分で持ってる財布みたいなもんですが、 残高欄だけ勝手に書き換えて「増えました」は通らないんですな。 React 相手に見栄を張ってもしょうがない。
🟦	state は自分の色気みたいなもんです。 「今日はあることにしよう」と鏡に書いても、中身までは変わりません。 見せかけじゃなく、正式な更新が必要なんですよ。
⬛	state は内部状態。 内部状態ではあるが、内部犯行は許されない。 更新したければ、正規の窓口つまりsetStateを通せというだけの話です。

大喜利をやってみて、整理しやすくなったこと

大喜利の回答を通して、頭に残りやすかったのは次の2点かな、と思います。

1. props は「親から子に渡されるもの」で、「受け取った側（子）が勝手に変えない」
2. state は「自分の中で変わるもの」で、「操作などをきっかけに変わる値」

…最初とあまり変わってませんね。
しかし大喜利でいろんな例えを浴びたことで、それぞれの特徴を断然イメージしやすくなり、
propsやstateをかなり素早く判別できるようになったと思います🙌

おわりに

技術用語は、真面目に読んでも頭に入るときと入らないときがありますが、
私の場合はこういうふうに少し遊んでみる方が定着しやすいこともあるなと感じました。

同じように props と state がごちゃっとしやすい人には、
一回ふざけた例えで整理してみるのも意外と効くかもしれません…？！