こんにちは。
アドベントカレンダー14日目です。
本日は、Vueによるフロントエンド開発においてAIをどのように活用できるかについて、お話ししたいと思います。
日々のフロントエンド開発の現場で、こんな経験はありませんか。
「Vueでテーブルコンポーネントを書いてください」とAIに依頼したものの、返ってきたコードが期待外れだった——古い文法が使われていたり、スタイルが未実装だったり、ロジックが不完全だったりして、結局自分で修正する時間のほうが長くかかってしまう……
原因はどこにあるのでしょうか。
実は、AIの能力不足が直接の原因ではありません。
多くの場合、「質問内容が十分に明確ではない」ことが問題です。
AIを「何でも叶う魔法の箱」と捉えると、一般的かつ無難な回答になりがちです。しかし、AIを「明確な指示によって力を発揮する優秀な副操縦士」として扱えば、実力を最大限に引き出すことができます。
ここでは、より精密な質問によってAIアシスタントをVue技術に精通した心強いパートナーへと変える方法を紹介します。
なぜ曖昧な質問ではうまくいかないのか？
「Vueでテーブルを作って」とだけ指示すると、AIは多くの不確定要素を抱えたまま回答するしかありません。
・技術スタックが不明：Vue 2 ですか？Vue 3 ですか？
・UIライブラリが未指定：Element Plus、Ant Design Vue、または自作スタイルでしょうか？
・機能要件が曖昧：ページネーションやソート、フィルターは必要ですか？
・コード規約が不明：TypeScriptは使いますか？
必要な情報が不足しているため、AIは最も一般的な想定で回答せざるを得ません。その結果、現場のニーズに合わないコードが出力されてしまいます。問題はAIではなく、私たちの指示の精度にあるのです。
より良い質問のためのフレームワーク
高品質なコードを得るためには、質問に次の4要素を含めると効果的です。
役割設定 + 技術スタック指定 + 詳細な要件 + 出力形式の指定
これらを明確に伝えることで、AIは目的や背景を理解しやすくなり、より的確な成果物を生成できます。
実例：質問次第でどう結果が変わるか
ここでは「タスク管理テーブル」の開発を例に、質問の仕方がAIから得られるコードの品質にどのような影響を与えるのかを確認してみましょう。
質問内容が曖昧な場合
Vueでタスク管理テーブルを書いてください。
このプロンプトで生成されるコード
（以下のサンプルコードは生成AIによって作成されたものです）
明確な質問の場合
【役割設定】
あなたは、Vue 3による大規模な管理システム開発に豊富な実績を持つフロントエンドエンジニアです。
【技術スタック】
Vue 3（Composition API と ```<script setup>```）
TypeScript
UIライブラリ：Element Plus（テーブルおよびページネーションに使用）
日付処理：Day.jsを使用し、日付は「yyyy-mm-dd」形式で表示
【詳細要件】
表示項目：タスク名、優先順位（高/中/低、ドロップダウンで選択）、ステータス（「進行中／完了」、ボタンで状態を切り替え）、締め切り（yyyy-mm-dd形式で表示）
フロントエンド側でのページネーション機能
タスク名による検索機能
編集ボタンによるタスク詳細の編集機能
サンプルデータ10件を使用
【出力形式】
Vue単一ファイルコンポーネント（SFC）の完全なコード
主要機能についてのコメント
API呼び出し部分の構造解説
このプロンプトで生成されるコード
（以下のサンプルコードは生成AIによって作成されたものです）
まとめ
AIと共に開発する時代、どのように質問するかがますます重要になっています。AIを「魔法の箱」と捉えるのではなく、「明確な指示で力を発揮する強力なツール」として使うことで、より高い開発効率を目指せます。
次回AIに依頼する際は、「役割」「技術スタック」「詳細な要件」「出力形式」の4つのポイントを整理して質問してみてください。きっと、AIが頼れる「副操縦士」として、あなたの開発作業を強力にサポートしてくれるはずです。
あなた自身は、これまでにAIとうまく意思疎通ができずに困った経験はありませんか？また、もし効果的な質問のコツやテクニックをご存知でしたら、ぜひ教えてください。