プロンプト（Prompt）エンジニアリング

プロンプト（Prompt）はあなたとAIの間の唯一のコミュニケーション経路です。同じ要件でも、Prompt が異なれば、成果物の品質は10倍も変わることがあります。

良いプロンプト（Prompt）の5要素：

要素	核心となる問い	欠けているとどうなるか
目標	何をするのか？	AI があなたの意図を推測して、方向性がずれる可能性がある
制約	どんな制限があるか？	AI があなたの知らない技術スタックを使ってしまい、コードを統合できなくなる
入力	どんなデータを受け取るか？	AI が入力形式を勝手に想定し、実際に実行するとエラーになる
出力	どんな結果を生み出すか？	AI がコードは出したが使い方を示さず、どう実行すればいいか分からない
受け入れ基準	どうなれば合格か？	AI がやり終えても、完了したかどうか判断できない

---

要素1：目標——何をするかを明確に伝える

悪い書き方

フォームを作成してください。

問題：どんなフォーム？ログイン？登録？検索？フィールドはいくつ？

良い書き方

ユーザー登録フォームを作成してください。以下のフィールドを含みます：ユーザー名、メールアドレス、パスワード、確認用パスワード

さらに良い書き方

帮我写一个用户注册表单，包含以下字段：
- 用户名（文本框，3-20 个字符）
- 邮箱（文本框，需验证格式）
- 密码（密码框，至少 6 位，包含数字和字母）
- 确认密码（密码框，需与密码一致）

重要なコツ：「何をするか」を具体的な構成要素に分解する。AI は曖昧な概念よりも具体的な事柄をはるかに理解しやすい。

---

要素2：制約——境界を定める

制約は、何をしてはいけないか、何を必ず使うかを AI に伝えます。制約がないと、AI は自由にやりすぎて、コードをあなたのプロジェクトに統合できなくなります。

よくある制約の種類

技术栈约束：
- 使用 React 18 + TypeScript
- 不引入第三方 UI 库（自己写 CSS）
- 使用 Vite 作为构建工具

代码风格约束：
- 使用函数组件和 Hooks，不用 Class 组件
- 每个文件不超过 150 行
- 所有 props 都要有 TypeScript 类型定义

输出约束：
- 所有代码放在一个文件里
- 给出完整的 import 语句
- 关键逻辑加上注释

制約は多く書くほど、AI の成果物は制御しやすくなります。ただし、一度に書きすぎないこと——まず核心となる制約を3〜5項目書き、結果を見てから追加していきましょう。

---

要素3：入力——データ形式を定義する

AI に入力データがどのようなものかを伝えると、より正確なコードを書けます。

悪い書き方

ユーザーデータを処理する関数を書いてください。

良い書き方

写一个函数 formatUser(user)，接收一个用户对象：
{
  name: string,       // 用户名，例如 "张三"
  age: number,        // 年龄，例如 25
  email: string,      // 邮箱，例如 "[email protected]"
  createdAt: string   // 注册时间，ISO 格式，例如 "2026-06-28T10:00:00Z"
}
返回格式化的用户信息字符串。

重要なコツ：各フィールドにサンプル値を付ける。AI は抽象的な型の説明よりも、例をはるかに理解しやすい。

---

要素4：出力——結果の形を指定する

AI に期待する出力形式を伝えましょう——コード？説明？修正提案？

よくある出力の形

出力の形	適用シーン	Prompt の例
完全なコード	新機能、新規ファイル	すべての import を含む完全なコードをください
コードの修正	既存コードの変更	変更部分だけを diff 形式で出力して
説明	コードの理解	このコードが何をしているのか1行ずつ説明して
案の提案	アーキテクチャの決定	2つの実装案を出して、長所と短所を比較して
エラー調査	デバッグ	このエラーの原因を分析して、修正手順を教えて

---

要素5：受け入れ基準——完成を定義する

受け入れ基準は最も見落とされやすい要素ですが、タスクが完了したかどうかを判断できるかどうかを左右します。

良い受け入れ基準の例

验收标准：
- 用户名少于 3 个字符时，显示红色提示"用户名至少 3 个字符"
- 密码少于 6 位时，显示红色提示"密码至少 6 位"
- 两次密码不一致时，显示红色提示"两次密码不一致"
- 所有字段为空时点击提交，每个字段下方显示对应的错误提示
- 所有字段正确填写后点击提交，控制台打印表单数据，不发送请求

