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

#14：props地獄と戦う朝

【ざっくり言うと】

今朝はただの「朝礼ボタンの確認」だけのつもりだったんず。でもな、props（親からもらう変数）とuseState（二重定義）でどえらいバグに見舞われて、コードがまっかっかになったじゃ。状態をどこで持つか、ほんとに大事なんだなって痛感した朝の記録だべ。

propsで地獄見た朝

きょうの朝、ちょこっとだけコード直すつもりでな、TaskManager.jsいじってたんず。朝礼ボタンの動作確認だけだったはずなのに…

"Identifier 'coins' has already been declared"

…なんだばこれ！？ すでにcoins定義されてらってさ。

---

同じ変数、二度は使うな

おら：「全コード渡してるべ？なんでエラー出るんだや？」

AI：「親のApp.jsからもらったcoins、TaskManager.jsでもういっぺ定義したら重なってまうんず。」

おら：「じゃ、TaskManagerの方、使っちゃダメなのが？」

AI：「そうだ。親から渡されたんなら、それを使うだけ。新しくuseStateで定義する必要ねぇのさ。」

ふ〜ん…。わかってるようで、できてなかったんず。

---

朝礼ボタンの混乱っぷり

さらに朝礼ボタンのonClickでまた迷子に。

onClick={onMorningMeeting}

おら：「え？前はTaskManagerの中でalert出してただけだべ？」

AI：「今度はApp.js側にまとめて、そっちから関数渡してボタン押されたら実行する形にしたんず。」

…いや、どっちにすんのか統一してくれや。混乱してまった。

---

地雷は全部自分で埋めてた件

今思えば、coinsもdailyTasksも、同じ名前のuseStateを親でも子でも作ってたのが悪かったんず。名前が同じでも、定義は一回きりじゃなきゃだめだってことを、ようやく理解したべ。

---

学んだごど（箇条書きだば）

• useStateは親で定義して子に渡す、か、子で完結させるか、どっちかはっきりすべし。
• 同じ名前でuseState使ったら、エラー出て当然だじゃ。
• 関数（onClickとか）も、どこで動かすか一貫性持たねば、迷子になるべ。
• propsの使い方は、設計の肝だべ。ナメたらいかん。

---

最後に：一貫性、大事だじゃ

小さいミスが、でっけバグになる。今回の件で「設計の一貫性」ってやつが、どれほど大事がって改めて感じたんず。おらの朝は2時間、エラーで真っ赤っかだったけど、そのおかげで今後の設計、少しはまともになるかもしんね。

この連載、同じように迷ってる人の参考になったらうれしいじゃ。誰だって最初はつまずぐもんだべ。おらだって、つまずいてばっかりだじゃ！