2025年8月31日日曜日

AIに合わせたプロンプトの工夫

 Agentモードでは、AIが自動でタスクを分解し、コード編集・ターミナル操作・テストなどを行ってくれます。でも、プロンプトがあいまいだと、思っていたのと違う結果になることも…。

そこで大事なのが「AIに伝わるプロンプトの書き方」です。

✅ プロンプト作成の基本3原則

原則説明
🎯 目的を明確にする「何がしたいのか」をはっきり書く
🗂 スコープを具体化する対象の技術・ページ・機能などを指定
📏 ルールや希望があれば書くコーディング規約、フレームワークなど

✍️ 良いプロンプトの例と悪い例

❌ 悪い例（あいまい）

コードを直して

  • → どこを？ どう直す？ わからない！

✅ 良い例（目的とスコープが明確）

ログイン画面のバリデーション処理を追加して。  
メールアドレスが空、または不正な形式の場合はエラーメッセージを表示するようにして。

💡 よく使えるプロンプトテンプレート

以下はAgentモードでよく使えるプロンプトの書き方テンプレです：

① 機能追加系

〇〇という機能をReactアプリに追加して。  
バックエンドはNode.jsで実装されてる。

例：

ユーザーがカレンダーから日付を選べるようにして。選んだ日付をAPIに送信して、予約を登録する。

② UI改善・スタイル調整

〇〇ページのUIを改善して。モバイル対応もしてほしい。

例：

プロフィール編集ページのレイアウトを改善して。スマホ表示で入力欄がはみ出さないようにして。

③ テストの追加・修正

〇〇の単体テストを追加して。Jestを使って。

例：

`calculateDiscount()` 関数のJestテストを追加して。10%割引が正しく計算されるか検証して。

④ エラー対応・バグ修正

〇〇エラーが出てるので修正して。スタックトレースは以下のとおり：
[エラー内容を貼る]

⑤ プロジェクトに沿った方針の提示

このプロジェクトはTypeScriptを使ってるので、型安全を保つようにして。

🧩 補足：ツールやツールセットをプロンプトで指定

Agentモードでは、プロンプト内で特定のツールやツールセットを直接指定できます：

#testingTools を使って、エラーが出てる部分のテストを修正して。

  • # の後にツールまたはツールセットの名前を付けるだけ

  • 例： #terminal, #reader, #debugTools など

📦 プロンプトにインストラクションファイルを組み合わせる

プロンプトと一緒に、「コーディングスタイルの指示ファイル」（instruction file）を使うと、より一貫性のある編集が可能になります。

たとえば：

- 変数はcamelCase
- コンポーネントはPascalCase
- エラー処理はtry/catchを使う

こうしたルールをMarkdownファイルに書いて、プロンプトと一緒に使えば、プロジェクトに合ったコードが生成されやすくなります。

⚠️ 注意：長すぎる or 複雑すぎるプロンプトは避けよう

  • 1つのプロンプトで欲張りすぎると失敗しやすくなります

  • 複数のステップが必要なときは分けて依頼するのがベスト

例：

  1. APIエンドポイントを作って

  2. UIから呼び出せるようにして

  3. テストを追加して

→ これらは3回に分けて依頼した方が確実です。

✅ まとめ：プロンプトを上手に使うポイント

ポイント説明
🎯 目的を明確にする「何を」「どうしたいか」を具体的に書く
🗂 対象を絞る関連ファイル、関数名、画面名など
📋 補足情報を伝える使用技術、コーディングルールなど
🧪 小さく試す最初はシンプルにしてから徐々に拡張
🧠 必要ならツール・ツールセットを指定#tool名 または #toolSet名 で

✨ 最後に：プロンプトは「AIへの指示書」

プロンプトは、AIにとっての「仕様書」や「指示書」です。
丁寧に書くことで、欲しい結果が早く、正確に得られるようになります。

「AIが思った通りに動かない」と感じたときは、ぜひプロンプトを見直してみてください！

時刻:

0 件のコメント:

コメントを投稿