経緯
この記事は以下の記事の続き。第5回です。
第1回 全体計画～要件定義編
第2回 アーキテクチャ設計～データベース設計編
第3回 API設計～インフラ設計編
第4回 設計工程の振り返り
前回設計工程を振り返ってみて、色々と現在の Chat-GPTの限界 私のChat-GPT扱い力（プロンプトエンジニアリング力）の限界が露呈してきた感があります。
今回はこのまま実装工程に入りますが、予想通りあんまりうまくいきませんでした。
あんまりうまくはいきませんでしたが、何とか苦労して疎通まで行きました、という回です。
工程
当初計画に基づくと、本来は一個ずつ詳細設計を書く必要がありそうなのですが、この工程は飛ばしていきなりコーディングをさせてみます。
というのも、実は何度か試してみたのですが、詳細設計書を作成してからコーディングを行った場合と、直接コーディングを行った場合で品質に大きな差がなかったため、手間を考えて方針を変更することにしました。
いや、品質に大きな差が無い、は言い過ぎたかもしれません。詳細設計書を挟むと、機能単体の品質は上がるのですが、機能ごとの仕様（プログラムの書き方の癖、変数のネーミング等）のばらつきが大きいように感じた、という方が近いです。
今回は一個一個の中身を細かく見る気はなかったので、なるべくばらつきが出ない方が管理しやすいかなと思っていきなりコーディングをさせる方を採用しました。
コーディング
第2回、第3回で詳細設計書を作成した時と同じように、ここまでで作成した設計書（要件定義書、テーブル一覧、画面一覧、API一覧）をChat-GPTに読み込ませます。
テーブル（DDL）作成
DDLはもっとも簡単で、「テーブル一覧をDDLにして」といえばすぐにやってくれます。
画面（react）
画面の作成は結構てこずりました。何度かやっても全然まともなものを作ってくれなかったのですが、
以下の手順でやると比較的出力が安定しました。
-
要件定義書、API一覧、画面一覧を読み込ませる ※テーブル一覧は画面からは直接関係ないので読ませない。
いつもの方法。 -
画面ごとのプログラムファイル一覧を作ってもらう
-
画面ごとにプログラムファイルを1本ずつ出力してもらう
-
共通的な個所を作る
共通モジュールは最低限必要なApp.js（ルーティング定義含む）と、APIお纏めのapi.jsだけにしました。
合ってるのかどうかは知りませんがとりあえず生成はできたので、
おもむろにビルドしたところ、当然エラーが出ました。
エラーの内容は大別すると以下のようなものでした。
- react-router-domのバージョン齟齬（v6であるべきところv5で書かれていた）
- useHistory → userNavigateにすべき
- API呼び出しに共通モジュールを使っていない（直接http通信しようとしてる）
- 依存関係不足
エラーをChat-GPTで自動で解消してくれればいいなとは思いますが、
結構トンチンカンなことを言ってくるので結局この辺りの潰し込みは手作業でやりました。。
仕様はいじらずに脳死でエラー解消だけやった、という状態です。
というわけで、20分くらいかけて晴れてビルドエラーは解消して画面が立ち上がってきました。
トップページ
それぞれの画面の中身は全然レビューしていないので、正直どんなものになっているのか全然わかりませんが、なんかそれっぽくはなっている気がしなくもないです。
CSSを作っていないのでデザインが古生代なのは目を瞑ります。
にしてもメイン機能的なところとサブメニュー（アカウント設定以下の三つ）的なものを並列にしてしまっている辺りはCSS以前にHTMLの問題なので、もう少し勉強してほしいところです。
収入入力
ほんとにダサすぎて眩暈がしますが、、一応入力項目が出来てはいます。
項目が足りてるのかどうかは知りませんし、入力チェックがかかるのかどうかも不明ですが、一応何かできています。
収入一覧
この画面はデータがないので閑散としていますが、一応裏でAPI呼びに行ってエラーになっているので、
それなりの挙動をしてはいるようです。
収支APIとカテゴリAPIを呼んでいるようですが、これは収支とカテゴリをそれぞれとってきて画面上でjoinするということでしょうか？中を見てないのでわかりませんが。。
（というか、、さっきの収入入力画面でカテゴリ入力するところ無かったじゃん。。ダメだろ。。）
カテゴリ一覧
収入同様、何もないです。
予算設定画面
予算設定画面は入力と一覧が1画面で作られています。
収支もそうすべきだったのでは？と思いますが、この辺りの設計の違いが何に起因しているのか。。ちょっとよくわかりません。
地味に初期値として当月が入るようになっています。ここは偉いですね。
収入入力は初期値ブランクだったので。。そう考えると収入入力は初期値もなければカテゴリも無いし、Chat-GPT調子悪かったんかお前？ってなりますね。
グラフ表示
Loading...だけ、、データ入ったらちゃんと描画されんのかな・・？
レポート表示
なんで英語!?
通知設定
この程度の情報量なら専用画面要らないなぁ。。
銀行口座連携画面
入力と一覧が1画面のタイプ。今回最も情報量が多い。
アカウント設定画面
特に無し。
パスワード再設定
特に無し。
API（flask）
APIの作成は最もてこずりました。。これは画面以上に何度やっても全然まともなものを作ってくれなかったので、仕方なくGPT-4を使ってみてようやく出力が安定しました。
手順は画面の時とだいたい同じですが、GPT-4は共通プログラムを別にしなくても大丈夫でした。
-
要件定義書、テーブル一覧、API一覧を読み込ませる ※画面一覧は不要
いつもの方法。 -
APIごとのプログラムファイル一覧を作ってもらう
-
プログラムファイルを1本ずつ出力してもらう
GPT-4の利用上限に掛かって途中2時間半待ちを挟んだものの、、とりあえず全部生成はできました。
これもflask起動してみたところ、エラーがいくつか出てきました。
- 表記ゆれ：CRUDのCでcreateなのかaddなのかが揺れが多かった
- 表記ゆれ：テーブル名が複数形なのかどうか。categoryなのかcategoriesなのか等
- importの誤り。「from models import NotificationSetting」みたいなところ
reactの時ほど多くはなく、修正も簡単だったのでエラー取るの自体は10分くらいで終わりました。
GPT-4は優秀ですね。まぁ、合ってるのかどうかは全然わかりませんが。
疎通確認
というわけで、せっかくテーブル、画面、APIと3拍子がそろったので疎通を図っていきたいと思います。
とりあえず収入一覧画面で。
エラーですね。。。
原因を見たところ、、
-
画面：リクエストパラメータにユーザーIDが含まれていない
→ 認証の仕組みをちゃんと設計してないからですね。とりあえず固定値を入れてしまします。 -
画面：レスポンスの型の扱いが変
→ resuponseはdict型で返ってくるのにlistで見ているところがあったので修正。 -
API：models.pyで、各モデルに「to_dict」という関数が定義されていない
→ 親クラスを作って全員に「to_dict」を実装。
と、4回ほどエラー対応をやりまして、、ようやく疎通ができました。
おお!!なんか動いてる!!、が、、、、これ、カテゴリが抜けちゃってたり、日付がダメだったりですね。。
やっぱり中身は相当に怪しそうです。
というわけで画面→API→DBの疎通ができたということで本日はここまでにします。
まとめ
今回はようやくモノが動くところにたどり着きました。
内容の検証は全くしていませんが、とりあえずなんか動いた、までは来ましたという状況です。
やってみて正直な感想、、このレベルなら自分でフルスクラッチした方が圧倒的に楽だし速いしですね。。
（まぁSIerのプログラマーとしては仕事でもそんなことばかりなので慣れっこですが。。）
今回は手作業でChat-GPTとの会話をやりましたが、Copilotでサクッとこのレベルの下書きをしてくれるようになると、ある程度生産性は上がるかな？どうかな？という感じでした。
下書き書いてくれてても中身が全然怪しいのでちょっとまだ無理かもしれないですし、意外といけちゃうのかもしれません。例えばSpringInitializerみたいな感じで適当に要件書くとzipで初期パッケージが落とせます、的なサービスが考えられますね。
私は普段GPT-3.5を使っているのですが、GPT-3.5だと簡単にシステム作ってくれるイメージは持てませんでした。
が、API作成の時に已む無くGPT-4使ったらほぼ一発で綺麗なコーディングが出てきたので、力こそパワーなのかもしれないとも感じました。GPT-4.5が待ち遠しいですね。
あと今回Chat-GPTに色々な聞き方をしてみて、明らかに精度が上がるやり方とか、コツというか、そういうのがあるんだなぁと感じることが何度もあったので、
もしかすると、やり方がきちんと確立されれば全自動で疎通くらいまで行けるようになるのかな？と思います。
第6回は、今回作ったダサ過ぎる画面デザインを使えるレベルに修正する回です。