ChatGPTと対話しながら実用可能なWebアプリをノーコーディングで作った話（RAGの視点を踏まえて）

# プログラマーもAIを使いこなして生産性を上げる

<img width=15%><img align="center" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/052c4a13-e10f-fac6-d41e-aff37108686d.png" width=70%>

DXが叫ばれる昨今、ソフトウェアのニーズは増えていますが、１人のプログラマーが製造できるアプリにも限界があります。
そこで、プログラマーも生成AIを使いこなし、効率的に製造していくのがよいと思います。

ただ、生成AIを使ったとしても、<font color="red">**仕様を伝える部分は人間に指示するのと大差ない**</font>と思います。一回の指示で期待通りのアプリができることはありません。これは生成AIというよりアプリ開発者がもつ情報や認識の問題だと思います。

この問題については、AIにアプリ開発をナビゲートするように指示すれば、いろいろと質問をして情報や認識の問題を解消してくれると思います。

プログラマーの場合、この前提となる知識はあるわけなので、専門外の方が作るよりは期待通りのアプリを早く作り出すことはできると思います。その一事例として、この記事を投稿しました。

<font color="red">**AIを使うことで「コーディング」という文字打ちの部分はかなり楽**</font>をできますので、Vimなどのエディタで入力効率化を図るプログラマーは積極的にAIを使うべきだと思います。



# URLではなく単なる文字をQRコードから読み取るアプリがほしい

PTAのIT担当をしています。
その中で、メンバーにアプリのパスワードをQRコードで渡そうと考えました。

<img width=30%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/8bab387f-6d8f-5fa0-b629-6676a30f9505.png" width=40%>


できるだけスマホにアプリをインストールするという操作をメンバーにさせたくないと思いました。

そこで標準機能だけでQRコードをテキストとして読み取れないか調べました。iPhoneはできましたが、AndroidのGoogleレンズは、QRコードをテキスト化してコピーするというのができませんでした。
Googleレンズは、QRコードはURLだという前提らしいです。

メンバーは、iPhoneユーザーが多いのですが、一部、Androidユーザーもいます。
インストールせずにQRコードから文字を読み取れる方法はどうすればよいか？

# ChatGPTにQRコードを読み取るWebアプリを作らせる

そこでWebアプリで以下の仕様を満たすアプリを作ろうと思いました。

:::note
**要求仕様**
カメラを起動して、QRコードを読み取り、クリップボードにコピーする
:::

コーディングすればできるのはわかります。
でも、仕事でもないし、限られた時間でコーディングしなければいけない。なにより、仕事で散々コーディングして、プライベートでもコーディングするのがかったるいなと思いました。

そこで、ChatGPTにコーディングさせてみました。

https://chatgpt.com/

# AIとはいえ対話が大切

最初、以下のようなざっくりした依頼をしました。

:::note warn
**最初の依頼**
HTML、Javascriptをつかって、Webブラウザからカメラを起動してQRコードの文字列を表示するアプリのコードを作成してください。
:::

それらしいコードを生成してくれたので、ブラウザで閲覧しました。
が！、全然、カメラが起動しません。
がっかりして、「やっぱりAIはまだこんなものかな」と思ってしまいました。

<img width=30%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/e2daa840-1f3f-be04-c707-aee63e33b44a.png" width=40%>

けれど、情報量が足りなかったのだと思い、対話をしながらコードを修正させることにしました。
AIとはいえ、インプットとなる情報が必要だろうし、どこがおかしいか情報を与えていけばきっとできるだろうと思いました。

# ChatGPTにどのような技術を使うかを指定する

生成AIを使っていて思うのが、一回ではなかなか答えがでなくても、対話を続けるうちに求める回答を得られることが多いです。やはりここは人間と変わらないですね。

<img width=15%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15972/d5555e94-d180-b75f-158c-ffef7a6b12c8.png" width=70%>


そして、20分ぐらい問題点を逐次修正させていき、やっと期待通りのアプリができました。
そのやりとりを共有します。
最終コードを起動すると、QRコードから文字列を取得し、クリップボードにコピーできます。


https://chatgpt.com/share/a66a95c3-2fb8-4465-8e29-c4e4e0b03552


<font color="red">**ChatGPTにコーディング**</font>させたとき、これは大切だと思ったのが、<font color="red">**利用する技術に関するドキュメントを提供する**</font>こと。

# RAG（Retrieval-Augmented Generation ）の視点をもってAIを利用する大切さ

今回のアプリを作るにあたって、ある程度どのような技術が必要かを私自身調べていました。その過程で、キーとなるキーワードやライブラリは知っていました。

ChatGPTの初回のコードにはそれらが見当たらなくて、依拠するドキュメントを指定しました。
以下の記事を参考にさせて頂きました。ありがとうございます。

https://qiita.com/kan_dai/items/4331aae12f5f2d3ad18d

この記事を指定してからは、期待通りのコードにかなり近づきました。
ChatGPTを使うにしても、参考にする記事を指定するのがいいことを改めて感じました。
やはり使い手もある程度は技術の知識をもっている方が、早く成果物を得られると思います。

最近、生成AIを使う時RAG（Retrieval-Augmented Generation ）を利用することが増えています。生成AIエンジンだけでは期待通りの情報を得られないこともあるので、AIが回答するための根拠となるデータを指示することが重要だと思います。

> Retrieval-Augmented Generation は、外部ソースから取得した情報を用いて、生成 AI モデルの精度と信頼性を向上させるテクノロジです。

https://blogs.nvidia.co.jp/2023/11/17/what-is-retrieval-augmented-generation/

RAGを使ったAIシステムの構築方法もありますが、ChatGPTでも参考ドキュメントを示すことでRAGのような使い方ができるのではと思いました。

AIをつかって、一回の指示で期待通りのアプリはできないですが、参考資料を与えて、対話していくことで期待通りのアプリができることを体感できました。

やっぱりAIをつかったコーディングはプログラマーとしても必須な気がしました。

これからのプログラマーは、<font color="red">**要件定義、インフラ・アプリ・システム設計、テスト計画など、いわゆる上流工程を行い、コーディング（文字入力）はAIにさせていく**</font>ようになると思います。コーディング自体はAIの方が遥かに速くて正確です。
上流工程においても、AIが設計観点を踏まえてナビゲートするようになると思います。


# 具体的なAIの使い方を知りたい

ちなみに、知り合いがAIを職場でつかう方法を共有するイベントをします。
職場でどうやってAIを活用したらいいのだろうと思うことがあり、登壇する人たちの話を聞いてみたいと思いました。
2024年8月24日（土）の15:00-17:00、新宿御苑駅近くらしいです。懇親会もあるということで私も参加する予定です。

https://ai-idea-share.connpass.com/event/323662/