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

#17：構造の崩壊と再構築

ざっくり言うど

今回やったのはな、Reactアプリのコードがゴチャゴチャしてきたもんで、ChatGPTさ手伝ってもらってキレイに分け直したって話だべ。けどな、分けるっつのは思ったより大変で、エラーばっか出て、こっちもブチ切れ気味。でも最終的には整理できて、ちょっとだけ成長した気すっべな。

最初の混乱：「分ければいいんでねぇべ」って思ったんず

TaskManager.jsっつうファイルが700行もあってな、オラこう聞いだんず。

「今まで２つで足りでだのに、なんで８つにも分けるんず？」

ChatGPTの返事は「うん」ってあっさり。けどオラは思ったんず。

「詳細画面は細かぐ分けるのに、刑務画面だけゴチャゴチャってなんだべ？」

整理ってのはいいことだげど、その分だけ管理がムズくなるんず。

---

ButtonだのAvatarだの、ちょこっとずつ分けてったんず

まずは小っちゃいとこから手つけだんず。ボタン用の Button.js、アバター表示の Avatar.js、あとステータスの StatusBox.js とか。

こんな感じのJSONも書いでな：

{
  "component": "StatusBox",
  "props": {
    "level": 3,
    "hp": 15,
    "mp": 2,
    "strength": 10,
    "intelligence": 4,
    "endurance": 5,
    "missedDays": 1
  }
}

けどな、このへんから歯車が狂い始めだんず…

---

ブチ切れ多発：「これ作ったのおめだべ！」

ChatGPTのコードがうまく動がねくて、オラ何回もこう言ったんず。

「なんでおめが書いだコードでエラー出るんず？おら怒ったど！」

でもその裏にはな、不安と焦りがあったんず。どんどん構造変えでって、ちゃんと動くのかって心配でさ。

けどな、ChatGPTも「すみません、意図が汲み取れませんでした」ってちゃんと謝ってきたんず。そこだけは評価すっべな。

---

CSSとGitの地獄絵図

ファイル名の大小文字が違うだけでエラー出るんずよ。

「TaskList.jsとtasklist.jsは別物って…まじで？」

Visual StudioとGitの仕様、ほんとにややこしい。ChatGPTとのやり取りもこんなだったんず。

オラ：「なんでエラー直んねんず！？」
GPT：「ファイル名の大文字小文字の違いが原因かもしれません」

そうやって直してったら、ようやく画面が動き出したんず。

---

Gitってのはセーブポイントだべな？

オラ、Gitのことこう思ってたんず。

「ゲームで言うセーブポイントだべ？」

GPTいわく：

「それで合ってます。ただし“戻り方”も覚えないと意味ないです」

なるほどな、セーブする癖と、戻る手順はセットってことだべ。

---

分割したら終わりでね。動かすのが一番たいへんだべ

分けだら終わりだと思ってだばって、そうでもなかったじゃ。
ボタンひとつも、CSSひとつも、全部つながって動いてらんず。

構造ばきちんと分けだはずなのに、怠業日数出ねぐなるわ、ボタン効がねぐなるわで、
あっ、こりゃ全体見ながねばダメだって気づいだ。

整理ってのはな、ただ片付けるんでねくて、全体を見失わねようにする工夫なんず。

---

結論：完成ってのは、直し続ける覚悟のこと

今今回やったごどは、見た目は整理整頓に見えるけんども、実際は「壊して直して」の連続だったじゃ。
分けだことで逆にエラー増えで、どごが弱えがわがるようになった。

ChatGPTと話しながら、「ここ直したほうがいい」「この変数まだ使うよ」って何度も教えられだ。
けんども、最後に決めるのは自分だったじゃ。

これがアプリ開発だべ。
それって、人生とおんなじだべさ。

本日の一句

ひとつずつ　バグを越えれば　道になる