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

#24：画面が真っ暗！？最小化UIやめで原点さ戻った話

ざっくり要約
今回は、かっこよさ求めて入れだ「最小化UI」が、結果的に見づらさ招いでらって気づいで、思い切って前のシンプルな表示方法に戻した話だじゃ。ChatGPTと相談しながら原因突き止めで、実際に直すまでの流れを書いでら。見た目よりも、やっぱり使いやすさが大事だなって改めて思った1件だっきゃ。

画面が真っ暗…原因は「見た目優先」だじゃ

最初に「あれ？」ってなったのは、アプリ開いだ瞬間だじゃ。なんも表示されねくて、画面が真っ黒。
「どしたんだべ？」と思って、ChatGPTさ聞いでみだ。

「最初の画面、真っ暗で何も映らね。刑務作業の画面、最初っから全部出るようにしたい。最小化すっと前の状態さ戻したい。」

スタイリッシュだばって思って、「クリックしたら中身出てくる」仕組みを入れだんだばって、それが悪さしてだんだな。

---

ChatGPTに聞いでみた。「MinimizedList、ほんとに関係あるんず？」

まず疑ったのは MinimizedList.js。前にChatGPTに送って検討しったから、「これが原因だべ？」って聞いでみだ。

けんど、返ってきた答えは「App.jsにMinimizedListの参照、見当たらねよ」だじゃ。

「は？じゃあなんで削除しても変わんねんず？」「これ、何のために作ったんだべ？」って、ちょっと混乱したじゃ。

ChatGPTは落ち着いてて、「いや、App.jsのexpandedComponentとかoverlayあたりが表示を操作してるかもしれね」と教えてけだ。

---

結局、「元さ戻す」が正解だった

「じゃあApp.jsとApp.css戻せば元通りなるんだべ？」
「この最小化リスト、やっぱりAppが問題なんだべ？」って聞いでみだ。

ChatGPTは「うん、それでええ」ってはっきり言ってけだ。

そいで、すぐ戻す作業始めだ。結果、ほんとにすぐ元通り！安心したじゃ〜。

例えば、こんなふうにUIの状態を定義し直して：

{
  "expandedComponent": null,
  "rendering": "すべてのUIを最初から表示",
  "components": ["TaskManager", "Timer"],
  "minimizedList": "削除済み",
  "visibleState": "常時表示"
}

見えねくてイライラするより、やっぱ最初っから見えるのがいちばんだな。

---

UIの落とし穴。「かっこよさ」より「わかりやすさ」

今回、ほんとに実感したじゃ。「かっこいい」が「使いやすい」とは限らね。

技術的にできるからって、ユーザーにとってええとは限らねんだな。

でも、今回の最小化リストで勉強になったのもある。

• 状態管理（useState）の扱い方
• 条件付きでコンポーネント出したり消したりするやり方
• CSSで見える／見えね設定

こういうとこ、一回やってみねばわがんねもんな。

---

無駄なことなんて、なんもね

元に戻したっていっても、ぜんぜん「失敗」だとは思ってねじゃ。
やってみたからこそ、「こっちの方が使いやすいな」ってはっきり思えたんだもの。

AIと話していぐ中で、頭の中さあるもん整理されるし、「迷ったら戻る」って選択肢もあるって思える。

今回も、ええ経験になったじゃ。

---

本日の一句

シンプルに　戻して見えた　使いやすさ