AIで知識ゼロからアプリ開発1000時間 #15

#15：コードの地雷原で跳ねる

要約：

今回はな、Reactでアプリ作ってる最中に「画面まっかっか」になるエラーにぶち当たった話すっぺ。変数の重複や、props（親からもらう値）の受け取りミスみてぇな、初心者がよぐやる失敗で大混乱。ChatGPTさ助け求めながら、どうやって解決したが、リアルタイムのデバッグ実況みてぇになってっから、読みごたえあると思うべ。

真っ赤な画面と「なんでやねん」

ある日ちょこっとコードいじったらな、画面一面エラーだらけになったじゃ。
props is not defined、onMorningMeeting is not defined、そして "falseReportCount has already been declared"（もう宣言されてっぞ！）てな。

「んだばって、定義したはんで！」

って思いながらChatGPTに言ったんず。

おら：「props消したらこのエラーの山だじゃ」

ChatGPT：「propsは受け取るときにデストラクチャリングしてるなら、props.xxxじゃなくてxxxって直接使わねばまいね」

なるほどな、理屈はわがるんだばって、ちゃんと書いでるのに「ない」って言われるモヤモヤ感よ…。

---

「受け取ってるのに未定義」ってなんだべ？

ちゃんとこう書いでら：

{
  "falseReportCount": 3,
  "setFalseReportCount": "function",
  "onMorningMeeting": "function"
}

なのに、画面には「未定義です」って怒られる。

おら：「99行目にonMorningMeetingあんべや！なんで怒られるの？」

って言ったら、ChatGPTが冷静に返してきたんず。

**「それ、App.jsから渡されてねぇんじゃね？」**って。

つまり、関数の引数で受け取る準備はしてるんだばって、肝心の中身が送られてねがったってわけ。

---

ChatGPTとの会話がヒントになった

ChatGPT：「見た目で定義されででも、実際に値が渡ってなければundefinedになるんず」

つまり、Reactでは親から子にちゃんと渡さねば、子のほうで受け取るだけじゃ意味ねぇってことだ。

<TaskManager
  falseReportCount={falseReportCount}
  setFalseReportCount={setFalseReportCount}
  onMorningMeeting={onMorningMeeting}
/>

↑これ書いでねぇと、渡ってこねんだと。

---

ミスを通して、構造が見えてきた

今回で学んだのは、エラーはただの敵じゃねぇってことだべ。

「同じ変数2回書いたら怒られる」
「親からもらってねぇ値を使おうとしたら怒られる」
――当たり前のことなんだけど、初めてやってると気づかねんず。

けど、何回かぶつかって、やっと見えてくる。

---

今回の気づき

• propsを分けて受け取ってるときは props.xxx って書いたらまいね
• 同じ名前で useState と props の両方作ったら爆発すっぺ
• エラーは腹立つけど、ヒントでもある

---

おまけ：今回のJSON風コード例

{
  "falseReportCount": 0,
  "setFalseReportCount": "(count) => setState(count)",
  "onMorningMeeting": "() => alert('朝礼完了')"
}

---

初心者のころは、自分が書いたコードなのに、なして動がねんずって思う時間のほうが長いかもしんね。

でもな、その時間があるから、次は動かせるようになる。

間違いだって、気づけば強さになる。今回はそった気づきの1ページだったな、ほんとに。