2025/7/31 Vibe Coding Catfe 登壇資料

Transcript

1. Vibe Coding Catfe 1ヶ月間バイブコーディングで ネイティブアプリを開発して分かった ベストプラクティス 株式会社MAKE A CHANGE / 岡村 匡洋
2. ・自己紹介 ・今回開発したアプリ ・今回わかったベストプラクティス（はじめに結論） ・使ったAI駆動開発ツール ・バイブコーディングの進め方 ・今回わかったベストプラクティス ・反省点 ・伝えたい5つの核心メッセージ ・おまけ アジェンダ
3. 自己紹介 岡村 匡洋 ・ 株 式 会 社 M A K E A C H A N G E / 代 表 取 締 役 ・ 1 9 8 2 年 生 ・ I T エ ン ジ ニ ア、 P M と して 1 0 年 以 上 の 経 験 を 持 つ ・ A I 案 件 に は 2 0 1 9 年 か ら 携 わ って い る ・ P M P （ プ ロ ジ ェ ク ト マ ネ ー ジ メ ン ト の 国 際 資 格 ） 　 取 得 済 ・ 自 社 プ ロ ダ ク ト S a a S の イ ク ジ ッ ト 経 験 あ り ・ ラ ッ コ 🦦、 アメ リ カ ビ ー バ ー 🦫 好 き 著書 「 ゼ ロ か ら わ か る 生 成 A I 駆 動 開 発 入 門 」 2 0 2 5 年 1 月 発 売 オカムラ X(Twitter)アカウント
4. 今回開発したアプリ 本日RevenueCatさん主催のイベントということで RevenueCatを組み込んだ ネイティブアプリ（まずはiOS）の バイブコーディングにチャレンジしました！ 💪
5. 今回開発したアプリ 作ったアプリはこちら
6. 今回開発したアプリ LLM：OpenAI GPT | 文字起こし：Whisper | 課金プラットフォーム：RevenueCat
7. 今回開発したアプリ https://apps.apple.com/jp/app/synapse-talk-ai/id6748533673 1h前に公開されました 🎉🎉🎉🎉
8. 今回開発したアプリ でも、議事録アプリなんて 世の中にたくさんあるよね？
9. 今回開発したアプリ でも、議事録アプリなんて 世の中にたくさんあるよね？ 👉はい、それはそう。 でも・・・
10. Bot系 (TL;DV等) AIアシスタント系 (Notion AI, ChatGPT等) Synapse Talk リアルタイム・ インサイト ❌ 不可 ❌ 不可 (録音停止後) ✅ 可能 プラットフォー ム依存 依存 (Zoom, MS Meet等) 非依存 非依存 対面利用 ❌ 不可 ✅ 可能 ✅ 可能 今回開発したアプリ 「リアルタイム」にインサイトを生成してくれるアプリはない （だから作った）
11. 今回開発したアプリ 「リアルタイム」にインサイト生成 ・主要な議題 ・重要ポイント ・決定事項 ・ネクストアクション など
12. 今回開発したアプリ 実演します
13. 今回わかったベストプラクティス 今回わかった ベストプラクティス 最初に結論
14. 今回わかったベストプラクティス 1. AIが作った実装計画書をよく読むこと（ホント重要） 2.バグがなかなか解決しない時は、解決に役立つ情報をAIに与える 3.詰まったら別のAIツールを使う 4.直接コードをみる
15. 今回わかったベストプラクティス どういうことか 順を追って説明します
16. 使ったAI駆動開発ツール 使ったAI駆動開発ツール
17. 使ったAI駆動開発ツール バイブコーディングに使ったツールは以下の通り Claude Code （メイン） Gemini CLI Cursor
18. バイブコーディングの進め方 バイブコーディングの 進め方
19. バイブコーディングの進め方 全体を作ってから細部を詰めていく ここで一旦、全ページ開発 アプリの全体像を作る 大枠の開発 細かい修正 動作が想定と異なる部分を 修正していく
20. バイブコーディングの進め方 全体を作ってから細部を詰めていく 大枠の開発 細かい修正 10% 90% ここで一旦、全ページ開発 アプリの全体像を作る 動作が想定と異なる部分を 修正していく
21. バイブコーディングの進め方 全体を作ってから細部を詰めていく 大枠の開発 細かい修正 10% 90% 一気にアプリが できるので楽しい ロジックが複雑に なり簡単にはいかない
22. バイブコーディングのモチベーション遷移図 大枠の開発 細かい修正
23. 開発の進め方 - 大枠の開発 大枠の開発 ①ChatGPTで要件定義.md、タスクリスト.md を生成 ②それらを元にClaude Codeでultrathinkで詳細実装計画を生成 　　・ultrathinkなどの強調フレーズ（think, think harderなど）を 　　　プロンプトに入れるとより深い推論をしてくれます 　　・ここで課金プラットフォームはRevenueCatを使うことを指定 think hard --input タスクリスト.md 要件定義.md を読み込み、 1. 詳細版 plan_hard.md を生成する。 2. ## Architecture セクションに Checkout フローを示す mermaid 図を入れる。 3. ## Open Questions に未解決事項を列挙する。 > docs/dev/plan_hard.md 課金の仕組みにはRevenueCatを利用することを組み込んで 必要に応じて docs/design 配下のファイルを参照して。GEMINIと協業して進めて
24. 開発の進め方 - 細かい修正 ここでCustom slash commandを利用しました。 ①Claude Codeに計画を立てさせる。計画書を.mdファイルで生成させる ②Claude Codeに実行させる。 （基本的にGeminiと協業させて実行させる） ultrathink: 以下の修正について docs/dev/improve 内に1ファイルで修正計画を立ててください。 ファイル名の先頭に日付時間（YYYYmmDDHHMM）を含めてください。GEMINIと協業して。実装 はしないでいいです。 #$ARGUMENTS 細かい修正 ultrathink: $1 を参照に $2 を完了してください。 完了したら TODO にチェックを入れ、次の手順を実行せず一旦停止。 GEMINIと協業して進めて適宜、デバッグログを吐き出すようにしてログを確認しつつ挙動の確認 テストを行いエラーが解決するまで修正を繰り返して完了させて。
25. 開発の進め方 - 細かい修正 大枠の実装がもれた部分を実装していく。 （47ファイルの修正計画 .mdがあった） ・RevenueCatの実装 ・AIクレジットの付与と消費ロジック ・DEVとPRODの環境分け などなど
26. 今回開発したアプリ 実演します → チェックします
27. 今回わかったベストプラクティス 今回わかった ベストプラクティス
28. 今回わかった ベストプラクティス 1. AIが作った実装計画書をよく読むこと（ホント重要） 2.バグの解決に役立つ情報をAIに与える 3.詰まったら別のAIツールを使う 4.直接コードをみる
29. バイブコーディングのポイント - AIが作った計画書をよく読むこと（ホント重要） ・面倒だがこれを怠ると、あとでもっと面倒なことになる。 ・全然違う方向性で進んでしまうことがある。 ・計画書の内容でわからなければ分かるまでClaude Codeに質問しよう。 DBのセキュリティルールを修正してほしかったのに DBのスキーマを変えようとする、など。 。
30. バイブコーディングのポイント - バグの解決に役立つ情報をLLMに与える エラー内容でググって解決した例などのQiitaやStack Overflow のURLを 読み込ませる 　READ https://stackoverflow.com/questions 　この情報を元にエラーを解決して
31. バイブコーディングのポイント - 詰まったら別のAIツールを使う 今回、Claude Codeをメインにつかっていましたが どうしても無限ループで発生するエラーが解消できなかった。 → Cursorを使ったら解決できた。 　原因特定のため、一時的にコメントアウトしてテストする手法を 　繰り返して解決 🎉
32. バイブコーディングのポイント - 詰まったら別のAIツールを使う 巷を騒がせているClaude Codeのナーフ（弱体化）問題 　　→ 対応するため、他ツールも使えるようにしておくことが重要
33. バイブコーディングのポイント - 直接コードをみる 以下のようなプロンプトでチェックするコードのあたりをつける PoCや自分用のツールであれば良いが、本番リリースするアプリであれば コードチェックは必須に感じる。
34. 反省点 反省点
35. 反省点 1. VIBES（バイブス）で進めすぎた。 　特に前半は「コードは一回も見ないでやるのがバイブコーディング！」 　とのモチベーションで臨んだ。 　しかし、適度にコードは見ないと逆に大変なことになると痛感。 　今後、スパゲッティコードにならないようにコードは見ながらガードレール 　をCLAUDE.mdに定義できないか模索する。 （Don't Repeat Yourselfの法則など）
36. 反省点 1. VIBES（バイブス）で進めすぎた。 　特に前半は「コードは一回も見ないでやるのがバイブコーディング！」 　とのモチベーションで臨んだ。 　しかし、適度にコードは見ないと逆に大変なことになると痛感。 　今後、スパゲッティコードにならないようにコードは見ながらガードレール 　をCLAUDE.mdに定義できないか模索する。 （Don't Repeat Yourselfの法則など） 2. Claude Codeが作った計画書を隅々まで読み込むべきだった
37. 反省点 1. VIBES（バイブス）で進めすぎた。 　特に前半は「コードは一回も見ないでやるのがバイブコーディング！」 　とのモチベーションで臨んだ。 　しかし、適度にコードは見ないと逆に大変なことになると痛感。 　今後、スパゲッティコードにならないようにコードは見ながらガードレール 　をCLAUDE.mdに定義できないか模索する。 （Don't Repeat Yourselfの法則など） 2. Claude Codeが作った計画書を隅々まで読み込むべきだった 3. 初期からGit Worktreeを使えばよかった
38. 伝えたい5つの核心メッセージ 伝えたい5つの 核心メッセージ
39. 伝えたい5つの核心メッセージ 1.今回の開発効率は体感5〜6倍上がった。 2.本番リリースが前提のアプリ開発にはまだまだエンジニアの知識が必須 3. AIが作った計画書は面倒でも隅々まで読み込む。 　わからない点はクリアになるまで問いただす。 4. 複数のAIツールを常に稼働できる状態にしておく。詰まった時の冗長性を担保 5. ネイティブアプリで課金するならRevenueCatは便利そう 　 （プラットフォームをまたいで統合管理、課金PaywallのABテストなどできる。 ） ただこれは個人開発だったから。 大人数の開発ではまた違う結果になると思う Claude Code, Gemini CLI, Cursor, Windsurfなど
40. おまけ Claude Codeにアプリロゴつくらせたら全然ダメでした 前衛的すぎる・・・
41. アプリぜひインストールお願いします みんなでバイブコーディングを楽しみましょう！ Thank you so much,End of File オカムラ X(Twitter)アカウント Synapse Talk AI
42. Appendix Appendix
43. AIツールと設定 Claude Codeのおすすめ設定
44. Claude Codeの設定 1.Custom Slash Command 2.Git worktree 3.CLAUDE.md （CCの機能ではないが）
45. Claude Codeの設定 - Custom Slash Command /plan /execute /security-review 以下3つのカスタム スラッシュコマンドを作成 実装前の計画を立てる 計画を実行する セキュリティに問題がないか確認
46. Claude Codeの設定 - Git worktree 並列開発したかったのでGit worktreeを利用 Anthropicの公式でも「一般的なワークフロー」として紹介されている https://docs.anthropic.com/ja/docs/claude-code/common-workflows
47. ### プロンプトのログ ユーザーが実行したプロンプト、実行内 容、結果を全て docs/dev/history/prompt_history.md に 保存して。 ### ツールの並行実行 For maximum efficiency, whenever you need to perform multiple independent operations, invoke all relevant tools simultaneously rather than sequentially. ----- 最大限の効率を追求するために、複数の 独立した処理を実行しなければならない 場合は、それらのツールを順番に呼び出 すのではなく、同時に起動してくださ い。 Claude Codeの設定 - CLAUDE.md 1.実行したプロンプトと 　実装内容をファイルに保存 2.ツールの並列実行 3.Gemini CLIとの協業
48. 開発中の雑感 開発中の雑感
49. 開発中の雑感 1. Claude Codeを常に稼働させておきたく、本業の合間に指示出し。 　 寝る前に大きめのタスクを振ってから寝る日々。 　　　 →「Claude Codeはソシャゲ」
50. 開発中の雑感 1. Claude Codeを常に稼働させておきたく、本業の合間に指示出し。 　 寝る前に大きめのタスクを振ってから寝る日々。 　　　 →「Claude Codeはソシャゲ」 2.Flutter経験ゼロでここまで開発できるのすごい・・・とテンション上がる
51. 開発中の雑感 1. Claude Codeを常に稼働させておきたく、本業の合間に指示出し。 　 寝る前に大きめのタスクを振ってから寝る日々。 　　　 →「Claude Codeはソシャゲ」 2.Flutter経験ゼロでここまで開発できるのすごい・・・とテンション上がる 3.はじめ正直、RevenueCatを導入する意味があまりわからなかった。 　しかし実際に触ってみて複数プラットフォームのユーザーと課金状況を 　一元的に管理できるメリットに気がつく。
52. 開発中の雑感 1. Claude Codeを常に稼働させておきたく、本業の合間に指示出し。 　 寝る前に大きめのタスクを振ってから寝る日々。 　　　 →「Claude Codeはソシャゲ」 2.Flutter経験ゼロでここまで開発できるのすごい・・・とテンション上がる 3.はじめ正直、RevenueCatを導入する意味があまりわからなかった。 　しかし実際に触ってみて複数プラットフォームのユーザーと課金状況を 　一元的に管理できるメリットに気がつく。 4.Apple側の不備でApp Store Connect（TestFlight）にアプリをアップできず 　サポートセンターとやり合う日々（これが一番大変だった）