AIとの共創30日：Vue3/Nuxt3フロントエンド開発における実践と発見

クリエイティブの可能性を広げるパートナーとしてAIを活用し、自分の能力を拡張したい——その思いから、一ヶ月間のVue3/Nuxt3フロントエンド開発プロジェクトに臨んでみました。

AIツールを単なる作業効率化の手段ではなく、共に創造するパートナーとして位置づけ、新しい開発スタイルの可能性を探ったのです。

きっかけは、日々進化するAI技術の波に、開発者として受け身でいるべきか、それとも積極的に活用すべきか、という自問自答でした。

最近のAIツールは単なるコード補完を超え、開発プロセス全体をサポートできるようになっています。

特にフロントエンド開発において、デザインの実装やインタラクションの作り込みなど、創造性と技術力の両方が求められる領域で、AIはどこまで私の「相棒」になれるのでしょうか。

この疑問に答えるべく、実際のクライアントプロジェクトではなく、自分自身の個人開発案件で一ヶ月間の実験を行うことにしました。

対象は個人で学習はしていたものの、実案件では使用したことのないVue3とNuxt3のスタックです。
本来であれば、もう少し実践と実績を積んでから実案件に入りたいと思える状況でしたが、AIを活用してどうにかなるのでは？

という考えのもと、すこし背伸びしたチャレンジ項目として取り組みを始めることにしました。

選んだAIツールは、コーディング中に常に伴走してくれるCursorエディタのAgent機能、複雑な設計の相談相手となるClaude DesktopのMCP機能、そして最新技術への精通度が高いChatGPT o4-mini-highの3つです。

この30日間の実験を通じて、AIと人間の協業がもたらす可能性と限界、そして開発者として今後どのようにAIと付き合っていくべきかについての洞察を得ることができました。

この記事では、その実践と発見を包み隠さずお伝えしていきます。

AI駆動でチャレンジしたプロジェクトの概要
活用したAIツールとリソース
AI駆動開発の日々
まとめ：AIとの共創がもたらした新たな開発体験

AI駆動でチャレンジしたプロジェクトの概要

今回のAI駆動開発プロジェクトの私の担当部分は、Vue3とNuxt3のスタックを用いたフロントエンド開発がメインです。実際にはバックエンドとの連携が必要にはなりますが、まずはモックデータを活用し、APIから取得したデータを効率的に表示し、ユーザーが様々な条件でフィルタリングや状態管理のできるダッシュボード型の管理画面です。

データフェッチング、状態管理、フォーム処理、バリデーションなど、フロントエンド開発で頻繁に直面する課題が含まれています。一人で行うには小さくない規模ですが、まずはAIアシスタントと協力することで30日間でそれなりの進捗を目指しました。

Vue3とNuxt3は比較的最近のフレームワークであり、自分の知見が足りない部分をどれだけ補えるのか？AIがどれだけ最新の技術スタックに追従できているかを検証するのにも適していました。

開発環境としては、ローカルマシンでNuxt3のプロジェクトを立ち上げ、Cursorエディタを主な開発ツールとして使用。GitHubでバージョン管理を行いながら、一日あたり3〜4時間程度の開発時間を確保しました。

私とAIの役割分担としては、大まかな設計方針や重要な判断は私が行い、コードの実装や問題解決、ドキュメント作成などをAIと協力して進めるというスタイルを採用しました。

この取り組みを通じて、従来の開発手法とAI駆動開発を比較し、どのような変化や効果があるのかを実感を持って探っていくことにしました。

活用したAIツールとリソース

今回の開発で私が活用した3つのAIツールには、それぞれ特徴と得意分野があります。

これらを状況に応じて使い分けることで、開発効率を最大化することができました。

CursorエディタのAgent機能

Cursorは開発作業の中心となるエディタとして使用しました。

コードを書いている最中に直接AIの支援を得られる点が最大の魅力です。特に、「この関数をリファクタリングして」「ここにバリデーション機能を追加して」といった具体的な指示に対して、コンテキストを理解した的確な提案をしてくれました。

Vue3のコンポーネント作成においては、私がコメントで大まかな要件を書くだけで、Compositionフックを活用したコンポーネントの雛形を提示してくれることが多かったです。

特筆すべきは、プロジェクトのコードベース全体を把握できる点です。「似たような機能を持つコンポーネントを探して」と指示すると、関連コードを見つけ出してくれるため、コードの一貫性維持に役立ちました。

かなり使えるのですが、気がかりなのは使っているとすぐに利用制限に達してしまって低速モードに陥ってしまいました。追加課金はせず、ClaudeやChatGPTを併用しながら開発をすすめました。

Claude DesktopのMCP機能

Claude DesktopのMCP（Multi-Context Processing）機能は、より広範なコンテキストを理解できる強みがあります。

このツールは主に以下のような場面で活躍しました：

複雑な設計判断が必要なとき（状態管理の設計やコンポーネント間の関係性を整理する際など）
多数のファイルにまたがる変更の計画を立てるとき
エラーメッセージやスタックトレースの解析が必要なとき

特に、Nuxt3の複雑なルーティング設計やミドルウェアの実装など、フレームワーク特有の知識が必要な場面では、MCPの広い文脈理解能力が非常に役立ちました。

