「バイブコーディング」やってみたけどエラーだらけ…という人のための処方箋

こんにちは、ぴょたです。

皆さんの中で

「生成AIとアプリ作成に挑戦してみたけど、エラーが出てしまってうまくいかなかった」

という経験はないでしょうか。

生成AIの技術進化により、プログラミングをしなくても生成AIに自然言語で指示するだけでアプリが作れるようになってきました。

とはいえ、生成AIも完璧ではないので、アプリ作成を行なっているときにエラーが出てきて思った通りに動かないなんてことはよくあります。

特に複雑なアプリを作ろうとするとエラーや不具合が生じることは多くなってきます。

アプリ作成をしているときは、うまく動いているときは本当に楽しいですが、エラーが出て解消できない状況が続くと、やる気がなくなってアプリ作成を諦めてしまうなんてこともよくあります。

それもそのはず、アプリの作成において一番難しいところはエラーを解消するところだったりします。

特にプログラミング経験があまりなく、生成AIとアプリを作るところから挑戦している人には余計難しいことだと思います。

ただ、エラーの解消ができなくてアプリ作成を諦めてしまうのはもったいない。。。

ということで、少しでも自分のバイブコーディングによる経験が役に立てばということで

今回はバイブコーディングによってアプリ作成をしているがエラーに苦しめられている人向けに、バイブコーディングの際に生じたエラーの解消のコツをまとめたいと思います。

生成AIに想定の挙動とのギャップをしっかり伝える

もしかしたらこちらはエラーというより、不具合が生じた時の方が使うかもしれませんが。。。

こちらは一番シンプルでやりやすいかと思います。

特にフロントエンドなど画面上での挙動がおかしいときには使えます。

エラーが出ているときは大体理想とする挙動とのギャップがあるはずなので、そのギャップをどう解消してほしいか伝えることで生成AIが解消してくれます。

エラー文をそのまま貼り付ける

こちらもやりやすいですし、みなさんもすでにやっているかと思います。

この方法は単純ではありますが、ほとんどのエラーがこれで解決できたりします。

出力されたエラー文を貼り付けて、

「下記のエラーを解消してください」

とプロンプトを打ち込むのでもいいですし、

「エラーが生じているので解消してください」

みたいに割と雑にプロンプトを入力しても簡単なエラーであればすぐに解決してくれます。

これらはエラーが生じたときにまず試してみていい対処法でしょう。

スクショを貼り付ける

この方法も単純ですがかなり使えます。

アプリを作成しているときに画面上にエラー文がたくさん表示されることがあるかと思いますが、そういった場面で活躍する方法です。

例えばサーバを起動したときなど、うまくファイルが読み込めてなくて、画面上に赤くエラー文が表示されているなんてことはよくあります。

そんなときにその画面をスクショして、生成AIに

「添付の画像のようなエラーが生じているので解消してください」

みたいにお願いすると、割とすんなり解消してくれることがあります。

文字を打つのがめんどくさいときにも使えたりするのでぜひやってみてください。

ログを出させる

ここからは割とテクニカルになってくるかもしれません。

簡単なエラーであればここまでで紹介した方法で簡単に対処できることが多いのですが、複雑なアプリを作ろうとするとどうしても解消の難しいエラーに出くわしてしまうことがあります。

何度も生成AIにエラーの解消をお願いしているの同じようなことをグルグルしているだけみたいなことも生じてきます。

そんなときはログを出させて、デバッグするというのもかなり有効な対処法です。

ログを出させるときは

『〜のエラーが解消しないので、原因を明確にするためにまずはログを出力して確認できるようにして』

みたいな指示を送ることでコンソールでログを確認することができるようになります。

その後、ログに出てきている結果を生成AIに連携してあげることで、エラーが解消できることがあります。

アプリが複雑になってくると生成AIもよくわからないところで迷走することがあるので、ログを連携することで正しい現状把握ができるようにサポートしてあげましょう。

参考情報を与える

こちらは割と難易度が高いかもしれないですが。。。

エラーがどうしても解消できないときは、自分もネットで生じているエラーについて調べて、良さそうな情報を連携してあげる対処法です。

私が以前出くわしたエラーはMCPの設定をローカルで設定しているときで、その際もChatGPTに手伝ってもらっていました。

ChatGPTの出力は一般的には正しい方法だったのですが、どうも私の使っている環境と合わなかったみたいで、MCPサーバの接続でどうしてもエラーが生じるケースがありました。

ただ、こういった場合、ChatGPTは一般的に正しいとされる方法を何度も提示してきて、なかなかエラー解消ができませんでした。

そこで私はエラーを解消する方法が他にないのか、ネットでエラーの解消方法を探しました。

そうすると自分の状況に似たような状況でのエラーの対処方法がある記事に書かれていたので、ChatGPTに

「こちらの記事が現在生じているエラーの解消に役立ちそうなので、参考にして再度エラーを解消してください」

と記事のURLと一緒に連携してあげました。

そうするとその記事がやはり参考になったみたいで、ずっと解消できなかったエラーを解消することができました。

まさに生成AIと協力している感があって嬉しかったです。

この対処法の場合、どの記事が参考になりそうかなどの選球眼が必要になってくるので、プログラミング経験があったりすると有利になる割と難易度の高いやり方な気がするのですが、難しいエラーなどはこういった方法をとってみると解決できたりします。

まとめ

今回はバイブコーディングをする際に生じたエラーの対処方法を紹介させていただきました。

もちろんエラーは意外と手強いので、今回やった対処法をやればすぐに対処できるかというと必ずしもそうではなく、何度も何度も粘る必要がある場合もあります。

それでもエラーを乗り越えて作ったアプリは完成したときに達成感がありますし、リスキリングにも十分役に立つと思います。

エラーをうまく解消しながら、生成AIとのアプリ作成を楽しんでいきましょう！

今回もありがとうございました。