バイブコーディング実践入門

connpass で開催された勉強会の登壇資料です。
バイブコーディングをこれからやっていきたい人向けの資料です。
https://connpass.com/event/389252/

Transcript

1. C O N N P A S S · 2 0 2 6 0 0 1 / C O V E R AI と書く、 直す、 任せる。 その間にある 「失敗しないループ」 を設計する。 東川 諒央 — coroutine 25 –30 min · Talk + Q&A connpass 勉強会 A F I E L D G U I D E · V O L . 0 1 · 2 0 2 6 バイブコーディング 実践入門 S P E A K E R S E S S I O N V E N U E 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
2. 今日のゴール 0 1 持ち帰ってほしいこと どこで効くか / 効かないか の判断軸 0 → 1 を 再現可能な手順 で 失敗を 事前に避ける 嗅覚 0 2 このスライドの前提 AI コーディング を 少し触った 人向け ツール推しではなく 原理原則と実例 25–30 min — 実体験から削った tips 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
3. アジェンダ 0 1 バイブコーディングとは VIBE · 04 min 0 2 コンテキスト設計 CONTEXT · 05 min 0 3 0 → 1 ワークフロー WORKFLOW · 07 min 0 4 ループ運用と落とし穴 LOOPS · 06 min 0 5 ツール拡張とまとめ TOOLING · 04 min 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
4. S E C T I O N · B R E A K 01 バイブコーディングとは C H A P T E R 0 5 / VIBE CODING · DEFINITION & CONTEXT 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
5. 従来との違い 従来型 要件 → 設計 → 手実装 → テスト 所有感は 個人、 正確さは 書く段階 で担保 バイブコーディング 意図言語化 → AI 生成 → 検証 → 反復 所有感は プロダクト、 正確さは レビュー で 担保 C A U T I O N 勘違いしない点 変わるのは 「手を動かす場所」 。 品質責任が消える わけではない。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
6. なぜ今、 話題なのか T I P 本質はここ 数字より構造の話。 能力 (モデル) · 道具 (Agent/MCP) · 作法 (ループ) の 3 つが揃って、 初めて再現可 能な手順になった。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
7. S E C T I O N · B R E A K 02 コンテキスト設計 C H A P T E R 0 5 / CONTEXT IS KING 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
8. コンテキストの 4 層 T I P どこに何を置くか 永続層 = 毎回書きたくない事 / 接続層 = 外との橋 / 都度層 = 今の指示。 混ぜたら壊れる。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
9. T E R M ルール / @file / MCP の使い分け 0 1 CLAUDE.md 暗黙の好み を常駐。 命令形で 短く 書く。 0 2 @file 添付 対象 / テスト / 型 を渡す。 「察して」 は通用しない。 0 3 MCP 毎日触る道具 から。 GitHub → DB → SaaS。 ◦ 文脈を渡して 1 発で通す > @src/auth/signIn.ts @src/auth/signIn.test.ts 「'returns 401 on invalid password' が落ちる。実装側だけ直して」 → 必要な 8 行だけのパッチ。他テストは無傷。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
10. S E C T I O N · B R E A K 03 0 → 1 ワークフロー C H A P T E R 0 5 / 0 → 1 IN A SINGLE SESSION 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
11. 5 ステップで 0 → 1 を立ち上げる T I P 順序を守るのが全て コンセプトが固まる前にスタックを決めると 全部やり直し。 上から順に固める。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
12. T E R M STEP 01-03: 壁打ち → 構成 → スタック 0 1 01 壁打ち ユーザー像 × 3 コア機能 × 3 スコープ外 × 3 反論を 3 つ 0 2 02 構成決定 画面遷移 データモデル API 一覧 Mermaid で 1 枚 0 3 03 スタック決定 フロント / バック DB / 認証 ホスティング / 監視 ADR 1 枚 ADR を 1 枚生成させる > 構成とスタックを ADR 形式で 1 枚に。 文脈 / 決定 / 代替案 / 結果。選定理由は 2 行ずつ散文で。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
13. T E R M T E R M STEP 04-05: TODO.md と一気実装 04 — TODO.md 生成 > ADR と構成図を踏まえて TODO.md。 - 章立て (## セットアップ …) - `- [ ]` で依存順に並べる - 1 タスク 30 分以内の粒度 - 確認手順を 1 行添える 05 — 一気実装ループ > 上から 3 つ実装 → [x] 更新 → 確認 1 → 次の 3 つに進む (検証 → コミット → 次の 3 つ を反復) C A U T I O N 完走のコツ — 3 点セット 30 分以内に切る / 3 つ単位で実装 / AI 自身にチェックを更新。 集中が切れずに走り切れる。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
14. S E C T I O N · B R E A K 04 ループ運用と落とし穴 C H A P T E R 0 5 / TIGHT LOOPS · GUARD AGAINST PITFALLS 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
15. 失敗しないループの三原則 0 1 意図 1 行 1 文で書けない = 分解不足。 0 2 最小単位 1 関数 / 1 画面 / 1 テスト。 当たり外れに頼らない。 0 3 即戻す 差分が大きいと感じたら 即ロールバック。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
16. 検証で潰す — 自動チェック 3 連発 0 1 型 / lint tsc --noEmit / eslint 幻覚 API はここで止まる ` ` ` ` 0 2 テスト 差分テストだけ即実行。 全件は コミット直前 0 3 git diff --stat 意図外 を 1 秒検出。 迷ったら戻す。 T I P 自動検証 > 目視レビュー 人間の目はバグを見逃す。 3 つのコマンドに 1 分 預けるだけで、 後流の 2-3 時間が消える。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
17. 実体験ヒヤリハット 3 連発 0 1 git 未管理で全消失 未 init のまま AI に依頼。 ファイル全消去 され復旧 不能。 → まず git init / commit 0 2 Write→Read の幻 Read が 古い値 を返却。 revert と誤認し再実装。 → 結果は別手段で検証 0 3 多重起動で端末崩壊 dev server を 連打起動。 ゾンビプロセスで端末圧 迫。 → 起動前に lsof / kill C A U T I O N 共通の教訓 AI に任せる前に git init・状態を別手段で検証・プロセスを掃除。 「環境の前提を整える」 だけで事故の 9 割は消える。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
18. S E C T I O N · B R E A K 05 ツール拡張とまとめ C H A P T E R 0 5 / TOOLING · EXTENSIONS · TAKEAWAYS 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
19. ツール 3 層 + 拡張機構 5 種 0 1 3 層で選ぶ IDE 統合 — Cursor / Copilot CLI Agent — Claude / Codex MCP — GitHub / DB / SaaS 0 2 拡張機構 5 種 Rules — 方針常駐 Skills — 定型作業の固定化 Hooks — イベント駆動の自動処理 Sub Agent — 並列・専門化 MCP — 外部リソース接続 T I P 最初の 1 本 まずは 「PR 提出」 Skill から。git push → gh pr create を 1 コマンドに集約 する。 ` ` 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
20. サブエージェントの 4 役割 T I P 使いどころは絞る 複合判断が要る時だけ Agent。 通常はメイン会話の方が速い。 各 Agent は 要約だけ 返して context 汚 染を避ける。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
21. 私が毎日使う 3 つの動き 0 1 並列調査で先に潰す 不確実を 並列 grep。 ボトルネックを 早期発見。 0 2 Plan で物理化 実装前に .md で計画。 30 分が 3 時間 を救う。 0 3 自動検証で締める 直後に tsc / diff 。 機械で 即判定。 ` ` 「うまい人だけがうまくいく」 を ルール / Skill / Hooks / ガードレール で 再現可能な仕組み に変えるの が本題。 Q U O T E 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
22. coroutine のスタンス 0 1 やる プロセスから設計 ルール / Skill / Hooks で再現性 レビューに体重 書く時間より読む時間 失敗をログ化 次回の AI に教える 0 2 やらない ツール単体推し "これさえあれば" は罠 「AI に任せる」 で済ます委譲 判断は人間に残す 禁止情報の野放し入力 秘匿は最初に決める プロセスを磨くこと自体が成果物。 「うまい人が再現できる」 仕組みを置いていく。 Q U O T E 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
23. まとめ — 3 つの Takeaway 01 C O N T E X T — 4 L A Y E R S 02 0 → 1 I N 5 S T E P S 03 L O O P S — S M A L L · R E V E R T · V E R I F Y バイブコーディングは 「手を動かす場所」 を変える 技術。 変わらないのは 意図を言語化する力 と レビュー眼。 Q U O T E 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
24. 参考リンク 0 1 公式・原典 Andrej Karpathy Anthropic OpenAI vibe coding を 2025 年に提唱 Claude Code Docs Codex / Agents 0 2 現場で使うもの Model Context Protocol coroutine 本資料 外部ツール接続の標準 co-routine.com github.com/biwakonbu/study-event 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5
25. Q & A 聞きたいこと・触ってみた話・現場の困り事、 なんでもどうぞ。 0 0 1 東 川 諒 央 — C O R O U T I N E V I B E C O D I N G · / 0 2 5