🚀

子育てしながら2ヶ月でリリース！AIフル活用の個人開発記録😅

に公開
React Native
個人開発
Cursor
Gemini
rork
idea

あらすじ

アプリを作りたい欲はあったけど、子育てしながら夜の数時間の積み重ねでリリースまで持っていくのはなかなか難しく感じていました...
しかし各種生成AIの発展によって、2ヶ月弱でリリースまでこぎつけることができました。この記事ではそのプロセス、利用技術、うまくいった/いかなかったことなどをまとめます💪

リリースしたアプリ「できた！」について

概要

ざっくり言うと、子どもの初めてできたあらゆることを簡単に記録しておけるアプリです。初めての「はいはい」「おすわり」「『パパ・ママ』」「お着替え」...いつできたか覚えておきたいけど忘れちゃって悲しくなることが多々あったので、メモしておけるように自分で作りました。

今はAndroid版のみ提供しています🙇

技術

基本構成

  • React Native + Expo: RNは初めて使いました。なぜ使うことになったかは後ほど。
  • TypeScript: 型。
  • SQLite: 慣れているSQLで永続化。今回はオフラインで完結。

アーキテクチャの特徴

  • 認証なし: ユーザー登録・ログイン不要
  • ネットワーク接続なし: 完全にオフライン動作、データはSQLiteへ
  • シンプル設計: 「できた！」を簡単に残せる！これが一番！

ご覧の通り、めちゃくちゃシンプルな作りです。とりあえず今回はリリース自体を目標にしました。走り切るって大事。自分でも使いたいのでリリースせねば話にならん。クラウド使うとできることは増えるけど、メンテナンス大変だもんね。

リリースまでの道のり

サマリ。

期間 作業内容
Week 1 仕様策定・骨格づくり
Week 2~5 実装
Week 6~7 ストア準備
Week 8 リリース

Week 1前半: 仕様策定

まずはCursorを使って仕様書を書きました。機能概要、画面構成、遷移フロー、テーブル設計、デザイン方針などをまとめました。また、試しに画面イメージ書いて！とお願いしたら記号を使って頑張って書いてくれて、非常に手軽に実装イメージを持てたので非常に良かったです。

## 1. カテゴリ別チェックリスト画面

+---------------------------------------+
|  できた！   運動カテゴリ  「できた」を追加  |
+---------------------------------------+
|                                       |
|  👶 たろう（3歳） ▼                    |
|                                       |
+---------------------------------------+
|                                       |
|  [ ] 首が座った                       |
|                                       |
|  [✓] 寝返りができた   2023/04/12 ✓    |
|                                       |
|  [✓] はいはいができた  2023/08/25 ✓   |
|                                       |
|  [ ] つかまり立ちができた              |
|                                       |
|  [ ] 一人で立てるようになった           |
|                                       |
|  [ ] 一人で歩けるようになった           |
|                                       |
+---------------------------------------+
|  📋    📅    👤  |
|  リスト  タイムライン  設定  |
+---------------------------------------+

↑　こんな感じ。AIにどっぷりだと右辺がガタガタなのもなんだか可愛く思えてくる。

Week 1後半: 骨格となるコードを生成

仕様書ができたら、今度は Rork というサービスでアプリの骨格を作ってもらいました。プロンプト一発でこのクオリティ。すごくない？（主にデザイン面）

できた！一覧 タイムライン 設定 子ども登録

実は、そもそも今回アプリを作ろうと決意したのはこのRorkが作るアプリのクオリティに感動したからなのです。アプリ制作前に同僚が「rork、かなりすごい」と言っていて、試してみたら本当にすごく、デザインスキルの無い自分にとっては救世主でした。

React Nativeは初めてでしたが、ReactとFlutterの知識を混ぜ混ぜすればいけました。というよりRorkありきだったのでやるしかなかったのです。RNもExpoもEASも本当にすごいや。

Week 2~5: 実装フェーズ

Rorkで生成したソースをそのままローカルに持ってきて、そこからはCursorを使い改善をおこなっていきました。

最初のRorkに渡したプロンプトにアーキテクチャ関連の情報が不足していたり、コーディング規約などについて全く書いていなかったので、それはそれは読みづらいソースでした😅
UIまわりはそこまで複雑で無いので見た目は早めに整えられたものの、内部のロジックはかなりしんどかったです。
データの永続化も、SQLiteでデータ管理をしたかったのにZustandで全部済ませていたり。データモデリングも思っていた通りになっていなかったりでAIの書いたソースの理解にかなり消耗しました。やはり最初のプロンプトは大事すぎる。

全体の流れとしては、とっつきやすいデザインまわりから始めました。UI/UX改善、データモデリング修正、データ永続化・状態管理あたりの改善、そもそも間違っている仕様の修正、フォームのバリデーションなどを順に進めました。

このときは毎日夜中に2~3時間程度、Cursor Agentと一緒に作業していたと思います。履歴を見るとだいたい毎日10~30コミットくらいしていました。すごいペースだ。

Week 6~7: ストア準備

結局開発自体はAIのおかげもありなんとかいけました。が、大変なのはここから。アイコン、ストア用のスクショ、各種ストアの設定あたりがしんどすぎる。まぁアイコンはまだAI(Gemini, Imagen3)で作れるけど、ストア用画像は結局エミュレータで撮ったスクショをCanvaで編集してちまちま作りました。AIに慣れると手作業がひどく怠く感じる。

