背景
コーディングが得意でない、でもハッカソンなどでちょっとしたアプリを作りたい。
動くアプリでコードを学びたいなどに使えそうかなってことで
Vibe Coding(バイブコーディング コーディングに特化した大規模言語モデルへのプロンプトとして自然言語で記述してプログラムコードを作成する）を試してみた内容やそこで感じた感想などを自分の覚えとしてまとめてみました。
あくまで自分の覚書であり、作業自体無駄や同じことの繰り返しなどがあり
洗練されていないと思いますが、稚拙なものでもこんな形で出来るということで
参考にしてもらえたらと思います。
地図アプリが出来るまでのやりとり
気を使った点
単純な機能から実現するように「地図を表示する」という機能を依頼
以下のような回答が得られました。
ただ地図ライブラリーを使用することで
ウエブアプリだけで完結せず、呼び込みが必要になるので上手く動かない
サンプル例などを見るとウエブだけで完結するものは一回の指示だけでできているが、
ライブラリーを読んだり、他のデータとの連携（データベースやcsvファイルなど）があると
一回では上手く行かないように思われる。
プログラムにエラーが出た場合ポップアップで修正ができるが
でてきたエラーコードをコピペしてエラー修正をトライ
ちゃんとエラーに関してどのようなエラーが説明してくれる
これを元になにが問題が学べそう
でもこの修正内容では不具合が直らない
同じようなやり取りが続いて、何度かこちらの表現を変えて対応
具体的には、
エラー内容を貼り付ける
単に「不具合が直らない」といった表現にしてみるなどを実施しました。
ただ常に対応が丁寧で
失敗してもまっいいかって思えるのはプログラムとして作られたものではあるが
よく考えられている。
（コミュニケーションの王道ではあるが人間の場合「感情」や「体調」などが邪魔してできなくなることは常に出来ているのは殺伐になりがちな共同開発の相手としてはありがたいと思う。）
結局は何度試行錯誤する中で出来てしまったが
本当は返してくる不具合点を確認、途中に関数などの数値を返すようなチェック機構を埋め込んで（実は後のcsv読み込みの改修ではGemini自身が提案実施しています）
機能追加
地図を表示させるだけでは面白くないので、別の用途で作っていた某弁当屋さんの店舗情報（緯度経度含む）を使って店舗検索が出来るアプリにできないか試した。
データはこんな感じ（参照：淡路屋HP https://www.awajiya.co.jp/)
EXCELそのままで使えるか聞いてみた。
当然駄目と回答（でも代替案を書いてくれるのは良いですね）
代替案でやってもいいのですがどうにかできない？と聞いてみる。
案を提示してくれるので
ここからGoogle Spreadsheetに変換して試したが
セキュリティの関係でうまく行かず、csvへ変換、公開する方向へ
ここからやり取りは省略しますが、読み込みはうまくいくものの、
データが読めず、難航、この日は直せず...
生成AIと一緒にエラー修正
やはりEXCELやcsvのデータと連携できないのは多くのデータを扱う場合
プログラムが膨大になるのと、差し替えや追加が難しいと思ったので
再度別日にGeminiと相談
-
前にうまく行かなかったところでエクスポートしたhtmlファイルを添付して、
不具合内容を報告
可能性のありそうな部分を修正してくれますが、結局直らなかった。
-
修正の際の挙動をうまく説明する（エラーは出ていないが、csvの内容が表示されない。といった感じで）
-
今回Geminiの側から、csvデータの取り込みをチェックするチェック、結果表示の追加の提案があり、その出力をチェック
-
結果csvの緯度経度部分の読み込みをcsvの緯度経度ではない別の列で行っていて、そこが文字列のものがあり、nullになってしまい上手く言っていないことが分かった。
-
緯度経度の列を正しく示し、修正させた。＞完成
しかし生成AIも思い込みをするんですね、緯度経度は施設名の次に来るものって思い込んでたのが原因でした。
Githubでのページ共有
上記で作成できたアプリをhtmlファイルで出力すると、そちらではセキュリティの関係上、外部ファイルと連携できなくなることがわかり
以下のnoteで紹介されていた方法で実施
https://note.com/oto_wan_ai/n/n4843cebda021
共有したページは以下の通り
起動してすぐにはデータと連動していない状態です。
現在位置情報を聞いてくるので許可してあげてなどすると
しばらくすると連動してプルダウンから選べるようになります。
https://koh0922.github.io/map_test/
感想
今回一通りWEBアプリを作成、更に共有できるように
サイトで公開まで「お試し」ですが生成AIと対話しながら作ってみました。
気になった点としては、生成AIも思い込み(実際にはそのようなデータのケースが多いため統計的にそう判断しただけだと思いますが）があるのはわかってしまえば面白いですが、ハマってしまうとちょっと困るかもと思いました。
それにはこの場合だと取得したデータの型式を出力させる機能を一時的に埋め込むなど、
データやプログラムのレスポンスなどを細かく見ていく仕組みを実装するなど
確かめながら作っていく工夫が必要と感じました。
でもこれも生成AIにチェックしたいなどと話せば提案してくれるなどハードルが下がってきているなと感じました。
参考