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

by オカムラ

Slide 1

Slide 1 text

Vibe Coding Catfe 1ヶ月間バイブコーディングでネイティブアプリを開発して分かったベストプラクティス株式会社MAKE A CHANGE / 岡村匡洋

Slide 2

Slide 2 text

・自己紹介・今回開発したアプリ・今回わかったベストプラクティス（はじめに結論）・使ったAI駆動開発ツール・バイブコーディングの進め方・今回わかったベストプラクティス・反省点・伝えたい5つの核心メッセージ・おまけアジェンダ

Slide 3

Slide 3 text

自己紹介岡村匡洋・株式会社 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)アカウント

Slide 4

Slide 4 text

今回開発したアプリ本日RevenueCatさん主催のイベントということで RevenueCatを組み込んだネイティブアプリ（まずはiOS）のバイブコーディングにチャレンジしました！ 💪

Slide 5

Slide 5 text

今回開発したアプリ作ったアプリはこちら

Slide 6

Slide 6 text

今回開発したアプリ LLM：OpenAI GPT | 文字起こし：Whisper | 課金プラットフォーム：RevenueCat

Slide 7

Slide 7 text

今回開発したアプリ https://apps.apple.com/jp/app/synapse-talk-ai/id6748533673 1h前に公開されました 🎉🎉🎉🎉

Slide 8

Slide 8 text

今回開発したアプリでも、議事録アプリなんて世の中にたくさんあるよね？

Slide 9

Slide 9 text

今回開発したアプリでも、議事録アプリなんて世の中にたくさんあるよね？ 👉はい、それはそう。でも・・・

Slide 10

Slide 10 text

Bot系 (TL;DV等) AIアシスタント系 (Notion AI, ChatGPT等) Synapse Talk リアルタイム・インサイト ❌ 不可 ❌ 不可 (録音停止後) ✅ 可能プラットフォーム依存依存 (Zoom, MS Meet等) 非依存非依存対面利用 ❌ 不可 ✅ 可能 ✅ 可能今回開発したアプリ「リアルタイム」にインサイトを生成してくれるアプリはない（だから作った）

Slide 11

Slide 11 text

今回開発したアプリ「リアルタイム」にインサイト生成・主要な議題・重要ポイント・決定事項・ネクストアクションなど

Slide 12

Slide 12 text

今回開発したアプリ実演します

Slide 13

Slide 13 text

今回わかったベストプラクティス今回わかったベストプラクティス最初に結論

Slide 14

Slide 14 text

今回わかったベストプラクティス 1. AIが作った実装計画書をよく読むこと（ホント重要） 2.バグがなかなか解決しない時は、解決に役立つ情報をAIに与える 3.詰まったら別のAIツールを使う 4.直接コードをみる

Slide 15

Slide 15 text

今回わかったベストプラクティスどういうことか順を追って説明します

Slide 16

Slide 16 text

使ったAI駆動開発ツール使ったAI駆動開発ツール

Slide 17

Slide 17 text

使ったAI駆動開発ツールバイブコーディングに使ったツールは以下の通り Claude Code （メイン） Gemini CLI Cursor

Slide 18

Slide 18 text

バイブコーディングの進め方バイブコーディングの進め方

Slide 19

Slide 19 text

バイブコーディングの進め方全体を作ってから細部を詰めていくここで一旦、全ページ開発アプリの全体像を作る大枠の開発細かい修正動作が想定と異なる部分を修正していく

Slide 20

Slide 20 text

バイブコーディングの進め方全体を作ってから細部を詰めていく大枠の開発細かい修正 10% 90% ここで一旦、全ページ開発アプリの全体像を作る動作が想定と異なる部分を修正していく

Slide 21

Slide 21 text

バイブコーディングの進め方全体を作ってから細部を詰めていく大枠の開発細かい修正 10% 90% 一気にアプリができるので楽しいロジックが複雑になり簡単にはいかない

Slide 22

Slide 22 text

バイブコーディングのモチベーション遷移図大枠の開発細かい修正

Slide 23

Slide 23 text

開発の進め方 - 大枠の開発大枠の開発 ①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と協業して進めて

Slide 24

Slide 24 text

開発の進め方 - 細かい修正ここでCustom slash commandを利用しました。 ①Claude Codeに計画を立てさせる。計画書を.mdファイルで生成させる ②Claude Codeに実行させる。（基本的にGeminiと協業させて実行させる） ultrathink: 以下の修正について docs/dev/improve 内に1ファイルで修正計画を立ててください。ファイル名の先頭に日付時間（YYYYmmDDHHMM）を含めてください。GEMINIと協業して。実装はしないでいいです。 #$ARGUMENTS 細かい修正 ultrathink: $1 を参照に $2 を完了してください。完了したら TODO にチェックを入れ、次の手順を実行せず一旦停止。 GEMINIと協業して進めて適宜、デバッグログを吐き出すようにしてログを確認しつつ挙動の確認テストを行いエラーが解決するまで修正を繰り返して完了させて。

Slide 25

Slide 25 text

開発の進め方 - 細かい修正大枠の実装がもれた部分を実装していく。（47ファイルの修正計画 .mdがあった）・RevenueCatの実装・AIクレジットの付与と消費ロジック・DEVとPRODの環境分けなどなど

Slide 26

Slide 26 text

今回開発したアプリ実演します → チェックします

Slide 27

Slide 27 text

今回わかったベストプラクティス今回わかったベストプラクティス

Slide 28

Slide 28 text

