目的
C#の経験は約2年ありますが、Reactは未経験です。
今回は、Codexを実際に触って使い方を学ぶために、個人用の家計簿アプリの作成を依頼しました。指示の出し方や、生成されたコードの確認、動作検証までの進め方を試すことが目的です
作ったもの
My Budget Appという、月ごとの収支を確認できるWebアプリです。
- 収入・支出の登録、一覧、編集、削除
- 月別の収入・支出・収支の集計
- カテゴリ別の支出内訳
- SQLiteへの保存、スマートフォン対応
| 部分 | 技術 |
|---|---|
| バックエンド | C# / ASP.NET Core / .NET 10 |
| フロントエンド | React / TypeScript / Vite / Tailwind CSS |
| DB | SQLite / Entity Framework Core |
自分とCodexの担当
自分が行ったことは、作りたい機能と開発ルールの指示、Codexの初期設定確認、手元での動作確認です。
Codexには、設計案の提示、コードの実装、テストの作成・実行、READMEの整備を依頼しました。コードの大部分を自分で書いたわけではありません。
指示では「まず最小限で作る」「変更内容を説明する」「ビルドとテストを行う」「コミット・プッシュ前に確認する」を指定しました。
作業の流れ
- リポジトリと開発環境を確認する。
- ASP.NET Core APIを用意し、
/api/healthで応答を確認する。 - Reactの画面からAPIに接続する。
- 収支のCRUD、SQLite保存、月別集計を追加する。
- ビルド・テスト・画面操作を確認する。
データが保存される流れは、React → APIの入力検証 → EF Core → SQLiteです。
確認できたこと
- クラウド側：Codexが両方のビルド、API統合テスト18件、ブラウザでのCRUD操作、再起動後のデータ保持を確認。
- 手元のWindows：画面表示、API接続、食費1,000円の登録、一覧・集計・カテゴリ内訳を確認。
作成した画面
つまずいたこと・学習ポイント
-
.vsなどの作業用ファイルはGitの対象から外す。追跡済みファイルは.gitignoreだけでは除外されない。 - 画面とAPIは別々に起動する。画面が表示できても、APIが停止していれば保存・取得はできない。
- Windowsのアプリケーション制御でDLLがブロックされた。保護設定は維持し、Swagger UIは保留した。その後起動できたが、ブロックが発生しなくなった理由は未確定。
次に取り組むこと
動く形にはなりましたが、生成されたコードをすべて理解したわけではありません。次は、以下の点をコードを読みながら理解していきたいです。
- Web APIの設計：URLやHTTPメソッド、リクエスト・レスポンス、ステータスコードの決め方
- 保存処理の流れ：Reactから送ったデータが、API・EF Coreを通じてSQLiteに保存される仕組み
- 入力検証とエラー処理：画面側とAPI側で何を確認し、エラーをどう返すか
理解を確かめるため、カテゴリ追加などの小さな変更も自分で行う予定です。