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

＃8：：虚偽の報告とNaN地獄との戦いだじゃ

この回では「虚偽の報告をした回数」をアプリに表示させようとして、NaN（数値じゃないよ）というバグに悩まされながらも、localStorageとReactのuseStateとuseEffectを駆使してバグを撃退した話だじゃ。単なる確認ダイアログ一つでも、裏ではけっこうややこしい処理が動いてんだな～っていう話だっきゃ。

あんた、ボタン押したら「虚偽の報告をしたということか？」って聞かれて、「はい」って押したら、数字が１増える。そんな単純なもんだと思ってだべ？
おらもそう思ってたんず。でも実際はな、甘くねんだじゃ。

虚偽の報告、したんだべ？という演出

このアプリは「懲役一年」ってコンセプトで、サボりそうになるユーザーに圧をかけるRPG風習慣化ツールだじゃ。
で、「本日の作業完了を報告」ってボタンを押したあとに、「嘘じゃねぇべな？」って脅しのダイアログが出る仕様にしたくてな。

んだば、もしユーザーがうっかり完了ボタン押したあとで「やっぱやってねがったわ…」ってなったら？
そんとき用に「報告の訂正」ボタンもつけで、ステータス戻して「虚偽の報告をした回数」も１増やすようにしたんず。

それなのに…再読み込みで「0回」に戻る謎現象

見た目は動いてらんず。完了 → 訂正 → アラート → 「1回」って表示される。
…のに！ページ再読み込みしたら、「0回」に戻るんず！

「なんでだぁーー！」って思って、localStorage見たら値はちゃんと保存されでらのに、画面では「0回」に戻る。
おら、ReactのuseEffectがうまく働いてねぇんでねがって見直してみたんず。

NaN（ナン）ってなんだよ！

しかも途中から「NaN回」とか表示されはじめてな。
「なんだこれ、なんだこれ！」って調べたら、localStorage.getItem()で取った文字列を数値に変換すんのにNumber()使ってたんず。でもな、それが空だったりnullだったりしたらNaN（Not a Number＝数じゃね）になるらしんず。

だから、

jsコピーする編集するconst savedFalseReportCount = localStorage.getItem('falseReportCount');
if (savedFalseReportCount !== null && !isNaN(parseInt(savedFalseReportCount, 10))) {
  setFalseReportCount(parseInt(savedFalseReportCount, 10));
} else {
  setFalseReportCount(0);
}

って風に、慎重に変換するようにしたっきゃ。

修正して、やっと地獄から解放

あと、「報告の訂正」ボタンを押したとき、setFalseReportCount(prev => prev + 1)だけじゃ駄目で、
すぐにlocalStorage.setItem('falseReportCount', newCount);で保存してやらねばなんねがった。
useEffectで保存するだけだと、反映が次の描画まで遅れるからだな。

結局は「ただの確認ダイアログ」でも裏は深い

ユーザーはただ「はい」とか「いいえ」押してるだけだけど、裏じゃuseStateとlocalStorageが絡み合って戦ってらんず。
演出ってのは、見えない所での戦いでできてんだな～って思った瞬間だったじゃ。

---

この日、おらは「虚偽の報告」と「NaN」の恐ろしさを知った。
そして少しだけ、Reactが好きになった気がするんず。

次もまた、変なバグと戦いながら、地道に前に進むべさ。