今回わかったベストプラクティス 1. AIが作った実装計画書をよく読むこと（ホント重要） 2.バグの解決に役立つ情報をAIに与える 3.詰まったら別のAIツールを使う 4.直接コードをみる

Slide 29

Slide 29 text

バイブコーディングのポイント - AIが作った計画書をよく読むこと（ホント重要）・面倒だがこれを怠ると、あとでもっと面倒なことになる。・全然違う方向性で進んでしまうことがある。・計画書の内容でわからなければ分かるまでClaude Codeに質問しよう。 DBのセキュリティルールを修正してほしかったのに DBのスキーマを変えようとする、など。。

Slide 30

Slide 30 text

バイブコーディングのポイント - バグの解決に役立つ情報をLLMに与えるエラー内容でググって解決した例などのQiitaやStack Overflow のURLを読み込ませる　READ https://stackoverflow.com/questions 　この情報を元にエラーを解決して

Slide 31

Slide 31 text

バイブコーディングのポイント - 詰まったら別のAIツールを使う今回、Claude Codeをメインにつかっていましたがどうしても無限ループで発生するエラーが解消できなかった。 → Cursorを使ったら解決できた。　原因特定のため、一時的にコメントアウトしてテストする手法を　繰り返して解決 🎉

Slide 32

Slide 32 text

バイブコーディングのポイント - 詰まったら別のAIツールを使う巷を騒がせているClaude Codeのナーフ（弱体化）問題　　→ 対応するため、他ツールも使えるようにしておくことが重要

Slide 33

Slide 33 text

バイブコーディングのポイント - 直接コードをみる以下のようなプロンプトでチェックするコードのあたりをつける PoCや自分用のツールであれば良いが、本番リリースするアプリであればコードチェックは必須に感じる。

Slide 34

Slide 34 text

反省点反省点

Slide 35

Slide 35 text

反省点 1. VIBES（バイブス）で進めすぎた。　特に前半は「コードは一回も見ないでやるのがバイブコーディング！」　とのモチベーションで臨んだ。　しかし、適度にコードは見ないと逆に大変なことになると痛感。　今後、スパゲッティコードにならないようにコードは見ながらガードレール　をCLAUDE.mdに定義できないか模索する。（Don't Repeat Yourselfの法則など）

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

伝えたい5つの核心メッセージ伝えたい5つの核心メッセージ

Slide 39

Slide 39 text

伝えたい5つの核心メッセージ 1.今回の開発効率は体感5〜6倍上がった。 2.本番リリースが前提のアプリ開発にはまだまだエンジニアの知識が必須 3. AIが作った計画書は面倒でも隅々まで読み込む。　わからない点はクリアになるまで問いただす。 4. 複数のAIツールを常に稼働できる状態にしておく。詰まった時の冗長性を担保 5. ネイティブアプリで課金するならRevenueCatは便利そう　（プラットフォームをまたいで統合管理、課金PaywallのABテストなどできる。）ただこれは個人開発だったから。大人数の開発ではまた違う結果になると思う Claude Code, Gemini CLI, Cursor, Windsurfなど

Slide 40

Slide 40 text

おまけ Claude Codeにアプリロゴつくらせたら全然ダメでした前衛的すぎる・・・

Slide 41

Slide 41 text

アプリぜひインストールお願いしますみんなでバイブコーディングを楽しみましょう！ Thank you so much,End of File オカムラ X(Twitter)アカウント Synapse Talk AI

Slide 42

Slide 42 text

Appendix Appendix

Slide 43

Slide 43 text

AIツールと設定 Claude Codeのおすすめ設定

Slide 44

Slide 44 text

Claude Codeの設定 1.Custom Slash Command 2.Git worktree 3.CLAUDE.md （CCの機能ではないが）

Slide 45

Slide 45 text

Claude Codeの設定 - Custom Slash Command /plan /execute /security-review 以下3つのカスタムスラッシュコマンドを作成実装前の計画を立てる計画を実行するセキュリティに問題がないか確認

Slide 46

Slide 46 text

Claude Codeの設定 - Git worktree 並列開発したかったのでGit worktreeを利用 Anthropicの公式でも「一般的なワークフロー」として紹介されている https://docs.anthropic.com/ja/docs/claude-code/common-workflows

Slide 47

Slide 47 text

### プロンプトのログユーザーが実行したプロンプト、実行内容、結果を全て 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との協業

Slide 48

Slide 48 text

開発中の雑感開発中の雑感

Slide 49

Slide 49 text

開発中の雑感 1. Claude Codeを常に稼働させておきたく、本業の合間に指示出し。　寝る前に大きめのタスクを振ってから寝る日々。　　　 →「Claude Codeはソシャゲ」

Slide 50

Slide 50 text

開発中の雑感 1. Claude Codeを常に稼働させておきたく、本業の合間に指示出し。　寝る前に大きめのタスクを振ってから寝る日々。　　　 →「Claude Codeはソシャゲ」 2.Flutter経験ゼロでここまで開発できるのすごい・・・とテンション上がる

Slide 51

Slide 51 text

開発中の雑感 1. Claude Codeを常に稼働させておきたく、本業の合間に指示出し。　寝る前に大きめのタスクを振ってから寝る日々。　　　 →「Claude Codeはソシャゲ」 2.Flutter経験ゼロでここまで開発できるのすごい・・・とテンション上がる 3.はじめ正直、RevenueCatを導入する意味があまりわからなかった。　しかし実際に触ってみて複数プラットフォームのユーザーと課金状況を　一元的に管理できるメリットに気がつく。