重要なコツ：受け入れ基準は「何を入力したら、何が見えるか」まで具体的にし、用いる「〜のとき、〜すべき」の句式。

---

Prompt テンプレート

以下はこのコースで今後使用する Prompt テンプレートです。そのまま流用できます：

## 目标
[一句话描述要做什么]

## 约束
- [技术栈限制]
- [代码风格要求]
- [输出格式要求]

## 输入
[输入数据的结构和示例]

## 输出
[期望的输出形式]

## 验收标准
- [具体可验证的标准 1]
- [具体可验证的标准 2]
- [具体可验证的标准 3]

---

よくある Prompt の誤りと修正

誤り	問題	修正
ECサイトを作って	あまりに曖昧で、AI がどこから始めればいいか分からない	ECサイトの商品一覧ページを作って。商品画像、名前、価格を表示し、1行に3商品並べて
最善の方法で実装して	AI はあなたの考える「最善」が何か分からない	React.memo と useCallback を使ってレンダリング性能を最適化して
このコードに問題があるから直して	どこに問題があるのか説明していない	削除ボタンをクリックした後、リストが更新されません。コンソールに "id is undefined" というエラーが出ます。直してください
機能を追加して	どのファイルのどの位置に追加するのか説明していない	src/components/Header.tsx のナビゲーションバー右側に、ユーザーアバターのドロップダウンメニューを追加して

---

実践：同じ要件で3種類の Prompt を比較する

要件：「今日の TODO」リストを作る。

バージョンA：一言だけの Prompt

ToDoリストを作成してください。

AI の成果物：単純な HTML ページかもしれないし、React を使うかもしれないし、Vue を使うかもしれない。何が得られるか分からない。

バージョンB：制約を加えた Prompt

帮我做一个待办列表，用 HTML + CSS + 原生 JavaScript，
可以添加和删除任务。

AI の成果物：使える TODO リストだが、スタイルが簡素かもしれないし、空入力の処理がないかもしれない。

バージョンC：完全な5要素の Prompt

## 目标
做一个"今日待办"列表组件。

## 约束
- 使用 HTML + CSS + 原生 JavaScript，单文件
- 不使用任何第三方库
- 移动端友好的响应式布局

## 输入
- 用户在输入框中输入待办事项文字
- 用户点击"添加"按钮或按 Enter 键

## 输出
- 一个完整的 HTML 文件，可以直接在浏览器打开
- 输入框在顶部，已添加的待办事项在下方列表显示
- 每个待办事项右侧有删除按钮
- 底部显示"共 X 项，已完成 Y 项"

## 验收标准
- 输入空内容点击添加时，显示提示"请输入待办事项"
- 添加成功后，输入框清空
- 点击待办事项文字，切换完成/未完成状态（加删除线）
- 点击删除按钮，该项消失
- 统计数据实时更新
- 刷新页面后数据保留（使用 localStorage）

AI の成果物：機能が完全で、データ永続化・統計・エラー処理を備えた TODO リスト。

3つのバージョンの成果物を比較すると、直感的に実感できるでしょう。Prompt の品質の上限が、そのまま AI の成果物の品質の上限です。

---

反復開発の実践

Vibe Coding の中心的なワークフローは、一度 Prompt を与えて一度で完璧なコードを得ることではなく、Prompt を渡す → 検証する → フィードバックする → 再検証するというループです。

反復開発の5つの段階

実践プロジェクト：「プログラミング用語辞典」を作る

このプロジェクトでは、用語名・説明・カテゴリを含む、検索可能なプログラミング用語辞典を作ります。

以下の5ラウンドの反復に沿って、各ラウンドを実際に操作してみましょう。

第1ラウンド：動かせるようにする

Prompt：

做一个编程术语词典网页，要求：
- 使用 HTML + CSS + 原生 JavaScript，单文件
- 显示一个术语列表，每条术语包含名称和简短解释
- 预置 10 个常见编程术语（HTML、CSS、JavaScript、API、变量、函数、循环、数组、对象、Git）
- 顶部有一个搜索框，输入关键词可以过滤术语
- 深色背景，卡片式布局

