47歳、未経験からのWeb制作挑戦。 「南浦の母」に続くポートフォリオ第2弾、「古民家カフェ」のWebサイトがついに完成しました！
制作期間は、わずか3日間。 以前の私なら、コードの書き方で悩み、エラーで止まり、1週間あっても終わらなかったでしょう。
しかし今回は、制作スピードだけでなく、「コードの質」という意味でも、自分の中で大きな革命が起きました。
今日は、AI（Gemini）と二人三脚で走り抜けた3日間の記録と、「動けばOK」という初心者マインドから卒業できた理由を書き残します。
1. 「AIに作らせる」のではなく「AIと作る」
今回の制作で最も変わったのは、AIとの付き合い方です。
これまでの私は、AIを「答えを教えてくれる先生」か「代わりに書いてくれる自動販売機」だと思っていました。「ハンバーガーメニューを作って」と投げかけ、出てきたコードを意味もわからずコピペする。これでは、いつまで経っても「写経ロボット」のままです。
今回意識したのは、**「相談」**です。
- 「スマホの時だけギャラリーの動きを変えたいんだけど、CSSだけでやるのとJSを使うの、どっちが一般的？」
- 「ヘッダーをスクロールで透けさせたい。この書き方で、後から修正しにくくならない？」
そうやって問いかけると、AIはメリット・デメリットを含めて教えてくれます。 自分で判断し、自分でコードを選び取る。このプロセスを経ることで、「自分が作っている」という確かな手応えを感じながら進めることができました。
2. 3日目の衝撃。「そのコード、プロなら書きません」
サイトの見た目は2日目でほぼ完成していました。 しかし、本当の勝負はここからでした。
「完成した！」と喜ぶ私に、AIがこう提案してきたのです。 「動きは完璧ですが、コードの中身を整理（リファクタリング）しませんか？」
言われるがままにコードを見てもらうと、こんな指摘が返ってきました。
- 「!important を使いすぎています。これは最終手段であり、乱用するとバグの原因になります」
- 「色はバラバラに指定せず、変数（あだ名）をつけて一括管理しましょう」
正直、耳が痛かったです。「動いてるんだからいいじゃん」とも思いました。 でも、修正案を見て驚愕しました。
#3e2723 という意味不明な数字の羅列が、var(--color-text-main) という「意味のわかる言葉」に変わっている。これなら、半年後の自分が見ても一瞬で修正できます。
「プロは、見えない部分（保守性）にこそこだわる」 この当たり前の事実に、自分のコードを書き直すことで初めて気づけました。
3. ずっと勘違いしていた「VSCodeの真実」
そしてもう一つ、恥ずかしい告白をします。
私は今日まで、VSCodeというソフトは「インターネット上のどこかにあるファイルを操作する魔法のツール」だと思っていました。クラウド上で何かが動いているんだろう、と。
でも、リファクタリングの作業中に気づいてしまったのです。 私が触っていたのは、自分のパソコンの中にある、ただのテキストファイルだったということに。
「なんだ、私の手元にあったのか」
その瞬間、プログラミングという未知の魔法が、急に「現実の技術」としてクリアに見え始めました。 ローカル（自分のPC）で書いて、ドライブが裏で同期して、サーバーに上げる。 この仕組みが腹落ちしたことで、**「自分の道具をコントロールしている」**という自信が湧いてきました。
まとめ：AIは「優秀な相棒」
今回の制作を通して、私はAIの「言いなり」ではなく、AIを「相棒」にしてプロの仕事を学ぶスタートラインに立てた気がします。
- わからないことは、納得するまで聞く。
- 動くだけで満足せず、「より良い書き方」を追求する。
47歳、歩みは遅いかもしれません。 でも、昨日より確実に「エンジニア」に近づいています。
完成した古民家カフェサイト、ぜひ見てください！
次の目標は、このサイトをベースにさらにJavaScriptの理解を深めること。 挑戦はまだまだ続きます！
コメント