かなりペースが落ちましたが、これだけAIが発達して機能も絞っているのにこの状況でリリースまでこぎつけられなかったら一生できないぞと自分に圧をかけることでなんとか乗り切れました😅

Week 8: リリース

そして審査に提出。特に複雑な機能もないのでスッと通りリリースを迎えることができました🎉

ちなみにビルドは EAS(Expo Application Service)を使ってクラウド上で行っています。keyの管理なども任せられるので非常に楽でした。無料プランだとqueueに入ってからビルド開始までびっくりするほど待たされますが、寝る前にbuild開始して翌朝の楽しみに取っておけば問題なし。ビルドが待ち遠しくて朝もスッキリ🌟 今でも無料プランで間に合っています。

なにはともあれリリースという目標を達成できて良かった！！

ひとりKPT

Keep

  • とにかくリリース出来てよかった！機能を絞ったのが正解だったと思う。
  • 設計書をCursorで壁打ちしながら書くの良かった。今後もAIと書こう。Kiroも使いたいな。
  • Rork良すぎた！V0とかGalileo AIも使ってみたけど、よくあるモバイルアプリの見た目を作るにはRorkがぶっちぎりでした。Cursorに直接作らせてみたりもしたけど目も当てられない結果になりました。Rork君センス良すぎ。
  • Cursor Settingsには絵文字（特に😅）をたくさん使ってフランクに話すよう設定してます。AIと険悪になることもなく毎日楽しく開発できた。間違いを強めに指摘しても「すいません😅😅😅　修正しますね😅」とか言ってくる。鋼のメンタル。
  • Cursorで毎日数十コミットできたのは良いペースだった。最近はClaudeCodeに慣れているから今やったら少しやり方変わるかな？
  • EAS最高！ビルド&デプロイ楽すぎ！
  • ストアの説明文作成にもAIが活用できて、30分かからず納得いくものができた。

Problem

  • 一発目にRorkへ渡すプロンプトをもっと工夫すべきだった。ある程度それっぽい仕様書を作ったが、コーディング規約まわりが弱すぎた。
    • 特にデータの扱いが、SWRなど使わずStoreパターンのようなもので、DBとメモリ上で二重管理している作りで、相当リファクタが面倒だった
  • iOSのみ起きる問題を最終盤で見つけた。具体的には二重ダイアログは許されないという仕様に、終盤にiOSでも動かしてみよ〜と思ってやってみて初めて気づいた。結果としてまだiOS版はリリースしていないけど、もうちょっと頻度あげたら良かったなぁと反省。
  • ストアのスクショ準備が怠すぎた。かつ品質も素人感まるだし。もっと楽にプロっぽい雰囲気にできないものか。
  • リリース後にちょこちょこテストを書いていっているが、コンポーネントテストまわりはうまくできていない。AIもずっと頭を抱えていて、この辺はネイティブ絡んでくるし結構難しそう。
    • ちなみにMaestroでe2eも動かしてみたら、こちらはうまく動いたがびっくりするほどモッサリしていた。PCのスペックの問題なのか？普通はサクサク動くのかな。

Try

  • 次は一発目のプロンプトを渡すときに、絶対にアーキテクチャやコーディング規約まわりも入れる。あとは、「データ永続化まわりは全くやらないで、UIだけ作って」みたいな指示もありかもしれない。色々走り出しやすそうなものができるまで一発目のクオリティにはこだわりたい。その後の速度を大きく左右する。
    • そもそもRorkに頼らない方法も全然ありえそうで、Rorkはデザインとコードを一度に生成するけど、次作るときはまた良さそうなデザインツールもあるだろうし、そうなると作ったデザインを今度はRNか？Flutterか？みたいな悩みもでてきそう。コンポーネントテストではつまったけど、Expo Goの体験が良すぎたのでまたRN使うかも？
    • Flutterを使うならしっかりとテストを書いて楽にアップデートできるようにしたいな
  • ストアのスクショは画像生成AIを使ってそれっぽい背景をつけたりするなどもっと工夫したい。
  • どこまで使われるか分からないし、シンプルな作りでまずはAndroid版だけで出す、というのは今後も継続したい。

活用したAI一覧

どのシーンでどんなツール（モデル）を使ったかの記録。2025年4~6月頃の話なのでもうあまり参考にならないかもですが一応。

設計

仕様書（.mdファイル）の作成

  • ツール：Cursor
  • モデル：claude-3.7-sonnet

実装（骨格）

実装の骨格となる最初のコードの生成

  • ツール：Rork
  • モデル：？

実装

Rorkが生成したコードを元にした実装作業

  • ツール：Cursor
  • モデル：claude-3.7-sonnet

アイコン

アプリアイコンの生成

  • ツール：Gemini
  • モデル：Imagen3

ストア説明文

  • ツール：Cursor
  • モデル：claude-3.7-sonnet

ほぼCursorやね😅

まとめ

簡単な仕様であれば、慣れていない技術であってもAIを活用することで短期間でリリースすることができた。次やるとしたら一発目のプロンプトにこだわってさらに高速化していきたい。

質問・感想あればコメントください〜👍️

Discussion