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

＃4：「コードの闇に突っ込んで初めてわかった“親子関係”」

「なんだばこれ、間違ってねぇのにエラー出るってどういうごど！？」「AIの言う通りにやったばって、なんか違うんだよなぁ…」
―そんな風に、CSSとJSにふりまわされながらも、コツコツやってきたんず。placeholderの位置がズレで、margin-topで頭かかえて、でもその度に「おらでも作れるはんで！」って自信、ちょっとずつついてきたんず。コードのバグも、全部「成長の証」だって、今はそう思えるじゃ。

「またエラーか…しかも今度はsetCoinsが未定義？は？さっき定義したべや！？」

そんな苛立ちから始まった今週は、ReactとCSSに振り回された一週間だった。やる気はあった。でも、コードは素直じゃない。

margin-topで人生を学ぶ

まずぶち当たったのが、アバターの位置調整問題。.avatar-container に margin-top を指定すると、アバターとコメントの両方が動くのに、.avatar-image の margin-top をいじるとアバターだけが動く。
「おお、親子構造ってこういうことか」と思った瞬間だった。

CSSの“親子関係”はまるで家庭のようだ。親のルールが子に影響し、子ども自身の行動（スタイル）も個別に持ってる。これに気づけたのは、間違いなく一歩前進。

placeholderの裏切り

次に沼ったのは、コメント入力欄のplaceholder。各タスクに合わせて説明文を変えたところ、なぜか入力欄がバラバラに…。
「なんで左だけ揃わねんだ？右は揃ってらのに！」と不思議で仕方なかった。

解決のヒントは、地味に.task-selection input[type="text"]のCSS調整だった。box-sizing: border-boxの一文が、ズレの原因を解決してくれた。パディングとボーダーの影響が、見た目に出るって知らなかった…。

AIも完璧じゃない

AI（つまりChatGPT）に「こうすればいいですよ」と教えてもらって貼り付けたコードで、なぜか逆にタスク名とコメント欄の位置が逆転したこともあった。

この経験でわかったのは、「AIの回答はあくまで提案であって、完成形じゃない」ということ。
人間側が実際の表示を確認して、「うん、これは自分の狙い通りか？」と調整する視点を忘れてはいけない。

色で遊ぶ余裕も出てきた

16進数で紫、赤、茶色、ピンクを試すうちに、だんだんCSSも“言葉”に見えてきた。#880088が毒々しい紫だと知って、「なんだかドラクエの毒沼みたいでイイじゃん」と感じた自分がいた。
コードが感情に結びついた瞬間だった。

---

まとめ：バグの数だけ、理解が深まる

やればやるほど、問題は出てくる。だけど不思議と、怒るより「面白くなってきた」と思える時間が増えた。今までは「自分には向いてない」と思ってたけど、わからないなりに少しずつ形になってくる感覚は、確実に自信になる。

このアプリは“習慣化”を支援するものだけど、作ってる本人こそ、まさに習慣化のトレーニング中。
そして、エラーの山を越えるたびに、ほんの少しずつ“開発者”になっていっている気がする。