Geminiを用いたAI駆動開発(5) 〜AIの誤解を乗り越えて。Nuxt UI v4の実装と、AIとの対話のコツ〜

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

前回までのあらすじ

前回（第4回）は、Geminiを駆使してキャラクター制作やバナー整備を行いました。今回は、システムの操作感をより「Webアプリ」らしくするため、ブラウザ標準のダイアログをモダンなUIに置き換えていきます。

1. 今回の目標：最新ライブラリへのAI対応

これまでデータの削除確認には window.confirm を使用していましたが、これを Nuxt UI v4 の UModal と UNotifications に置き換えます。

ここでのポイントは、AI（Gemini）が最新ライブラリの破壊的変更をどこまで正確に把握できるかという点です。Nuxt UI v4はv3から大きく仕様が変わっていますが、AIは時として古い情報を「もっともらしく」提示することがあります。

2. 削除確認のモダン化：AIとの試行錯誤

当初、Geminiは従来の v-model を使った実装を提案しましたが、実際には表示が消えないなどの問題が発生しました。そこでAIと対話を重ね、v4固有の v-model:open や #content スロットの仕様を「再発見」させていきました。

<script setup lang="ts">
const isConfirmOpen = ref(false)

const handleDeleteConfirm = () => {
  // 削除イベントの発行
  isConfirmOpen.value = false
}
</script>

<template>
  <UButton
    icon="i-lucide-trash-2"
    color="error"
    variant="ghost"
    @click="isConfirmOpen = true"
  />

  <UModal v-model:open="isConfirmOpen" title="データの削除">
    <template #content>
      <div class="p-4">
        <p class="text-sm text-neutral-500 mb-6">
          このデータを削除してもよろしいですか？
        </p>
        <div class="flex justify-end gap-3">
          <UButton label="キャンセル" color="neutral" variant="ghost" @click="isConfirmOpen = false" />
          <UButton label="削除する" color="error" @click="handleDeleteConfirm" />
        </div>
      </div>
    </template>
  </UModal>
</template>

3. トースト通知の導入：UNotifications

成功・失敗のフィードバックも useToast() に置き換えました。これもAIに「Nuxt Layout構成の場合の最適な配置」を検討させ、app.vue の UApp 直下に置く構成に辿り着きました。

const toast = useToast()

// 成功時の例
toast.add({
  title: '処理完了',
  description: 'データを正常に保存しました。',
  color: 'success',
  icon: 'i-lucide-check-circle'
})

4. エピソード：AIの「できない」は「できる」の始まり

今回の開発で最も印象的だったのは、このブログ用マークダウンの出力プロセスでした。

マークダウン内にコードブロックが含まれる場合、AI（Gemini）は当初「構造上の制約（入れ子問題）で、マークダウン形式のままコードブロックを出力することはできない」と回答しました。しかし、こちらから「再考してください」と粘り強く要求したところ、AIは「外側を4つのバッククォートで囲む」という解決策を自ら編み出し、見事に期待通りの出力を行いました。

AI駆動開発において、AIの最初の回答が「限界」ではありません。適切なフィードバックと再考の促しによって、AIが自身の制約を超えた回答を出してくる。これこそがAIと共に開発する醍醐味だと感じた一幕でした。