今回は、AIに資産管理アプリを作らせてみました。
私の最終的な目標はFIREです。
会社に依存せずに生活できる状態を目指す以上、「自分の資産が今どうなっているのか」を正確に把握する必要があると思っています。
- 銀行口座にいくらあるのか
- 証券口座はいくらなのか
- 全体として資産は増えているのか
これを把握できていない状態でFIREを目指しても、FIREに近づいているのかどうかがわからないと思います。
そこで今回は、資産をまとめて管理し、収入や支出を登録することで現在の資産が分かるアプリを、AIに作らせてみることにしました。
今回作りたかったのは、細かい家計簿ではなく、資産全体をざっくり把握するツールです。
AIへの指示
最初にAIに伝えた内容はかなりシンプルです。
資産管理アプリを作りたいと考えています。
資産に変化があったときに、その内容を「収入」または「支出」として登録できるようにしたいです。
また、「〇〇銀行」や「〇〇証券」といった複数の口座・項目を作成し、それぞれの単位で資産を管理できる仕組みにしたいと考えています。
フロント画面では、各項目ごとの現在の資産額が一覧で表示されるようにし、項目をクリックすると、その内訳や過去の変動履歴が確認できるようにしたいです。さらに、その画面から資産の増減を登録できるようにしたいと考えています。
まずは、このようなアプリをどのように設計・実装していくべきかを調査したいです。
ここでいきなり実装させるのではなく、まずPlanモードで調査させました。
AIが提案した構成
AIが提案してきた構成は以下です。
フロントはNext.js
スタイリングはTailwind
DBはSQLite
ORMはPrisma
言語はTypeScript
グラフはRecharts
ローカル専用なので認証はなしです。そのまま採用しています。
AIが整理した要件
要件は以下に整理されました。
- ローカルのみで利用
- 認証なし
- 資産項目を複数作成できる
- 項目ごとに残高を管理
- 収入と支出を登録できる
- ホームで一覧表示
- 詳細画面で履歴確認
- グラフで推移を可視化
実装の流れ
実装は以下の流れで進みました。
- Next.jsプロジェクト作成
- PrismaとSQLite設定
- スキーマ作成とマイグレーション
- API実装
- 画面実装
- ビルドと動作確認
AIはTodoを作って順番に進めていきました。
発生したエラー
複数のエラーが発生したので、整理しておきます。
いずれのエラーも自らがデバックすることはなく、エラーの内容を伝え、AIに修正させることでAIが自ら解決できました。
プロジェクト名のエラー
最初のエラーはプロジェクト名でした。
大文字を使っていたため、Next.jsでエラーになりました。
AIは名前を変更して再作成し、さらにディレクトリ構造も修正しました。
こういう細かいところも、ログを見ながら修正してくれます。
Prismaでのエラー
次に出たのがPrisma関連のエラーです。
モジュールが見つからないというエラーが出ました。
原因はimportパスのズレでした。
AIは生成されたファイルを確認して、正しいパスに修正しました。
ここで重要なのは、AIが推測ではなく「確認してから直している」点です。
TypeScriptエラーの連発
その後も型エラーが続きました。
グラフの型不一致
Tooltipの型エラー
undefinedの可能性
APIのエラー
ビルドは通りましたが、APIでエラーが出ました。
原因はSQLiteのテーブルが見つからないことでした。
調べると、データベースファイルが2つ存在していました。
参照しているDBが違っていたのです。
パスを修正することで解決しました。
実装された機能
最終的に以下の機能が実装されました。
- 資産一覧表示
- 項目ごとの詳細表示
- 収入支出の登録
- 履歴表示
- 資産推移グラフ
動作確認として、収入と支出を登録し、残高が正しく計算されることも確認しました。
AIコーディングは修正ループが前提
AIコーディングは修正ループが前提です。
- 指示
- 実装
- 実行
- エラー確認
- 修正
この繰り返しです。
やはり重要なのは、エラーを具体的に伝えることですね。
まとめ
AIに資産管理アプリを作らせた結果、実用レベルのものは作れました。
次は、このアプリを実際に使いながら改善していきます。
