AIバイブコーディングとは？【定義と思想】

定義：AIと人間が、求める体験・美学・制約（= vibe）を先に共有し、方向性は人、下書きはAIで分担。短いサイクルで生成→評価→修正を回す開発スタイルです。

• 人：目的・品質基準・禁止事項を決め、最終判断と統合を担当。
• AI：下書き、代替案（A/B/C）、リファクタ、テスト雛形、ドキュメント化を高速支援。

要は「合意できる雰囲気＝ノリ」を先に固めることで、AIの出力ブレを抑え、迷いなく小刻みに進めるための実践フレームです。

なぜ今必要か（メリット）＋成功のコツ

• 手の迷いが激減：テイスト・禁止事項を明示 → AIの出力ブレが減る。
• 学習速度が先行：動く下書きから学べるので、実装が先に立つ。
• 合意形成が速い：“vibe”という共通語彙で非言語を言語化。
• 品質の底上げ：テスト雛形やリファクタ案をAIに並走させる。

成功のコツ（現場で効く4原則）

1. ガードレールを先に宣言：NGライブラリ、パフォ要件、可読性規約。
2. 1サイクル15–30分：長時間の思索より小さな検証を回す。
3. 必ず根拠と比較：AI案は「理由」「代替」を添える。
4. 計測→記録：Before/Afterの数値と差分を残し、学習を加速。

準備：環境・役割・ルール（実例つき）

1) ツール例

• AI支援：コード補完／チャット（任意のサービス）
• Gitホスティング：PRテンプレ／レビュー運用
• CI：lint / テスト / ビルド自動化

2) 役割

• リード（人）：目的・制約・完成条件・非機能を決める指揮。
• AIファシリ：たたき台／代替案／要約／テスト雛形。
• QA/セキュリティ：観点リストの整備、CIのチェック増設。

3) ルール（最重要）

1. 宣言の型：「目的/対象/非機能/禁止/完成条件」を1枚に。
2. 粒度：PRは最小。レビューしやすい単位で分割。
3. ログ：決定理由は/docs/adr-*.mdに残す。

copy目的: フィードの初期表示を1.2s以下に
対象: モバイル8割/低速回線20%
非機能: LCP < 2.5s / CLS < 0.1
禁止: 重いUIフレーム/同期ブロックI/O
完成条件: Before/AfterのLCP/CLS改善とスクショ添付

基本フロー（5ステップ）と現場の動かし方

1. Vibe整地：目的／対象ユーザー／禁止／完成条件を1枚に。
2. AIに下書き依頼：最小実装・代替案・根拠をセットで。
3. 手元で検証：ビルド・テスト・Lighthouse等で定量確認。
4. レビュー＆改善：差分を言語化→AIにピンポイント改善。
5. ナレッジ化：良プロンプト／決定理由を/docsへ残す。

実務Tips

• 「まず走らせる」ため、UIはプレースホルダでOK。最小構成を優先。
• レビュー依頼は「目的・差分・測定値・AI案の要約」をテンプレ化。
• 1サイクルごとに「やめたこと」を書くと迷いが減る。

コピペOK：プロンプト＆チェックリスト集

Vibe整地テンプレ

copyあなたは上級エンジニア兼UXリードです。以下の制約で最小実装のたたき台を提案してください。
目的: {何を達成したいか/1行}
対象: {ユーザー像/端末/ネット環境}
スコープ: {作る機能/作らない機能}
非機能: {性能/アクセシビリティ/セキュリティ}
テイスト: {UIの雰囲気/参考URLやキーワード}
禁止: {避けたいライブラリ/実装/アンチパターン}
出力:
1) 最小実装のファイル構成
2) キーロジックの擬似コード
3) 代替案A/Bと採用基準
4) テスト観点/簡易チェックリスト

改善ループ用

copy差分レビュー:
現状: {スクショ/ログ/主要コード}
課題: {性能, 可読性, 可用性 など具体}
要望: {変更点/数値目標/期限}
出力: 改善案3つ(メリデメ/工数/影響範囲) + 最小PR差分

セルフチェックリスト

• 目的と完成条件が1行で言える
• NG事項が明文化されている
• “最小で動く”が24h以内に出る
• 数値で測れる指標を1つ以上持つ
• 決定理由が/docs/adr-*.mdに残る

実務パターン：UI/バックエンド/ドキュメント/テスト

UIをAIで叩き台→人が磨く

• AIにコンポーネント分割案＋アクセシビリティの注意を出させる。
• サイズ・余白はトークン化（例：--space-*）。

バックエンドでの使いどころ

• 最小APIの叩き台、例外設計、DIの分割案。
• パフォの比較実験（N+1回避、キャッシュ戦略の案出し）。

ドキュメント化の同時並行

• AIに「PR要約」や「変更点の箇条書き」を自動生成させる。
• ADRテンプレで意思決定を可視化。

テスト自動化の足がかり

• ユースケース表→テスト観点→最小ケースの自動生成。
• 生成物は必ず人が“削る”。足し算より引き算で精度を上げる。

ケーススタディ：個人開発／受託／チーム

個人開発

ゴール1つ・PR最小・測定1指標（例：LCP, バンドルサイズ）でOK。小さな成功体験を毎日作るのがコツ。

受託（クライアントワーク）

「バイブ整地シート」を合意文書にしておくと、期待値コントロールが容易。途中認識ズレの火消しが減る。

チーム

PRテンプレとCIの観点表を共有資産化。新人の立ち上がりが圧倒的に早くなるのがメリット。

効果測定：指標・目標設定・ログ化

• 速度：着手→最小PR作成までの時間（中央値）
• 品質：Lint/テストのパス率、修正リードタイム
• UX：LCP/CLS、アクセシビリティスコア
• ナレッジ：ADR/プロンプト資産の増加数

毎週レトロで「最も効いたプロンプト」「やめたこと」を3つ共有すると学習が加速します。

チーム導入：Git/レビュー/CI/CD連携の型

リスクとアンチパターン（回避策つき）

• 指示がふわっと：vibe不足 → 出力がブレる。前提シートで固める。
• 長文一括依頼：サイクルが長く学びが薄い。15–30分ターンを死守。
• 根拠なし採用：比較・計測がない意思決定は再発。Before/Afterを残す。
• 依存しすぎ：思考停止は品質劣化。AI案×人の審美眼で合議。
• 情報漏洩：機密の持ち出し禁止/匿名化/監査ログ/ローカル/オンプレ代替を用意。

FAQ：よくある質問

内部リンク＆参考

• Programming-BLOG（トップ）
• 初心者ロードマップ（VS Code導入記事へ内部リンク）

付録：雛形テンプレ

PRテンプレ

copy### 目的
- {ゴール1行}

### 差分
- {主要変更点}

### 測定
- Before: {LCP 3.2s}
- After:  {LCP 1.9s} (端末/回線/手順)

### AI提案の要約
- 採用案A（理由）
- 却下案B/C（却下理由）

### リスク/留意
- {既知の副作用やフォローアップ}

ADRテンプレ

copy# ADR: {決定のタイトル}
- 日付: {YYYY-MM-DD}
- 背景: {課題/制約}
- 選択肢: {A/B/C}
- 決定: {採用案と理由}
- 影響: {コード/運用/チーム}
- フォローアップ: {検証/見直し条件}

テスト観点テンプレ

copy機能: {対象}
必須動作: {正常/異常}
境界: {閾値/長さ/サイズ}
性能: {LCP/CLS/スループット}
UX: {フォーカス/キーボード/読み上げ}
セキュリティ: {認可/入力検証/秘密情報}

用語まとめ（クイックグロッサリー）