コードだけでなく、公式ドキュメントの情報も踏まえた提案をしてくれる点も頼もしかったです。

複数のファイルを解析したりするときに効果を発揮する気がします。
特定のフォルダ直下のファイル全てを見てもらうなど人がやるとものすごく時間がかかるところを素早くできるところが旨みと感じています。

ChatGPT o4-mini-high

ChatGPTのo4-mini-highモデルは、応答速度の速さと最新の知識が強みです。

主に以下のような用途で活用しました：

最新のNPMパッケージやVue/Nuxtエコシステムについての情報収集
特定の実装パターンについての簡潔な例示を得る
短いコードスニペットの生成や修正
デバッグ時の素早いアイデア出し

他のツールと比較して特に優れていたのは、Vue3とNuxt3の最新のベストプラクティスに関する知識です。

また、パフォーマンス最適化のためのヒントも的確で、実装の参考になりました。

これら3つのツールを組み合わせることで、開発のあらゆる側面をカバーすることができました。

合わせて、DeepResarchを活用すると時間はかかれど（人間がやるよりは爆速）、的確なゴールにだどりつくことが多かった気がします。AI駆動でももちろん行き詰まることは度々あって、その解決にDeepResarchは効果的と感じています。

AI駆動開発の日々

ここでは、典型的な制作の流れと、具体的にどのようにAIツールを活用していったかを紹介します。

1. 要望の説明からモック作成

プロジェクトの初期段階では、自分の頭の中にあるアイデアをAIに伝え、具体的な形にしていく作業から始めました。

主にClaude DesktopのMCP機能を活用し、「管理者向けダッシュボードが必要で、こういうデータを表示したい」といった大まかな要望を説明。

AIは私の説明を元に、画面構成やコンポーネント構造の提案、さらにはモックアップのコード例を提示してくれました。例えば、「ユーザー一覧画面には検索機能とフィルター機能が必要」と伝えると、適切なUI設計とそれを実現するためのコンポーネント構成を提案してくれます。

この段階でのAIとのやり取りは、自分のアイデアを整理する効果もありました。曖昧だった要件が、AIとの対話を通じて徐々に具体化していったのです。

反省点：
この段階でもっと計画的に設計を詰めておくべきでした。「とりあえず始めてみよう」という気持ちが先行し、全体のアーキテクチャや画面遷移、データフローなどを十分に設計しないまま実装に入ってしまいました。
後から「この機能も必要だった」と気づいて設計を変更する手間が何度も発生。AIは要望に応じて柔軟に対応してくれましたが、私自身がもっと全体像を見据えた計画を立てておけば、より効率的に開発を進められたと感じています。

2. 実装フェーズ

実装作業では、主にCursorエディタのAgent機能を活用しました。モック段階で作成したコンポーネントの骨格を実際に動作するコードに変えていく過程で、AIの支援は非常に役立ちました。

具体的には、「このコンポーネントにデータ取得のロジックを追加して」「ページネーション機能を実装して」といった指示を出すと、現在のコードコンテキストを理解した上で適切な実装を提案してくれます。

Cursorの利用制限に達した際は、ChatGPT o4-mini-highを併用。特に、複雑なロジックや特定の実装パターンについては、ChatGPTに「Nuxt3でのAPI呼び出しのベストプラクティスは？」といった質問を投げかけ、その回答を参考にしながら実装を進めました。

反省点：
AIにお願いをすると少なからず提案をしてくれることが多いです。
本来であれば不要なデザイン修正（例えば、四角を角丸にするなど）を指示していないにも関わらず適応してくれたりします。この辺りの制御をお願いするときに盛り込まないといけないところが今回の学びです。

3. デバッグと最適化

実装が一通り完了した後は、動作確認とパフォーマンス最適化の段階です。

予期せぬエラーや不具合が発生した際は、エラーメッセージをそのままAIに投げて原因と解決策を探りました。

例えば、「コンポーネントのマウント時にこのエラーが出る」と伝えると、AIはエラーの原因を分析し、修正案を複数提示してくれます。

興味深かったのは、単に問題を解決するだけでなく、「なぜそのエラーが起きたのか」の説明も加えてくれる点。これにより、同様の問題を今後自分で解決できる知識も得られました。

また、完成したコンポーネントのパフォーマンス改善にもAIの知見が役立ちました。「リスト表示が遅い」と相談すると、仮想スクロールの導入や、不要な再レンダリングを防ぐためのテクニックなど、具体的な最適化方法を教えてくれます。

行き詰まった際は、ChatGPTのDeepResearchが強力な助けになりました。複雑な問題について、様々な情報源から関連知識を集めて整理してくれるため、人間が調査するよりも圧倒的に速く解決策にたどり着けることが多かったです。

ターミナルのエラー、devtoolのアラートやワーニングと実際のコードをしっかりと提供すると解決することが多かったです。自分でもやってるつもりではありましたが、やはり出力されているメッセージを正しく把握することは重要ですね。また、解決策を採用するしないは別として、こういう方法もあるのか？と自分の学びにもかなりなることが判明しました。AI駆動は単純に効率化だけでない自分へのメリットもあるように感じます。