概要
https://medium.com/eureka-engineering/ai-coding-agent-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E7%A4%BE%E5%86%85%E3%81%AE%E7%AE%A1%E7%90%86%E3%82%B7%E3%82...
詳細内容
## AI Coding Agent を利用した社内 Web システムの Vue から React への移行
https://medium.com/eureka-engineering/ai-coding-agent-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E7%A4%BE%E5%86%85%E3%81%AE%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92-vue-%E3%81%8B%E3%82%89-react-%E3%81%AB%E7%A7%BB%E8%A1%8C%E3%81%97%E3%81%9F-bd2949c81bd5
エウレカ社は、AIコーディングエージェント（Cursor, Claude Sonnet 4.5）と独自の「PREPARE → PLAN → ACT」フレームワークを活用し、社内Vue 2システムからReactへの効率的な移行を実現しました。
**Content Type**: 📖 Tutorial & Guide
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:3/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 100/100 | **Annex Potential**: 96/100 | **Overall**: 76/100
**Topics**: [[AIコーディングエージェント, VueからReactへの移行, フロントエンド開発, プロンプトエンジニアリング, 開発ワークフロー最適化]]
エウレカ社は、End-of-Lifeを迎えた社内Vue 2システムをReactへ移行するプロジェクトにおいて、AIコーディングエージェント（主にCursorとClaude Sonnet 4.5）を積極的に活用しました。この移行は、既存のVueコードをAIに直接フィードできるため、詳細な仕様書作成の手間を省き、AI活用の実験場としても位置づけられました。
移行は「PREPARE（AI向けルール文書作成）→ PLAN（実装計画のMarkdown作成）→ ACT（ステップバイステップの実装実行）」という独自のフレームワークに沿って進められました。特に、AIに一貫性のあるコードを生成させるため、APIクライアント、ルーティング、UI設計、テストなどに関する具体的なルールを記述したドキュメントを事前に作成し、これをAIに参照させました。
PLANフェーズでは、1画面の実装を「API定義」「ルーティング設定」「UI実装」「ロジック実装」「テスト実装」といった複数のサブタスクに分割した実装計画をAIに作成させ、ACTフェーズで各ステップを順に実行させることで、AIの出力精度を高めました。著者は、関連ドキュメントへのリンクを各ステップのプロンプトに手動で追加することが、AIがルールに従う確率を高めるコツだと指摘しています。
このAI主体の開発により、比較的シンプルな画面では人間による手直しが最小限に抑えられ、従来の2〜3割の時間短縮が体感できたと筆者は述べています。得られた学びとして、実装タスクの細分化、具体的なコード例を含むAI用ルールの整備、そしてAIの出力レビューに基づいたルールの継続的な更新が、AI活用プロジェクト成功の鍵であると強調されています。
一方で、複雑な仕様の画面ではAIの精度が低下し、AIとの長時間の格闘が発生する課題も明らかになりました。この対策として、さらにタスクを細分化し、AIが処理できる粒度まで複雑さを減らすことが提案されています。また、AI生成ドキュメントの冗長性や、最終的な人間によるコードレビューがボトルネックになる点も課題として挙げられており、今後はAIによるレビュー導入も検討されています。
この事例は、VueからReactへの移行だけでなく、他のフレームワーク移行や日々のソフトウェア開発におけるAI活用のヒントとなるでしょう。特に、AIにタスクを任せる際の構造化されたアプローチの重要性を示しています。