概要
既存のVue/Nuxt2プロダクト（300ページ）を、人間がコードを一行も書かずAI（Claude Code等）のみでNext.jsへ移行した4ヶ月間の実践記録と、AI駆動開発における「レールの敷き方」の教訓。
詳細内容
bravesoft株式会社による、大規模なフロントエンドリプレイスの挑戦記録です。Laravel+VueおよびNuxt2で構成された約300ページの既存資産を、Claude Codeを中心としたAI駆動開発でNext.jsへ完全移植しました。
### 移行のプロセスと改善策
1. **初期の失敗**: コードのみをAIに渡すと視覚的・機能的再現率が30%に留まった。AIは「コードから挙動を想像」するのが苦手であることを痛感。
2. **視覚情報の付与**: Chrome DevTools MCPを活用し、AIに実際の動作画面を「見せる」ことで再現率が大幅に向上。
3. **トークンコストの最適化**: 手戻りが最大のコスト要因であることを特定。仕様抽出Agentを強化し、エラーハンドリングや全インタラクションを事前に網羅させることで、総トークン量を抑制した。
4. **ルールの構造化**: 全てのルールを1箇所にまとめず、CLAUDE.md、Skills、Agent定義など階層的に分離し、AIが必要な時に必要な情報だけを参照できる環境を構築。
### 重要な教訓
「AIが得意な技術（情報の多いNext.jsなど）」を選ぶことが開発の成否を分けること、そしてプロジェクト固有の「型（エラー処理やデータフェッチ）」を初期のパイロットフェーズで固めきらないと、終盤に甚大なリファクタリングコストが発生することを強調しています。