AI が生成したコードを保存し、dict.html、ブラウザで開きます。

• 検証：ページは開けますか？10個の用語はすべて表示されていますか？検索ボックスで絞り込めますか？フィードバック：検索が機能しない場合、具体的な現象を AI に伝えましょう。

• 第1ラウンドの目標は完璧さではなく、動くことです。動くが完璧ではないバージョンは、想像の中で完璧でもまだ書かれていないバージョンより100倍良いのです。第2ラウンド：使えるようにする

検証：カテゴリのタグは表示されていますか？検索はカテゴリに一致しますか？結果が空のときの表示はありますか？ランダムボタンは機能しますか？

第2ラウンド：使えるようにする

Prompt：

在上一轮的代码基础上，做以下改进：
1. 每个术语卡片加上分类标签（如"前端"、"JavaScript"、"通用"等）
2. 搜索时同时匹配术语名称和分类标签
3. 搜索结果为空时，显示"没有找到相关术语"而不是空白
4. 添加一个"随机学习"按钮，点击后随机展示一个术语
5. 术语列表按字母顺序排列

第3ラウンド：バグを修正するこのラウンドでは、積極的にバグを探しましょう。

以下のシナリオをテストします：項目ごとに確認し、条件を満たしていない項目をAIに知らせてください。

第3ラウンド：バグを修正する

このラウンドでは、あなたは能動的にバグを探す必要があります。

以下のシナリオをテストする：

検索ボックスに特殊文字を入力する（例：<、>、/）。

検索ボックスにスペースを入力する（前後のスペース）。

ランダムボタンを素早く連続クリックする。

検索ボックスに大文字を入力する（元データは小文字の場合がある）。

すべての用語を削除する（削除機能がサポートされている場合）。

バグを見つけるたびに、構造化された方法でAIに説明する：

当我在搜索框中输入大写 "HTML" 时，没有匹配到任何结果。
预期：不区分大小写，输入 "html" 和 "HTML" 都能匹配到。
实际：只有输入小写 "html" 才能匹配。
请修复这个大小写敏感的问题。

第4ラウンド：細部を磨く

Prompt：

在上一轮代码基础上，优化以下细节：
1. 搜索时添加防抖（输入停止 300ms 后再搜索，避免频繁过滤）
2. 卡片 hover 时有一个微小的上浮动画
3. 搜索结果高亮匹配的关键词（用黄色背景标记）
4. 添加一个"已学 X 个"的计数器，点击术语卡片上的"已学"按钮 +1
5. 已学过的术语显示一个勾的标记
6. 用 localStorage 保存已学记录

検証：アニメーションはスムーズか？ハイライトは正しいか？学習済み記録はリフレッシュ後も残っているか？

第5ラウンド：テストとドキュメントを追加する

Prompt：

在上一轮代码基础上：
1. 在代码顶部用注释写出功能说明和用法
2. 为搜索过滤函数写注释，说明它的输入、输出和逻辑
3. 如果代码中有复杂的逻辑，拆分成更小的函数，每个函数只做一件事
4. 在文件中添加数据来源说明（术语数据来自哪里）

---

反復プロセスにおける重要な習慣

毎回1つのことだけを変更する

AIが一度に多くのことを変更したが、一つだけ変更したい場合は、はっきりと言う：

検索ボックスの大文字小文字の問題だけを修正し、他のコードは一切変更しないでください。

各ラウンドの反復後、すぐに実行して検証する

複数の変更をまとめて検証しない——各ラウンドの変更ごとに実行し、新しい問題を引き起こしていないことを確認する。

各ラウンドのバージョンを保持する

Gitで各ラウンドの結果をコミットする：

git add dict.html && git commit -m "第一轮：基本功能能跑"
git add dict.html && git commit -m "第二轮：添加分类和随机功能"
git add dict.html && git commit -m "第三轮：修复大小写和特殊字符 bug"
git add dict.html && git commit -m "第四轮：添加动画和已学记录"
git add dict.html && git commit -m "第五轮：添加注释和文档"

これにより、いつでも任意のバージョンに戻ることができ、各ラウンドの変更を比較することもできる。

GitはVibe Codingのセーフティネットである。AIに大幅な変更を依頼する場合は、まず現在のバージョンをコミットし、壊れたらロールバックする。

その他の拡張