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

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つのプロンプトで欲張りすぎると失敗しやすくなります
複数のステップが必要なときは分けて依頼するのがベスト

例：

APIエンドポイントを作って
UIから呼び出せるようにして
テストを追加して

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

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

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

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

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

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

Mobile Study