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

#16：ぐだぐだ設計でドタバタ修正劇ばやった話

ざっくり言えば：

こんたにゃ、アプリの状態管理ばやってて、「あれ？なんかおかしいじゃ」ってなった話ばすっぺ。特に「ローカル」と「グローバル」ばゴチャゴチャにしてまって、ChatGPTさ問い詰めながら設計ば直してったじゃ。プログラミング初心者でも、「なんで動いてるか分からね」状態の怖さば伝えたいんず。

■ ルールあるのに守れてねじゃ！

前に作った住み分けのルール、ちゃんとあったんずよ。

{
  "ルーティング": "App.js",
  "全体で共有する状態": "App.js",
  "ローカルな状態": "TaskManager.js",
  "ローカルストレージ操作": "App.js（＝一元管理）",
  "画面固有のロジック": "TaskManager.js"
}

…けど、実際にはTaskManager.jsにローカルストレージの読み書き入ってらった。

useEffect(() => {
  const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
  setTasks(savedTasks);
}, []);

App.jsとTaskManager.js、どっちが正しいデータなのか分からなくなってたんず。

---

■ ChatGPTと「グローバルとはなんだべ？」の話

こんなやりとりもあったじゃ。

「刑務と詳細、両方の画面で使わねんなら、ローカルでいいんでね？」

ChatGPT：「その通りです」

アプリ内では、コインは「詳細」だけ、ステータスは「刑務」だけ。
つまり、共有なんてすんなくても良がったんず！

---

■ 結局、TaskManager.jsにまとめたじゃ

考え直してみて、こうなったじゃ。

• 画面でしか使わねぇ状態 → その画面で管理すべし
• 状態の保存・読み出し → その画面の中で完結させた方がシンプル

App.jsに持ってったら、見通し悪ぐなってpropsば回しまくることになってまうじゃ。

---

■ 「なんとなく動いてる」が一番危ない

今回の一番の学び。

アバター変わらねぇ、レベル上がらねぇ、保存されねぇ。
どれも、設計のズレが原因だった。

---

■ おわりに：判断の基準は「そのデータ、どこで使う？」

ChatGPTが言ってくれた大事な言葉：

「グローバルかローカルかの判断は、“複数画面で使うかどうか”で決めてください」

この一言で、コードの整理が見えてきたんず。

自分でも何作っていいか迷ってる人、こう聞いてみてけろ。

「この情報、どこで使うんだべ？」

それだけで、設計ってだいぶスッキリするんず。