ローコード開発者が口だけだしてGPT-4にコードをすべて書いてもらった実験

ローコードやLINEでチャットボットができたものの、Webサービスとして作ることをしていなかったので、検証していきます。

コードのふるまいは理解できるものの、きちんとコーディングしたのは5年以上前です。口だけ出す無能コピペ開発者としてどこまでできるのか、Googleコピペの代替として機能するのかやっていきましょう。もちろんバグがあってもどこに問題があるかなんてわからない前提で進めます。トラブルシューティングも可能な限りやってもらいます。さあ、どこまでいけるかな？賛否両論ありそうですが、トライです。

過程と思考

チャットログをすべて張っているので長いです。結果だけ興味のある方は読み飛ばしてください。どのように開発したのかを知りたい方はステップバイステップにお付き合いください。

まずは、技術選定から。フロントエンドのJavaScriptフレームワークから選びましょう。

シンプル・軽量・高速ということでVue.jsに決めました

テキスト欄を作ってもらいます。誤字もなんのその

うん。初手でファイルを分けるんだね。よしよし

なるほど、何となくわかるよ。自分で書けないけど

やりたいことはわかるけど、書けない。応答もお願いします。

うん。メッセージを送ったら応答を受け取るんだね（棒）

ん？ちょっと待った。htmlに直接css書かないでほしいな。

そうそう。そうしましょう。

そうだね。ファイルをわけましょうね。次はチャットっぽくレイアウトを配置したいです。何とかしてくれませんか？

了解。あとで画像をつくりましょ

メッセージ領域に画像を挿入ね。了解

おっとここでトラブル発生。レイアウト崩れと最新情報がわからない。修正お願いします。

style.cssの修正箇所が探しづらいよー

コピペするので全部見せてね

うーんスクロールがうまくいかない。もう一度説明しましょ

おっと、直接スクリプトをhtmlに書かないでほしいな。分割分割

よしよし、ん？main.jsと統合しないの？まぁいいか。後で確認しよう

おや、接続が拒否されたぞ、おそらくウィンドウの閉じ忘れだけど、対策を教えてね

おー。おススメされるのは全部受け入れます！

うーんスクロールしないなぁ。なんで？

うん。間違ってないような気がするのだけど

うまくいかないので調査方法を聞きましょう。

そうですね。console.logで調査。定番でしょうね。

うーん。呼び出されていないんじゃないか？なんでだろう。

うん。やったよね。さらに案があるのかな

お、一手ずつ確認、切り分け大事ですね。

ダメだー。。。コピペしなおそう

おぉぉ。デグレードの沼にはまっている

ダメなときは正常時との差分を確認しましょうね。

ステップバイステップで直していきましょう。

そうそう。なんでmain.jsあるのにapp.js作ったんだっけ。統合して整理してみましょう。

これですっきり！

さて今度はどうなるか

原因はこの通り。コピペ開発者なので聞き流しますが、原因を確認してスキルアップしましょう

続いてデザインをきれいにしたい欲求を満たしていきます。「ぽんっ」が伝わるかな？

「ぽんっ」はフェードアップとして認識してくれたようです。心なしかノリノリに感じます。

スクロールアニメーションを追加してもらいます。時間経過で何かしてくれるようです。

うまくいっているときは進みも滑らかですね。

質問欄がフルスクリーンサイズだったのを調整

それくらい自分でやれよというのはありますが、ちゃんと伝えないとソースに反映されませんからね。

言ったことを取りやめる。ごめんね。

わからないことはサジェストしてもらいましょう

なるほど。助かります。

ふわっとした質問を投げてみましょう。こういうシーンよくありますよね。

ん？Buttonクリック時のイベントがないけど大丈夫かな？

困ったときは再コピペ。AIに任せましょう

formになってるし。確認大事ですね。

またもやトラブル。解決策を考えてもらいましょう。

まずは言われるがままに修正

ダメだったときは、コピペしなおし。鉄則です。

えらいです。理解していますね。

んん？いつのまにapp.jsじゃなくてmain.jsに認識が変わっていたんだ？？そりゃ動かないね

できたUIがこちら。所要時間はおおよそ1時間

開発はやることがいっぱいですね。今回はフロントエンドなので、3と6に注目していきたいですね。

ふむふむ。ユーザビリティのためには欠かせないですが、省けるものもありますね。

非機能要件はきりがないかも

まだあるのかよっ

無茶振りしたらいらない機能まで盛り込もうとしたので中断

明確に指示しましょ。一気に支持するのは悪手。バグが混入するリスクが高いがどうなるか。

フォントはRobotoかな

ん？CDNが変わってるし、main.jsからapp.jsに変わってる。気をつけねば

さて、どうなるか

だめでしたーー！いろいろ忘れています。

〆（結論）

ローコード開発者目線（コーディング経験あり）からすると、新しく触るローコードツールで開発をするより、非常にやりやすいです。実装したいことを言語化しながら作れるので、イメージがわきやすくプロトタイプ開発をしながら要件を固めていく手段としてはアリです。時々勝手な変更を入れてくるので、コードが読める必要はあります。ノンコーダーには多少ハードル高いです。

また、Googleコピペよりは実装のイメージがわかりやすく、つぎはぎにならないので、初学者の勉強手段としても、要件定義について勉強したい人にもありかもしれません。

課題は、デザインに関する指示やファジーな要望をどう伝えるかでしょうか。この辺りはBubbleやAdaloといったノーコード開発のほうがアセットが整っているので、こちらが慣れている方はクオリティが担保しやすいです。AIに提案してもらうのもありでしょう。

ただ、ここから先、同じような開発スタイルでやっていくのは非効率です。クラス毎に細かい機能実装にアドバイスを求めながらやっていく感じがよさそうであり、言い換えるとCopilotのような振る舞いが欲しくなってきますね。

なお、コード自体はWebから学習したものなので、オリジナルの開発者さんにリスペクトしましょう。

また、いくらAIが書いたとしても、コードの品質はプロンプターが担保する必要があります。当たり前ですが、バグやセキュリティホールがあってもAIのせいにしてはいけません。気を付けましょう。

いくつかやってみたい実験案が出てきたので、続きはまた別の記事で。