開発の背景は生成AIの違いが分らないこと

生成AIの性能向上と機能性向上は2025年、目を見張る進展があります。毎日どこかの会社の追加機能リリースを聞きます。
各生成AIは操作性や機能また回答に違いがあり、AI毎にアクセスページを開いて同じ質問をしていました。
そこで、今回同時に4つのAIモデルを選択してチャットができるCrossChatをノーコードで開発することにしました。
CrossChathは別々のAIモデルを同一画面で切り替えることで、そのレスポンスや応答時間の違いをチェックできます。

独自開発チャレンジの動機

自ら開発するきっかけは、プログラミング意欲と、AIのコード生成に関するエージェント機能の進展のニュースを見聞したことです。
自分で全てをコード書くのではなく、要件をプロンプトとして指示し、プログラムの大枠つくることの検証をしたい。そう思ったのです。
とっかかりに、簡単な機能をAIのコード生成機能を利用してコード作成を丸投げするしました。これが意外とスムースにコード生成ができたのです。CrossChatは過去の会話記録の保存や取り込んだテキストデータをベースにチャットができるチャット機能をもっており、それを活用して外部仕様をAIに伝え、AIが全文をコーディングやり方で95％以上のコードをAIに作ってもらいました。
自力でコーディングをしていたら事前勉強を含め、3ケ月はかかるであろうプログラム作成が2週間以内でできたことは本当驚きです。

開発ステップ

開発ステップの概要は以下の通りです。

１．コード生成

1. AIが示すサンプルコードを確認して、実装したい機能をAIにプロンプトとして与え、全体のソースコードの表示の指示する
2. 機能の確認を行い、修正したい箇所の機能を具体的に指示し、再度全体のソースコードの入手する
3. テストをおこない、不具合があればそのデバッグコードが入ったソースコードの入手する
4. Web画面用の背景画像を画像生成AIに依頼する

基本的にはこの組み合わせでコード生成ができました。

２．テスト

1. Web画面で、通常の入力範囲テストを実施
2. Webの非同期処理対応テスト：コードそのものが、非同期に対応したコードを生成する為、画面の暴走などはそもそも生じない
3. ネットワーク不到達：APIコール時のエラー処理が自動生成される為、エラー状態はコンソールで確認

３．手による追加・修正

1. APIキーの記述など、.ENVへのパラメータの記述
2. ボタンサイズ、テキストサイズ微調整
3. 出力メッセージの推敲と修正

開発後記

開発したコードは全体では2000ステップ程にすぎませんが、各定数名なども日本語かた適切な英語表記に変換してくれました。
また、一部のコード修正は自分でも可能ですが、Javascriptの”)”,”});”などの漏れによる文法誤りも、全体ソースの再表示ではエラーばなく、機能修正は都合30回以上修正・追記を繰り返しましたが、文法誤りが発生しないことは助かりました。
ソース丸投げスタイルではなく、VSにCopilotやCursorを組み合わせて、AIと対話しながらソースを作っていく手法がシステム会社では多いのではないかとおもいますが、都度コードを読むことがつらくなったシニア世代の私にとっては、便利なアプローチでした。