バイブコーディングで
ネイティブアプリを
初めて作った話

ネイティブアプリ
作ったことありませんでした

1週間ちょっとで
動くものができた

1か月くらいで
ストアに載せられた

初登壇（LT）なのでお手柔らかに🙏

デモ

自己紹介

Ttsubasa

ソフトウェアエンジニア@GAOGAO
TypeScript（バックエンド/フロントエンド）
ベトナム（ホーチミン）に2年住んでました
英語勉強しています（TOEIC: 925）
Claude Code

伝えたいこと

アプリ作るのは楽しい
バイブですぐ目に見える形にできる

※ グロースは抜き

話せないこと

実際の業務で使うために...

Devin との比較...

アジェンダ

何を作ったか

どうやって作ったか

バイブでの私的ポイント

IELTS Diary

英語日記支援アプリ

謝罪

IELTS 勉強のアプリを作りましたが

※ IELTSは英語の資格試験です

謝罪

IELTS 受けたことありません
8/22に初めて受けます

なぜ作った？

英語日記を書く勉強方法が効果的らしい

ChatGPTで添削しているが記録が管理できない

日記を書きながら勉強できるアプリが欲しい

アプリの機能

📝 日記添削機能

📚 IELTS練習機能

🔥 Streak機能

💡 表現管理機能

デモ

技術

Flutter - モバイルアプリ
Cloud Functions - バックエンド
OpenAI API - AI添削

データベースはこちらで持たない
認証もない
→ 個人情報観点でのリスクが少ないアプリ

開発時間

フルタイムで働いているので、業務後の夜
休みの日（お出かけしない日）

開発タイムライン

Android

4/25〜5/9 - 開発（約2週間）

5/9 - クローズドテスト申請

6/5 - オープンテスト版リリース

リリースした時のSlack

リリースした時のSlack

開発タイムライン

iOS

6/19 - リリース

リリースした時のSlack

つまり...

動くものは

1週間とちょっとでできた

つまり...

ストアへ公開は

1か月とちょっとでできた

開発の分担

1stリリースまで

環境構築：自分
相談役：o3
開発：Cursor
レビュー：雰囲気
デプロイ：自分

開発の分担

最近

相談役：Claude Code (Opus 4)
開発：Claude Code (Opus 4 / Sonnet 4)
レビュー：Claude Code Actions
デプロイ：自分

注意するポイント

いくつか進める中で注意点や
ポイントがあった

ポイント①

全体設計は頭のリソースを割いてレビューする

全体設計

Cursor (Sonnet 4) の最初の方針
直接 flutter から OpenAI API を叩く実装をしていた
flutter → OpenAI API

全体設計

Flutter に OpenAI の API Key を
直接埋め込もうとした

これヤバくない？

全体設計

「これいいの？」「これやばくない？」
の検知は人間の仕事

別のAIにレビューさせるでもいいですが、
闇雲に信頼するのは良くない

全体設計（o3に相談した）

API Keyはバックエンドで管理

Cloud Functions経由で呼び出し

App Checkでセキュリティ強化

→ AIは実装だけでなく設計の相談相手

ポイント②

CLAUDE.mdを日々、更新

何かClaudeが間違いを起こしたら、原因と再発防止策を検討させる
CLAUDE.md に端的に追記させる

不要なルールは削除

CLAUDE.md

作業の進め方の定義

CLAUDE.md

ルールの明確化

ポイント③

破壊的操作をさせない

settings.json

Claude Code の行動を制限

https://x.com/commte/status/1936313902645887036

ポイント④

静的解析ツール

品質管理

厳格な静的解析で開発効率を向上

flutter_lints
dart_code_linter
Dart Code Metrics
husky

品質管理

厳格な静的解析で開発効率を向上

# .husky/pre-commit

dart format .
dart fix --apply
dcm check-unused-files lib
flutter test
flutter analyze --fatal-infos --fatal-warnings

ポイント⑤

Commit メッセージを Claude に作成させる

How I Use Claude Code 参考にした

#.zshrc

alias gcmauto="git commit -m \"\$(claude -p \"Look at the staged git changes and
create a summarizing git commit title. Only respond with the title and no affirmation.\")\""

ポイント⑥

Claude Code GitHub Actions

https://docs.anthropic.com/ja/docs/claude-code/github-actions

非同期で動くAIアシスタント

デバッグログのリファクタ

バグの調査

スマホでIssue立てて

メンションしたら

自動で調査

Issueをスマホで立ててメンション

電車でいじっていたらバグがあったのでGitHubにIssueを立ててメンション

Branchができて作業が完了していた

※ PR は自分で立てた

仕事 / 移動中でも

裏で動いてくれる

ポイント⑦

Explore, plan, code, commit

Claude Code: Best practices for agentic coding

① 関連ファイルを読ませる
② 計画を立てさせる（TODOに分割する）
③ TODOを進めさせる
④ Commitする

私の進め方 ①

まずは関連ファイルを読ませる
私が指定するというよりは探させている

私の進め方 ②

やりたいこと（直したいこと）を説明し方針を調査

私の進め方 ③

いい感じなのでTODOドキュメントにする
何ができて何ができてないのか把握するため

私の進め方 ④

TODOを進めさせる
見積もり時間は謎w めちゃバッファ持ってくるw

私の進め方⑤

若干きもいがいい感じ..!
気に入らなければ再度作らせればいい

まとめ

「何か欲しい！」と思ったら

作れる時代

ただし...

セキュリティは必ず検討
設計には人間の判断が必要
品質管理は必須

ご清聴ありがとうございました！

バイブコーディングしていて全然IELTS勉強してないw

参考資料

Claude Code: Best practices for agentic coding

Claude Code に壊されないための denyルール完全ガイド

Claude Code どこまでも

How I Use Claude Code