Aiと一緒にツールを作ってみよう(利便性向上編)

はじめに

この記事は
前回(https://qiita.com/92yuki/items/0dcc72bd42120dd713d6)
前々回(https://qiita.com/92yuki/items/948e67d907b4576a1434)
の続きになります

この記事でやったこと

今回は前回最低限の機能の実装は完了したため、利便性向上(+管理のしやすさ向上)を目指して、以下の内容に取り組みました

• gitの作成と管理
• UIを使いやすいように整える
• データのアップデート機能
• ソート機能追加

gitの作成と管理

今回はまず、プロトタイプの状態とそのほか(UI変更や機能追加など)のバージョンを分けるために、gitの作成に取り組みました。
業務でSVNは使用したことはありますが、gitは使ったことがないため、相互の違いを訊きつつgitを作成。
ここでの学びとしてはリポジトリの履歴の中心がSVNはサーバに、gitでは各端末上にもリポジトリの履歴が存在すること。
また今回はgithubなどは使っておらずローカルのみでの管理のためcommitが実質SVNのcommitと似ています。ですが、複数端末で行う場合はさらに"push"が必要である点も異なる点。
同じ単語を使用しつつも、SVNとgitで役割が異なる部分はややこしいと感じました。

↑gitについて解説してくれている表

gitを導入後、プロトタイプのブランチ「main」と、UI変更用のブランチ「ui-redesign」を作成して準備(画像は後撮りの為branchが増えている)

UIの整備

次に、実際にUIを変更していく作業に移りました。
GPTに以下のイメージを伝えつつ、codexに渡す文面を考えてもらいます

• 白ベース
• 余白はやや多めにとる
• ボタンは押しやすい状態にする
• 表はカラム間の感覚が詰まっていたため、見やすい間隔を保つ
• 登録画面の入力欄についても、体裁を整えて入力がしやすいようにする

そうして、編集してもらった結果が以下

↑これが(前回より引用)

↑かなり見やすく変更できました！

↑同様にレコードの登録画面についても変更

他所に出しても最低限のUIにはできたと感じます。

編集機能の追加

今まレコードの追加と削除はできていましたが、編集機能がなかったため機能追加しました。
編集ボタンを押下すると、現在の情報を画面内の各項目の欄に維持しつつ、任意で変更できるようになっています。
また、細かい部分ですが新規追加では画面下部のボタンが登録となっており、編集では「更新」となっているなど、細部は変えるようにしました。

更新を行うと、表示されているレコードの内容が変更されるのはもちろん、DB側で持っている「updated_at」カラムの日時が更新されるため、新規作成などではなくしっかりと更新されていることが確認できます

ソート機能の追加

表の形であるため、DBで言うところのASC/DESCでのソートを各カラムへ追加することを試みました。
しかし、GPT側にうまくその意図が伝わっておらず、単発でend_dateカラムを対象に画面上のレコードを並び替えるだけの実装となってしまったため、再度ソート機能を実装するように指示を行いました。

↑誤ってDBにだけソートをかけてしまった。

codex自体は毎回実装後に内部的にテストを行ってくれてはいますが、そもそもの前提が自分とGPT・codex側で齟齬があった場合は意味をなさないため、以降は実装前により具体的な指示出しやcodex用のプロンプトに目を通すべきと感じました。

再度修正を入れ直し、ソートが変更できるかを確認…しようとしたところ、whitelabel error pageが出てしまいました。
さらにcodexに実装を確認させたところ、実装に誤りがあることを認めて修正をしました。

セキュリティの都合上DBへの接続はcodexに許可させずに自身で簡単な検証を行っていたので、今回はレコードを作成し、さらに検証して問題ないことを確認します。

実際に各カラムのソートを昇順・降順で入れ替え、しっかりと順番通りになっていることを確認できたため、一旦ソート機能についても作成が完了とします。

今回AIを使って感じたこと

今回はgitの作成やUIの改善、また編集・ソート機能の追加などを行いました。
やはり疑問点がすぐ質問で来てそれに応答してくれることや、自身の知識と比較してやり取りするといったことについては非常に優秀だと感じました。
しかし、今回特にソート機能追加の部分で躓きが多くあったためそこは人力の必要性も感じました。
以下で実際にうまくいかなかった2点を分析します。

• 実装したかったソート機能と実際に実装されていた内容が異なっていた点
  こちらは、私がcodexに提示するプロンプトをGPTに作成させた際、私が考えていたものとは異なる解釈をされてしまい、結果的に想定していない実装が生じました。
  この問題については実装依頼のプロンプトを確認することで防げていたはずで、盲目的にcodexへ投げるといったやり方がゆえに生じてしまったため、反省点かつ今後気を付けるべき点として意識していくべきと感じました。

• 実装に失敗しwhitelabel error pageが表示された点
  こちらは、codexの実装完了後、spring bootの再起動時に発覚した問題で、実際にcodexの実装に誤りがあった事象です。
  今までそのような実装ミスはありませんでしたが、やはりAIでもミスするものだと改めて感じました。
  今回はそもそもページを開けないエラーだったためすぐに問題が発覚しましたが、実運用しないと気付かないような部分での実装ミスは品質の低下につながるため、人の手でのテストについても必要であると感じました。
  また、gitで管理しておくことで誤った変更をしてしまっても戻せるため、成した恩恵がこういったところで活きてくると実感しました。

最後に

今回はいつものようにスムーズにいかない点もありましたが、その分気づきも多くあったと思っています。
自身が使うツールとしては通用する程度には仕上がりましたが、今後は登録したタイトルの実際のイベント期間などを、AIを利用しつつ自動で取得、追加し期間が過ぎたら削除するなどの機能も取り入れてみたいと思います。