AIへの指示の出し方
AIを使いこなすカギは「指示の出し方（プロンプト）」です。具体的で明確な指示を出すことで、期待通りの結果が得られやすくなります。
良い指示の基本原則
1. 具体的に書く
曖昧な表現を避け、何をしてほしいか明確に伝えましょう。
❌ 悪い例
「いい感じのボタンを作って」
○ 良い例
「青色（#3B82F6）の背景、白文字、角丸8px、paddingは上下8px左右16pxのボタンを作って」
2. 完成イメージを明確に伝える
作りたいものの目的や動作を説明しましょう。
❌ 悪い例
「フォームを作って」
○ 良い例
「ユーザー登録フォームを作って。名前、メール、パスワードを入力でき、送信ボタンを押したらAPIにPOSTする」
3. 技術スタックを指定する
使用する技術を明示すると、適切なコードが生成されます。
❌ 悪い例
「カウンターを作って」
○ 良い例
「Next.js（App Router）とTypeScriptでカウンターを作って。スタイリングはTailwind CSS」
4. 段階的に依頼する
大きなタスクは小さなステップに分けて依頼しましょう。
❌ 悪い例
「Todoアプリを全部作って」
○ 良い例
1. 「まずTodoの型定義を作って」
2. 「次にTodoリストを表示するコンポーネントを作って」
3. 「追加フォームを作って」
コンテキストの与え方
AIに現在の状況を伝えることで、より適切な回答が得られます。
現在のファイル構成を伝える
現在のプロジェクト構成：
- src/app/page.tsx（メインページ）
- src/components/Button.tsx（ボタンコンポーネント）
- src/lib/api.ts（API通信）
関連するコードを共有する
このコードに、エラーハンドリングを追加してください：
```typescript
const response = await fetch('/api/todos');
const data = await response.json();
```
エラーメッセージをそのまま共有
このエラーを修正してください：
TypeError: Cannot read property 'map' of undefined
at TodoList (src/components/TodoList.tsx:15:23)
実践的な例
例1: コンポーネントの作成
○ 良い指示
「Next.js（TypeScript）で、商品カードコンポーネントを作成してください。
仕様：
- props: 商品名(name)、価格(price)、画像URL(imageUrl)
- 画像は上部、名前と価格は下部に表示
- カードにhover時に影を強くする
- Tailwind CSSでスタイリング
ファイル場所: src/components/ProductCard.tsx」
例2: APIエンドポイントの作成
○ 良い指示
「FastAPIで、ユーザーのCRUD APIを作成してください。
エンドポイント：
- GET /users - 全ユーザー取得
- GET /users/{id} - 特定ユーザー取得
- POST /users - ユーザー作成
- DELETE /users/{id} - ユーザー削除
Userモデル: id, name, email, created_at
Pydanticモデルも作成してください」
例3: バグ修正
○ 良い指示
「以下のエラーを修正してください。
TypeError: todos.map is not a function
現象：
- ページ読み込み時に発生
- APIからデータ取得前に発生している模様
該当ファイル: src/app/page.tsx」
プロンプトテンプレート
新規コンポーネント作成
[技術スタック]で、[コンポーネント名]を作成してください。
機能：
- [機能1]
- [機能2]
スタイル：Tailwind CSS
ファイル場所：[パス]
APIエンドポイント作成
FastAPIで[機能名]のAPIを作成してください。
エンドポイント：
- [メソッド] [パス] - [説明]
データモデル：[フィールド一覧]
エラー修正
以下のエラーを修正してください。
エラーメッセージ：
[エラー全文をコピペ]
発生状況：
- [いつ発生するか]
- [何をしたら発生するか]