第5章：Few-Shot Prompting：AIに例示すれば千言万語に勝るデバッグ実戦

前章までで、エラーの読み方、ファイル分割、コンテキスト制御を学びました。本章ではVibe Codingで最も高度なPromptテクニック——**Few-Shot Prompting（少数事例提示）**を紹介します。

AIがあなたの求めるレイアウト、アニメーション効果、データ構造をどうしても理解できない時、この技が決め手になります。

Few-Shot Promptingとは？

プロンプトエンジニアリングにおいて：

Zero-Shot（ゼロショット）：直接指示する。「きれいなボタンを書いてください」
One-Shot（ワンショット）：1つの例を示す。「このスタイルのボタンを書いてください：<button className="bg-red-500 rounded-lg p-2">ボタン</button>」
Few-Shot（少数ショット）：複数の例を示し、AIにパターンを帰納させる

Few-Shotが強力な理由は、人間の言語には曖昧さが多すぎるからです。あなたの言う「ハイテク感」とAIの理解する「ハイテク感」は全く異なるかもしれません。500字でハイテク感を説明するより、完璧なコード2例を見せた方が早いのです。

実戦シナリオ1：チームUIスタイルの統一

プロジェクトのカード（Card）がすべてグラスモーフィズム（Glassmorphism）スタイルの場合、「お問い合わせ」カードを新規作成する場合：

❌ 悪いPrompt（Zero-Shot）

お問い合わせ用カードを作ってください。フォームがあって、背景はグラスモーフィズムで高級感のあるデザインで。 (AIはbackdrop-blur-smを使うかもしれませんが、実際のプロジェクトはbackdrop-blur-md bg-white/10を使用しているため、スタイルが統一されません)

✅ 高度なPrompt（One-Shot）

「お問い合わせ」フォームカードが必要です。

[UIスタイル参考] 以下の既存プロジェクトのグラスモーフィズムスタイル通りに最外層divを設計してください：
<div className="glass p-6 rounded-2xl border border-primary/20 shadow-xl backdrop-blur-md bg-background/50">
  // コンテンツ
</div>
このスタイルベースで、名前、Email、メッセージ内容のフォームを実装してください。

具体的なClassName例を示すことで、AIが出力するUIはプロジェクトに100%適合し、Tailwindパラメータの微調整に時間を浪費する必要がなくなります。

実戦シナリオ2：複雑なデータ構造変換とデバッグ

バックエンドから取得したデータがフラット配列で、メニュー用にツリー構造に変換する必要がある場合。AIが書いたアルゴリズムにバグがあり、子ノードが抜けることがあります。

❌ 悪いPrompt

ツリー構造変換関数が間違っています。子ノードが正しくparentに入っていません。修正してください。 (AIはどこが間違っているか推測できないため、状況が悪化する可能性があります)

✅ 高度なPrompt（Few-Shot）

buildTree関数にバグがあります。期待する動作を明確にするため、以下の入力・出力例を参照してください：

[例1] 入力： [{ id: 1, parent_id: null }, { id: 2, parent_id: 1 }] 期待出力： [{ id: 1, children: [{ id: 2, children: [] }] }]

[例2（現在エラーが発生している状況）] 入力： [{ id: 3, parent_id: 4 }, { id: 4, parent_id: null }] 期待出力： [{ id: 4, children: [{ id: 3, children: [] }] }]

上記の入力/出力例に基づき、コードを再検査・修正してください。

明確なInput/Output例を見たAIは、内部の論理推論エンジンが起動し、自動的に自身のコードを例に当てはめて推論し、「配列で子ノードが親ノードより先に出現する」ケースのバグを即座に発見できます。

実戦シナリオ3：不慣れなサードパーティライブラリの使用方法をAIに教える

新しいライブラリ（最新版Framer Motionの書き方や更新されたAPIなど）を使いたいが、AIの知識が古いバージョンのままの場合。

Cursorの**@Web**機能を活用するか、公式ドキュメントの例を直接貼り付けます。

[タスク] Framer Motionでスクロール連動のフェードインアニメーションを実装したい。

[公式最新構文参考] 以下の最新版公式ドキュメントの書き方に従って実装し、旧版のuseViewportScrollは使わないでください：
import { motion, useScroll } from "framer-motion"

function Component() {
  const { scrollYProgress } = useScroll()
  return <motion.div style={{ scaleX: scrollYProgress }} />
}
上記の書き方を参考に、PricingCardにスクロールフェードイン効果を追加してください。

結論

複雑なロジックや視覚効果を「人間の自然言語」で説明しようとしないでください。 「Show, don't tell.」（見せて説明するな）

AIにコードスニペットを、JSONデータ例を、エラーログの完全な内容を提示してください。Few-Shot Promptingをマスターすれば、AIは「言うことを聞かないインターン」から「一言で理解するベテランアーキテクト」に変わるでしょう。

おめでとうございます！『Vibe Coding 核心メソッドとデバッグ実戦』全課程を修了しました！これらの武器を携えて、複雑な商業プロジェクトを征服してください！

章のまとめ

コアコンセプトと原理を理解
実装方法とテクニックを習得
一般的な問題と解決策に精通
実際のプロジェクトに適用可能

さらに読む

公式ドキュメントとAPIリファレンス
GitHubのオープンソース例
技術書とオンラインコース
コミュニティディスカッションと技術ブログ