VibeCoding 時代のデバッグ手法

VibeDebuggingで始める効率的な開発体験
2025.07.15 hirykawa

Transcript

1. VibeCoding 時代のデバッグ手法 VibeDebugging で始める効率的な開発体験 2025.07.15 hirykawa 1
2. 自己紹介 基本情報 所属: Contrea株式会社 役職: 医療系SaaS MediOS 開発責任者 X: @hirykawa 趣味: サウナ・サッカー・お寿司 経歴 2016-2019: 医療画像システム 起業 2019-2022: Yahoo!Japan エンジニア 2022-: Contrea株式会社 開発責任者 2
3. 従来のデバッグ手法 一般的なアプローチ コード読み込み: ソースコードを読んで全体を把握 状態確認: console.log やデバッガーで状態を確認 段階的絞り込み: 問題箇所を特定するまで範囲を狭める 仮説検証サイクル: 仮説 → 検証 → 修正の繰り返し 3
4. VibeCoding とは？ 4
5. VibeCoding とは？ AI支援による直感的なコーディング手法 特徴 AI 主導: 開発者は詳細な実装を書かず、AI に指示 高速開発: Claude,Gemini,OpenAI 等の LLM を活用した新しい開発スタイル 直感的: 自然言語による指示で開発を進める 5
6. VibeCoding 開発での新しい課題 発生する問題 修正困難: 想定外の挙動があるが、何度指示しても直らない 連鎖的バグ: 一つ直すと別の場所が変な動きをする 理解不足: ソースコード理解不足で読んで修正できない ブラックボックス化: AI 生成コードの内部構造が見えにくい 6
7. VibeDebugging 7
8. VibeDebugging の基本方針 🔍 可視化の徹底 すべてのログや途中成果物を出力 処理の流れを図解で表現 📋 概要把握の優先 処理の概要を先に理解 関数レベルのシーケンス図を作成 🧪 分離テスト デバッグ用の関数ファイルを作成 単体で実行してバグを再現 🔧 段階的修正 問題箇所を特定してから修正 修正後に元の実装にマージ 8
9. 手順 1: シーケンス図による可視化 処理フローの図解化 Markdown 形式: コード全体をシーケンス図で出力 関数レベル: 詳細な処理フローを作成 視覚的特定: 問題発生箇所を視覚的に特定 理解促進: 複雑な処理の流れを理解しやすく 9
10. 手順 2: すべての成果物を出力させる 出力内容 処理ログ: 実行時のすべてのログ 中間データ: 処理途中の変数や状態 成果物: 各段階での出力結果 エラー情報: 詳細なエラートレース 10
11. 手順 3: デバッグ関数による分離テスト 単体動作環境の構築 専用関数作成: 問題となる処理だけを切り出し 最小限の実行: 必要最低限のデータで動作確認 環境分離: 元のシステムに影響しない独立環境 バグ再現: 問題を確実に再現できる状態を作成 11
12. 手順 4: 問題特定と修正 修正までの流れ 原因特定: デバッグ関数で問題箇所を特定 仮説検証: 修正案をテスト環境で検証 元実装マージ: 修正内容を元のコードに統合 12
13. 実践例 13
14. 実践例: ポッドキャスト作成ツール 概要 原稿データを読み込んで Open AI の TTS で文字起こし音声を作成 音声と BGM を合わせてポッドキャストファイルを作成 仕様 再生冒頭 5 秒は BGM のみ再生 発生した問題 出力された音声データを確認したら冒頭 7 秒が BGM のみ再生になっていた 14
15. Step 1: シーケンス図による可視化 下記を作成することでシステ ムの全体像を理解 処理概要 詳細な関数説明 15
16. Step 2: すべての成果物を出力させる 途中で生成されるファイルをすべて残す ように指示 デバッグ関数を実行時の材料として利用 音声生成部分と結合部分でどちらかが問 題ではと仮定 16
17. Step 3: デバッグ関数による分離テスト 音声生成部分と、結合部分のそれぞれのデバッグ関数を作成 音声生成と結合フェーズ デバッグ関数の作成 17
18. Step 4: 原因特定と解決 それぞれのデバッグ関数を実行し、結果を調査 音声生成部分は正常、結合フェーズが想定外挙動であることを確認 該当のデバッグ関数に問題を伝え、修正をLLMに依頼 解消した場合、元のコードにマージ 解消しない場合、デバッグ関数をシーケンスに、以下略 18
19. まとめ VibeCoding 時代の新デバッグ手法 ポイント 1. 全ての実行は LLM にやらせる 2. 大量にコードを書き、読むことができるからこそできるデバッグ手法 3. 大事なのは「全体理解」 「仮説立て」 「切り分け実行」 「取り込み」のプロセスを考える こと 19
20. ご清聴ありがとうございました 20