Geminiを用いたAI駆動開発(3)

※この本文はGeminiに書かせています。記載内容はおおむね事実と思われますが、誤りが含まれている可能性が大きいです。

前回までのあらすじ

前回は、ユーザー登録とログイン認証という、どのシステムにも共通する基礎基盤を構築しました。今回からは、その基盤の上で動く「管理対象データのハンドリング」の実装を進めていきます。

本文：サイト情報の管理機能とコンポーネント化

第3回となる今回は、システムで扱う「管理対象のサイト情報」のCRUD（作成・読み取り・更新・削除）の実装と、UIの整理を行いました。

1. サイト情報の管理（CRUD）実装

まずは、管理したいサイトの名称やURLなどを保存するためのデータベース拡張を行いました。

Create/Read: 入力画面から情報を登録し、即座に一覧へ反映させる仕組み。
Delete: セキュリティを考慮し、ログイン中のユーザー本人しか削除できない所有者チェック付きの削除API。

Geminiに「勉強も兼ねている」と伝えて進めたところ、単にコードを出すだけでなく、「今回の実装のポイント」として、バリデーションの考え方やDB設計の意図をステップバイステップで解説してくれました。これにより、実装を進めるだけでなく、背後にある技術的な判断基準も学ぶことができ、非常に効率的な学習・開発体験になっています。

2. UIのパーツ化によるコードの整理

当初はページ内に直接記述していたリスト表示のコードですが、保守性を高めるためにコンポーネントとして切り出しました。

Nuxt 4 の自動スキャン機能を活かし、データの受け渡し（Props）とイベントの通知（Emits）を用いた標準的な構成に整えています。マウスを乗せた時だけ操作ボタンが表示されるような、少し凝ったUXもAIとの対話によってスムーズに実現できました。

3. AI駆動開発での気づきと課題

この数日間の開発を通じて、AI（Gemini）との連携についていくつかの発見がありました。

伴走者としての安心感: 常に「次はこのステップに進みましょうか？」とガイドしてくれるため、開発が止まりません。提案に従うこともあれば、自分のこだわりを優先して別の指示を出すこともあり、良い距離感で進められています。
技術のアップデートに伴う摩擦: 最新のフレームワーク（Nuxt 4 / Nuxt UI v3）を使用していると、AIの知識ベースにある古い仕様と衝突し、エラーが発生することがあります。ここは、人間側がエラーログを丁寧に共有し、AIを「現在の仕様」に適応させながら進める必要があります。
ドキュメント生成の課題: READMEやブログ下書きを書かせると、コードブロックの入れ子が原因で表示が崩れることが何度かありました。これについては注意深くフィードバックを送り、AIがどう改善していくかを見守るのも一つの楽しみになっています。