無料推定読了時間 15 分
効果的なプロンプトの書き方
Claude Codeへの指示(プロンプト)の書き方次第で、出力の品質が大きく変わります。 良いプロンプトのパターンを覚えておきましょう。
悪いプロンプト vs 良いプロンプト
NG: 曖昧な指示
> ユーザー機能を改善して
OK: 具体的な指示
> src/components/UserProfile.tsx の以下の問題を修正してください:
> 1. メールアドレスのバリデーションが実装されていない
> 2. フォーム送信時にローディング表示がない
> 3. エラー時のユーザー向けメッセージが英語のまま
>
> 修正後は既存のテストが通ることを確認してください。
良いプロンプトの5要素
| 要素 | 説明 | 例 |
|---|---|---|
| 対象 | どのファイル・関数か | src/lib/auth.ts の getUser 関数 |
| 目的 | 何をしたいか | null チェックを追加したい |
| 制約 | 守るべき条件 | 既存のAPIの型は変えないこと |
| 出力形式 | どう返してほしいか | 修正後のコードだけ返して |
| 確認方法 | どう検証するか | ユニットテストも更新すること |
コンテキストを与える
> このプロジェクトはNext.js 14のApp Routerを使っており、
> Server ComponentsとClient Componentsを使い分けています。
> 'use client' はイベントハンドラが必要な場合のみ追加してください。
>
> src/app/products/page.tsx に商品一覧の表示を実装してください。
段階的に指示する
一度に大量の指示をするより、段階的に進める方が精度が上がります。
> まず現在の src/lib/payment.ts の構造を説明してください。
(← Claudeの回答を読む)
> では、エラーハンドリングを改善してください。
> Stripeのエラーをユーザーフレンドリーなメッセージに変換する処理を追加してください。
ポイント
- ファイルパスを明示する: 「そのファイル」より「src/lib/auth.ts」
- 期待する結果を書く: 「修正して」より「〇〇が動くように修正して」
- 制約を書く: 「既存のテストが通ること」「型を変えないこと」