🍵 バイブコーディングでIELTS学習者向け、英語日記添削アプリ開発した話
はじめに
初めまして。Web開発は経験があるものの、ネイティブアプリ開発は全くの未経験だった私が、AIの力を借りて「IELTS Diary」というアプリを開発した体験談をお話しします。
Android
https://play.google.com/store/apps/details?id=com.ttsubasa.ielts_diary
この記事は誰向けか
- ネイティブアプリ開発に興味があるが未経験の方
- AIを活用した開発手法について知りたい方
- 実際の開発プロセスの生々しい体験談を聞きたい方
結論から言うと、開発の95%はAIが書いてくれました。残りの5%は私がビルドやAppStore・PlayStoreへの申請周りを担当したのですが、それさえもClaudeに聞きながら進めたので、実質的にはほぼ全てAIの力によるものだと思います。
💡 開発概要
🎯 作成したアプリ
IELTS Diary - IELTS学習者向けの日記アプリ
🛠️ 使用技術
- フレームワーク: Flutter
- バックエンド: Firebase
- AI機能: OpenAI
- 開発ツール: Cursor → Claude Code（メイン）
Flutter未経験、Firebase未経験、ネイティブアプリ開発未経験の三重苦でしたが、AIの力を借りることで最後まで開発を完走することができました。
🔄 開発フローの変化
最初はCursorを使っていましたが、Claude Codeが使えるようになってからはほぼClaude Codeに移行しました。やはり会話の継続性と文脈の理解力が段違いで、より自然な開発体験を得られたと思います。
Cursor はただ課金している高いメモ帳となりました...w
📚 苦労したポイント
♾️ 無限ループの罠
最も困ったのが、たまにAIがループにハマってしまうことでした。
修正した → バグが発生 → 修正した → また同じバグ → 修正した → ...
この状況に陥ると、AIが同じような修正を繰り返すだけで一向に解決しません。最初は「なぜAIがこんなことに？」と戸惑いましたが、大抵の場合は私の指示が曖昧だったり不十分だったりすることが原因でした。
解決方法: /clearでコンテキストをクリアして、より具体的で明確な指示を与え直すことで解決できました。
AIが同じミスを繰り返し始めたら、無理に続けるよりもコンテキストをリセットして仕切り直すのが効果的です。
🛠️ 工夫したポイント
📝 Claude.mdファイルの活用
プロジェクトルートにCLAUDE.mdファイルを作成し、AIに以下の情報を共有しました：
- プロジェクト概要
- 使用技術スタック
- コーディング規約
- よく使うコマンド
- 過去に解決した問題と解決策
このファイルは他の開発者の方が公開されているものを参考にしながら作成しました。実は、最初の頃にAIがデプロイコマンドを勝手に実行してしまったり、CLAUDE.mdファイルに勝手に書き込みを入れられたりして困ったことがありました。そこで、デプロイメント確認やCLAUDE.md更新時の確認ルールなど、実際の開発で必要になる細かいルールまで含めることで、AIとの協業をより安全かつ効率的に進められるようになりました。
これにより、毎回同じ説明をしなくて済むようになり、開発効率が大幅に向上しました。
## ⚠️ 操作確認ルール
### デプロイメント確認
- `firebase deploy` や `npm run deploy` などのデプロイコマンドを実行する前に、**必ずユーザーに確認しYESの回答を得た時のみ実行する**
- デプロイは本番環境に影響を与える可能性があるため、ユーザーの明示的な許可が必要
### CLAUDE.md更新確認
- CLAUDE.mdに更新を加える際には、**必ずユーザーに確認しYESの回答を得た時のみ実行する**
- このファイルはプロジェクトの重要なルール定義のため、慎重な管理が必要
## ⚠️ 作業管理システム
**必ず `.claude/` ディレクトリシステムを使用すること**
- チェックリストで全タスクを管理
- 調査結果・計画は専用ディレクトリに保存
- 完了作業は適切にアーカイブ
詳細: `.claude/README.md`
🔍 はじめに調査させる手法
新しい機能を実装する前に、必ずAIに調査してもらうようにしました。
例：GoogleAdMobの実装をしたい場合
- まずはベストプラクティスを公式ドキュメントもしくは記事から探してください
- 実装の設計をmdファイルに保存してください
- 実装をレビューしてください
- 実装してください
この手順により、より確実で保守性の高いコードを書いてもらえるようになりました。
🧪 テスト駆動開発の導入
AIにテスト駆動で開発してもらうようにしました：
- まずテストを書いてもらう
- レッド状態にする
- 実装してグリーンにする
この手法により、バグの混入を大幅に減らすことができました。
🔧 静的解析の活用
flutter analyzeやdart formatを定期的に実行させることで、コードの品質を維持しました。AIは指示されれば確実にこれらのツールを実行してくれるので、人間よりも確実にコード品質をチェックしてくれます。
💬 コードコメントを多めに
AIにはコードコメントを多めに書いてもらうようにしました。将来的に私がコードを読み返すときや、他の開発者がコードを理解するときの助けになると考えました。
📋 Plan Modeの活用
Claude CodeのPlan Modeを使って、実装前に全体的な設計を整理してもらいました。これにより、実装の方向性が明確になり、後戻りが減りました。
🚀 今後の展望
🔗 MCPの活用
Claude MCPを使って外部サービスとの連携を行いました。特に活用したのがSentry MCPです。
アプリでエラーが発生した際に、Sentry MCPを通じてClaudeに直近のエラーログを調査してもらい、原因特定と対応策の提案をしてもらうことができました。これにより、エラーの原因究明にかかる時間を大幅に短縮することができました。
🔗 Claude MCPでの並列処理
まだ実験段階ですが、Claude MCPを使って複数のタスクを並列で処理させることを試しています。5人くらいで分担して作業させようと思ったのですが、まだうまくコントロールできていません。この辺りは引き続き研究していきたいと思います。
📱 継続的な改善
アプリは無事にリリースできましたが、ユーザーからのフィードバックを元にした改善も全てAIの力を借りながら進めています。バグ修正から新機能の追加まで、AIとのペアプログラミングは続いています。
💭 気づき
この開発を通じて、巷でもよく言われていることですが、私は以下のことに当てはまることを実感しました
🎨 ものづくりの快感
コードを書くことではなく、ものを作ること自体に快感を覚えるということです。
以前はプログラミングそのものが楽しいと思っていましたが、今回の開発で気づいたのは、実際にはコードを書く作業よりも「アイデアが形になっていく過程」や「ユーザーに使って喜んでもらえるものができあがること」に本当の喜びを感じるということでした。
AIがコードを書いてくれることによって、私は純粋に「何を作るか」「どう作るか」に集中できるようになり、より創造的な部分に時間を使えるようになったと思います。
🤝 コミュニティの重要性
また、GAOGAOではclubメンバーを募集しており、日々AIについて会話しています。このような同じ志を持つ人たちとの交流が、開発のモチベーション維持や新しいアイデアの発見に大きく貢献していると感じています。
一人で開発していると煮詰まることも多いですが、コミュニティの存在があることで継続的に学習・改善していけるのだと思います。
⭐ まとめ
ネイティブアプリ未経験の私でも、AIの力を借りることでアプリをリリースすることができました。重要だったのは以下のポイントです：
- AIに丸投げするのではなく、適切に指示する
- 開発プロセスに工夫を凝らす（調査→設計→実装→テスト）
- コンテキストをうまく管理する（CLAUDE.mdファイルやPlan Mode）
- 困ったときは躊躇なくリセットする
まだまだ未熟な部分も多く、完全に理解するにはさらなる学習が必要だと感じていますが、AIとのペアプログラミングという新しい開発スタイルの可能性を強く感じることができました。
今後もこの手法を使って、より多くのアプリを開発していきたいと思います。同じようにネイティブアプリ開発に興味がある方の参考になれば幸いです。
最後に開発したアプリを再度シェアさせていただきます！
Android
https://play.google.com/store/apps/details?id=com.ttsubasa.ielts_diary