はじめに
今回は、Claude Codeを使用してFlutterアプリを開発したので、進め方や所感を記事にします。
開発したアプリはミチシルベというアプリです。
ミチシルベは、夫婦やカップル間のコミュニケーション改善を目的とした、感情記録・アドバイスアプリです。一人でもジャーナルとして使えるようにしてあります。
アプリの詳細
基本コンセプト：
- 夫婦・カップル向けのコミュニケーション改善アプリ
- 日々の気持ちや体調を記録し、AIがパートナーへの接し方をアドバイス
- 個人利用（シングルユーザーモード）にも対応。一人でもジャーナルとして使える
主な機能：
- 記録機能（気分、体調、出来事の記録）
- AI アドバイス機能（記録に基づくパートナーへの接し方提案）
- 履歴閲覧機能（トレンド分析、グラフ表示）
- パートナー連携機能（招待・ペアリング）
- 週間レポート機能（AI による詳細分析）
- プロフィール機能（MBTI、クロノタイプ設定）
- プッシュ通知（記録リマインダー、パートナー通知）
技術スタック
フロントエンド
- 言語: Dart
- フレームワーク: Flutter
- 状態管理: Riverpod
- 画面遷移: GoRouter
- 多言語対応: Slang
バックエンド
- Supabase: BaaS（データベース、認証、エッジ関数）
- PostgreSQL: データベース（Supabase管理）
- Google Generative AI: AI アドバイス生成
その他のサービス
- Firebase: Analytics、Crashlytics、Cloud Messaging（FCM）
- Google AdMob: リワード広告
- Dio: HTTP クライアント
進め方
どのように進めたかを記載していきます
環境構築
Flutter環境構築
まずFlutterの環境構築から始めました。
これは手動で行なっています。
Claude Codeに進めてもらっても良かったのですが、任せると意図しないライブラリを使うケースがあったので、環境構築は手動で行いました。
CLAUDE.mdの作成
/initを実行し、CLAUDE.mdを作成し、アーキテクチャ設計やコーディング規約を追記しました。
細かく書いたのですが、あまり守ってくれませんでした。
書き方のテクニックや、ベストプラクティスは別途調べる必要があるなと思いました。
設計
環境構築後、設計をしていきました。
要件定義
以下のように、Claude Codeに要件定義をお願いすると、適宜質問をしてくれながら要件定義を進めることができます。
xxxをするアプリを開発したいです。要件定義をお願いします。必要に応じて質問してください
不要な機能や、追加する機能があれば以下のように要件定義を更新します。
XXXという機能は必要ないので削除してください
XXXという機能を追加して
また、この段階で使用する技術も明確に記載しておくと良いと思います。
もしかすると、ここでしっかり明記していれば環境構築もClaudeCodeにお願いして問題ないかもしれないです。
各設計
まず必要な設計書一覧を列挙してもらいました。
要件定義を読み込み、必要な設計書一覧を教えてください
出てきたら、不要なものや追加が必要なものを含めて作成してもらいます。
以下の設計書を作成してください
- データベース設計書
- 画面設計書
- xxx
- yyy
- zzz
タスク設計
設計書が作成できたら、タスクを作成してもらいます
要件定義と各設計書を読み込み、このアプリを開発するためのタスクを作成してください。
一つのタスクはシンプルなタスクレベルまで分解してください。
各フェーズごとにファイルを分けてタスクを出力し、進捗状況が分かるように記載してください。
ここまでできれば次は実装に進みます。
実装
ここからは作成したタスクを実行していきます。
xxxのタスクを実行してください。完了したら、タスクのファイルを更新してください。
これを繰り返していくだけです。
所感
7割くらいはいい感じに進めてくれるが、残りの3割は手を動かす必要がある
以下のPodcastで話しているように、7割くらいはサクッと作ってくれますが、残りの3割をClaudeCodeにやってもらおうとすると、エラーが治らなかったり、今まで実装した機能が壊れたりすることが多々ありました。
回避するには、エラー修正の場合、細かい原因や修正方法を指示するや、機能の変更の場合、どのように機能を変更するか細かく指示する必要があります。
しかし、ClaudeCodeが実装した内容を深く理解する必要があるので、新しい技術を使っている箇所などでは苦労しました。
デザインの変更が簡単
温かみのあるデザインにしてや、洗練されたデザインにしてなど、デザインの変更をお願いすると、いい感じに変更してくれました。これも、細部まで指定するのは骨が折れますが、ざっくり全体の雰囲気を変えたいとか、デザインを洗練したものにしたいときとかは、指示するだけで変えてくれます。
コーディング規約通りに実装してくれない
コーディング規約を決めて、CLAUDE.mdに記載しましたが、守ってくれませんでした。
テストコードの実装が思い通りに実装してくれない
TDDで実装を指示するとテストコードも書いてくれるのですが、ほぼテストコードはエラーで動きませんでした。サンプルを書いて、こんな感じで実装してとお願いすれば、マシになるかもしれないです。
# おわりに
使い方のTipsや情報を集めて、いい感じの使い方ができるようにしたいです。
クラスメソッド株式会社が、Claude Codeの活用を体系化・効率化するフレームワーク「Tsumiki(積み木)」というものを公開してくれているので、今後使ってみたいと思います。
また、AIのコーディングについて情報を発信している方の最新の動画も学べそうなのでみてみたいと思います。