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

#18 理不尽ば耐えだCSS地獄

【ざっくり言うばって】

今回はCSS絡みで、えらい目さあったはんで。見た目は地味だばって、アプリの印象ば決める「ボタンの位置」とが「日付の表示」とが「スクロールの動き」が、ごちゃごちゃになってしまったのさ。AIさ何回も「それ可能性あるがも」って言われながら、Gitのコード何百行も見直して、やっと「position: fixed」が犯人だって突き止めだのっさ。怒ったり冷静になったり忙しい一日だったじゃ。

「なんでこのボタン、ずっとおんなじ位置なんだ？」

朝礼ボタンと「本日の作業完了を報告」ボタン、最初は良さげに見えだんだばってさ、いざスクロールすると画面にくっついて動かねじゃ。ほかのもんはスクロールすんのに、なしてこいつらだけ残ってんの？

わいがChatGPTさ聞いだんず。
「なんで固定されてらんだべ？ .navigation-buttons のCSSいじればええんでねぇの？」

返ってきた言葉は、
「.date-container に position: fixed が指定されてる可能性があるべな。」

……その“可能性”ば確かめるの、おめぇの仕事でねぇのが？

---

“予想”じゃなくて、“確認”しろよ

腹立ってGitにあるCSSファイルぜんぶ検索したっきゃ、やっぱりあったじゃ。

.date-container {
  position: fixed;
  top: 10px;
  right: 20px;
}

こいつが犯人だったんず。「なんで日付が右上にくっついてる？」っちゅう素直な疑問に、AIは「そういう可能性あります」っちゅうだけ。コード全部見えでるはずのAIなら、確定で答えられるべさ。

---

あいまいな返事ば潰すのが近道

そのあと、おら言うだ。

「position: fixed → relative に変えで、スクロールに合わせて動かせ」
「朝礼ボタンは左っこさ寄せて、完了と訂正ボタンは縦並びにして、刑務作業の枠とちょっと重ねろや」

結果こうなったじゃ。

{
  "navigation-buttons": {
    "position": "relative",
    "display": "flex",
    "flexDirection": "column",
    "alignItems": "flex-end",
    "marginTop": "-40px"
  },
  "task-button": {
    "marginBottom": "10px",
    "zIndex": "5"
  },
  "morning-meeting-button": {
    "alignSelf": "flex-start"
  }
}

ほんのちょっとのCSSで一気に解決すんのさ。そこさ行き着くまでに、何十回もやりとりしたっきゃ。

---

「怒り」は燃料だ

怒りながらも、今回でひとつ学んだ。

• ChatGPTはコードがごちゃごちゃしてくると間違いやすい
• 曖昧な返答ば許しちゃいけね。自分で突っ込んで確認せねばなんね
• どんな動作にも原因がある。予想だけで進めば、道に迷うじゃ

---

それでも、おらは前に進んでら

このチャット、ぜんぶ残ってるべ。
「おめぇ、またかよ！」って何回言ったがわがんねぐなるくらい言ったじゃ。

それでもおら、このAIと一緒にアプリ完成させるって決めだんず。

なんでって？
そいは、こういう理不尽ば乗り越えた先に、自分自身の“強さ”があるって、わがってっからだ。

---

もし、ちょっとでも「やってみでな」って思ったなら

それはもう、第一歩踏み出してる証拠だじゃ。

やるが、やらねが。
自分の胸さ、聞いでみてけろな。

本日の一句

位置ズレに　心もズレる　深夜二時