Claude Codeで実装がどこまで出来るか試してみる
こんにちは。リテールアプリ共創部マッハチームのotasです。
クラスメソッドではAIを使うことを推奨しており、開発でも活発に利用されています。
私はというと、使っていますが使いこなせてないと日々思っております。
そこで自身の慣れるためと、どこまで効率化できるかを試してみたいと思います。
今回作るものは、FlutterアプリでTODOアプリを作ります。（作ってもらいます）
今回出来たものは以下になります。
今回はあくまでもAIへの慣れと検証のためなのでAIで生成されたものを
ほぼそのまま利用しますが、実際には人が内容を確認し理解する必要があります。
マッハチームのメンバーで開発速度向上に関する知見を共有するブログの連載を始めました。
メンバーによる過去投稿も是非読んでください！
Flutterのベースを作る
早速、FlutterのベースをClaude Codeにお願いして作ってもらいます。
適当なフォルダ（ai_todo_app）を作成し、Claude Codeに以下のようなプロンプトでお願いします。
Flutterのアプリベースを作ってください\
- レイヤードアーキテクチャ + MVVM
- 状態管理はriverpod generatorを利用\
- 画面遷移はgo_routerを利用
プロンプトを入力すると、一生懸命動いてくれるので完了を待ちます。
完了したので、エミュレータで実行すると以下の画面が表示されました。
TODOを表現するモデルを作る
Flutterアプリのベースが出来たので、次にTODOを表現するモデルを作ります。
まずはTODOとして必要な項目を考えます。
- TODOモデル
- id(識別子)：UUID
- タイトル：string
- タスク一覧：Array[Task]
- 作成日：Date
- 更新日：Date
- 完了日：Date
- Taskモデル
- id(識別子)：UUID
- タイトル：string
- 完了フラク：boolean
必要な項目がある程度出来たので、Claude Codeにお願いします。
TODOを管理するためのドメインを以下の項目で作成してください
- TODOモデル
- id(識別子)：UUID
- タイトル：string
- タスク一覧：Array[Task]
- 作成日：Date
- 更新日：Date
- 完了日：Date
- Taskモデル
- id(識別子)：UUID
- タイトル：string
- 完了フラク：boolean
しばらく待つと完了したので、エミュレータで実行してみます。
特に変わりはないですが、実装自体はされています。
TODO一覧画面を作る
TODO一覧画面を作ってください。機能は以下
- TODOをリスト表示
- タイトル、タスクを表示
- 進捗率を表示
- 更新日を表示
- 並び順は作成が新しいもの順
- 完了しているTODOの場合は完了日を表示して、リストの末尾に表示
- TODOの取得はrepository経由で、sharedpreferenceから取得
- あとでAPI経由に変更できるような構成
- TODOの追加ボタンはヘッダーに右側に配置
プロンプトの実行が完了したので、エミュレータで実行してみます。
エラーが発生しちゃいました。
こちらもClaude Codeで修正してみます。
SharedPreferences not initialized のexceptionが発生しています
再度、エミュレータで実行します。
TODO一覧と削除が出来るようになりました。
TODO作成画面を作る
これまでだとTODOにタスクを追加できないので、TODO作成画面を作ります。
TODOの作成画面を作ってください
- タイトルを入力できる
- タスクを追加できる
- タスクは動的に5つまで追加可能
- タスクがない場合はTODOを作成不可
以下のことが出来るようになっていました。
- TODO一覧画面
- 進捗表示
- 更新日
- 削除
- TODO作成画面
- タイトル入力
- タスクの入力
- タスクの追加・削除
まとめ
TODOアプリをClaude Codeを使って一通り作れました。
作って感じたのはやっぱり早さですね。
業務の合間にやったので正確ではないかもですが、概ね1時間程度でここまで出来たかと思います。
出来たソースコードを見ると気になる点などあるので、このまま利用するのではなくキチンと確認して修正するのが大事だと感じました。
ただ、今回のように色々一気に指示すると差分が増えるので、細かく指示して差分を逐一確認して必要があると思います。
AIをうまく利用し、開発速度向上・品質のアップに繋げていきたいと思います。
この記事がどなたかの役に立つと幸いです。
以上。リテールアプリ共創部のotasでした。
エンジニア募集のお知らせ
リテールアプリ共創部マッハチームではエンジニアを大募集しています！
マッハチームでは 0→1 の新規案件の立ち上げを専門に、AI駆動で高速にプロダクトを開発しています。
AI駆動開発がしたい方、モダン技術を用いてフロントエンドもサーバーサイドもインフラもTypeScriptでフルスタックに開発したい方、プリセール・顧客折衝も要件定義も開発も全部やりたい方は、是非以下のブログも読んでみてください。
お気軽にカジュアル面談もお待ちしています！
