AI駆動開発した個人アプリが

500スター超えたので知見を共有します

Kota Hayashi

English version

React Native & Flutter Meetup — 2026/04/24

自己紹介

Kota Hayashi

X profile screenshot
React Native & Flutter Meetup — 2026/04/24

作ったもの

CC Pocket

  • Codex や Claude をスマホから操作するためのアプリ
  • ターミナルではなく、ネイティブ体験を目指して開発
  • Flutter 製の個人開発アプリ
  • iOS 版を 2026/03/06 に公開
CC Pocket GitHub repository card
React Native & Flutter Meetup — 2026/04/24

アプリ画面

CC Pocket iPad screenshot CC Pocket iPhone screenshot
React Native & Flutter Meetup — 2026/04/24

数字で見る反応

指標 数字
GitHub Stars 626
App Store レビュー（日本） 21件 / 4.8
Google Play レビュー 10件 / 5.0

  • 公開から2か月くらいでいい滑り出し

  • UI/UX の反応がかなり良かった

  • AIのおかげで 速度と完成度を両立

App Store review screenshot
React Native & Flutter Meetup — 2026/04/24

CC Pocket の構成

スマホ・macOSアプリ
Flutter / クライアント
⇅ WebSocketでやり取り
端末はTailscale などで接続
Bridge サーバー
Mac にセルフホスト / TypeScript
Codex / Claude のセッションを管理
Device token 登録
FCM で通知
Firebase / FCM
TypeScript / 通知用
  • Bridge を Mac 上で起動し、Codex / Claude を制御
  • スマホから Bridge に接続して、AI セッションを操作
  • 通知だけFirebaseを利用
React Native & Flutter Meetup — 2026/04/24

なぜ Flutter で作ったか

  • SwiftUI の macOSアプリ / React Inkの TUIツール など AI 駆動で作ってきた
  • 見た目や SNS での初速は良かった
  • でも UX が詰めきれず、自分でも使わなくなった
  • 品質を出すには、AI 活用だけでなく採用技術への理解が必要
  • 慣れた Flutter をプロダクトの中心に置いた
  • 一方で Bridge など周辺は TypeScript で作った
React Native & Flutter Meetup — 2026/04/24

利用した AI ツール

ツール 主な役割
Claude Code 初期の設計、実装、環境構築
Codex 現在のメイン。設計から実装まで広く担当
Antigravity UI の最終ブラッシュアップ、素材生成
  • 1つに寄せず、役割ごとに使い分けた
React Native & Flutter Meetup — 2026/04/24

メイン開発は Claude Code と Codex

  • 設計から実装、環境構築まで、ほとんど AI を活用
  • 初期は Claude Code を利用
  • 現在は Codex 中心に移行済み
  • モデル性能そのものは、どちらも実用には十分

使ったプランの変遷:

  1. Claude Max $100
  2. Claude Max $100 + Codex Plus $20
  3. Claude Pro $20 + Codex Pro $100
  4. Codex Pro $100
React Native & Flutter Meetup — 2026/04/24

なぜ今は Codex 中心か

  • 一番大きい理由は コスパ
  • 自分の運用では、同価格帯なら Codex のほうが利用量に余裕があった

サードパーティツールへの寛容さに大きな違い

  • Codex：サードパーティでもサブスクのトークンを利用可能
  • Claude：サードパーティでの利用が規約違反になった

サードパーティツール：OpenClawやOpenCode。CC Pocketも含まれる

React Native & Flutter Meetup — 2026/04/24

デザイン担当は Antigravity

  • Gemini 系のマルチモーダルの強さが効いてる印象
  • 生成コードの品質は低い
  • ただし、コードも少し書けるデザイナーだと思うとかなり有能
  • アプリアイコン等の素材生成や、UI の最終調整で特に役立った

CC Pocket の UI/UX が好評だったのは、Antigravity の貢献も大きい

  • ちなみにGoogleだからFlutterと相性がいいとかは無い…
React Native & Flutter Meetup — 2026/04/24

AI 駆動で効いた周辺技術

  • shorebird
    遠隔でも実機確認しやすく、OTA 的な更新が便利
  • marionette mcp
    UI 検証を AI 自身にやらせるために重要
  • BLoC
    自由度が高すぎる状態管理より、AI に扱わせやすかった
  • GitHub Actions
    ワークスペース作成中も API でエラー詳細を拾えて自動化しやすい

以降のスライドで解説

React Native & Flutter Meetup — 2026/04/24

shorebird

  • https://shorebird.dev/
  • Flutter向けのOTA(Over The Air update)ツール
  • ストア審査無しでリリースできる
    • AIの生産性が審査のせいで活かせない事態を防げる
  • macと直接接続できない状態での動作確認にも便利
    • TestFlightに配布するより圧倒的に早い

フレームワークがOTAがサポートしてるかはAI前提だと重要そう

  • 正直Expoのほうがこの分野は体験良さそう
React Native & Flutter Meetup — 2026/04/24

marionette mcp

React Native & Flutter Meetup — 2026/04/24

BLoC

  • Flutterの状態管理だとRiverpodとBLoCが人気
  • Riverpodは自由度が高くAIでのコード生成が安定しない感覚があった
  • BLoCに乗り換えてから状態管理はAI丸投げでも全然バグってない

ルールが厳密な方が生成のストレスが少なくAIと相性がいい印象だが、詳しく語れるほど使い込めてない

React Native & Flutter Meetup — 2026/04/24

GitHub Actions

  • publicリポジトリで開発してるので無料なのが大きい
  • それ以外にも
    • エラーの詳細がcliやapiで取れたりAIから扱いやすいのが偉い
    • CI/CDのツール選ぶうえでGUIからしか見えない情報があるサービスは辞めたほうがいい
React Native & Flutter Meetup — 2026/04/24

まとめ

  • AI 駆動でも採用技術への理解は重要
    • 使い慣れた技術 を軸としつつ、新技術も取り入れるのがいいバランス
  • メイン開発は Claude Code / Codex、デザインは Antigravity の分担がハマった
    • どれか一つ選ぶなら個人向けにはCodexがおすすめ
  • 周辺技術について紹介
    • OTA、フィードバックループなどが重要
React Native & Flutter Meetup — 2026/04/24