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

＃13：一見シンプルな機能に、沼る。〜フラグ保存地獄と10時間の死闘〜

【ざっくり要約】

「朝礼ボタン押したら、その日いっぺん“朝活”タスクが使えるようになる」──ただそれだけだと思ってだ。でも、やってみだら想像以上のドロ沼。localStorage への保存、useEffect の無限ループ、非同期の罠…。10時間の戦いの末に、ようやく見えた真実。ChatGPTとの果てしないやりとりを経て、自分で原因掘り出す力を手に入れた記録。

「保存すれば終わり」って思ってだ

やりたがったのは、朝3時〜5時だけ押せる「朝礼ボタン」用意して、押したら isMorningMeetingDone = true を localStorage に保存するってだけ。

そして、それ読んで朝活タスクのチェックボックスのロック外す、ほんのちょっとの仕組みだはんで。

{
  "onMorningMeeting": {
    "flag": "true",
    "date": "2024-11-22"
  }
}

こったら保存して、日付変わったらリセットすればいいべや、って。毎回 localStorage 見ればいいだけの話さ。

……なしてそれで10時間もかかるんず？

---

useEffect地獄。止まらね無限発火

最初に出てきた敵は、useEffect の止まらね無限トリガー。

「Cleaning up useEffect」「Resetting morning meeting state」「Triggered by morningMeetingDate: Fri Nov 22 2024」──ずーっと続ぐログ。

しかも savedIsMorningMeetingDone がずっと null。保存してないわげでもね。確認すると、ちゃんと保存されでら。

でも、読み込んだ値は null。原因は useEffect の順番とか依存配列とか、非同期の扱いの問題とか、いろいろ複雑に絡んでだ。

---

次に出で来た、謎のエラー

Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

調べでもよぐわがんね。Chrome拡張のせいが？と思ったけど、何止めでもエラー消えね。しかも、処理そのものには支障ないっぽい。もどかしさ全開。

---

ロジック削って原因を探す日々

もう、一個ずつ潰すしかね。useEffect 減らして、依存配列いじって、try-catch 入れて……それでも null。

朝礼ボタン自体はちゃんと動いでるのに、リロードすると何もかもパァ。

でも、何回も繰り返して、ようやぐ気づいた。

保存のとこ、フックの中で非同期に競合してだ。localStorage.setItem() の呼ばさるタイミングが useEffect の複数で競り合ってたんず。

---

解決した時の気づきと、あなたへ

原因わがってしまえば「なぁんだ」って思う。でも、見えねエラーって「できるはずなのに動がね」っていう、一番しんどいタイプだびょん。

今回学んだのは、こったらこと：

「機能が単純でも、データの流れが複雑なら、それは立派な沼だ」

---

10時間の価値は、あった

ChatGPTと何十回も往復した。「null になるのはこれかも」「依存配列見直してみて」「保存は即時でも、読み込みタイミングが問題だね」──試して戻してまた試して。

ChatGPTの助けがなかったら、きっと途中で心折れてた。

でも10時間かけて得たのは、ただの機能じゃね。「自分で泥まみれになってでも、原因突き止める力」だった。

---

だから、あんたへ

「自分でもやれるがも」「ちょっと挑戦してみてぇがも」──もし思ったなら、このチャットボックスから始めてみれ。

答えは、あきらめねで粘った先に、必ずあるはんで。