ChatGPTだけでバイブコーディングを始める：作り方のコツとエラーへの対処

講座全体の中での位置づけ

前回の講座で安野氏は、7つほどのスキルをこの順番で身につけるのが最短経路ではないかという道筋を示していた。今回はその第1段階にあたる。7つのレイヤーのうち一番上の層であるLLM、つまりChatGPT、Claude、Geminiなどを使って、バイブコーディングがどういう感覚のものかを知ることが目的である。

安野氏によれば、ChatGPTだけでバイブコーディングができることを知らない人はまだいる。複雑な仕組みを組み合わせなくても、「何か質問してください」と表示されたいつもの画面で頼むだけで始められるので、まずそこから手を動かしてみるよう勧めている。

例1：「シューティングゲーム作って」と書くだけ

やることはシンプルで、作りたいものを文字で入力して、何ができるかを試すだけだ。作りたいものが思いつかない人に向けて、安野氏は具体例を挙げる。一つ目は、雑に「シューティングゲーム作って」とだけChatGPTに書くことである。

そうすると、パソコンに命令するための英語、つまりプログラミング言語のコードが画面に次々と出てくる。書き終わると右上に「プレビュー」ボタンが現れ、それを押すとシューティングゲームが始まる。安野氏が手元で試した画面も動画内で紹介された。

運が悪いと、ChatGPTの書いたコードがうまく動かず、赤い文字でエラーが出て止まることもある。ただし安野氏の見立てでは、たいていの場合はいきなりゲームが動く。2026年4月時点のChatGPTであれば、それなりの見た目で、それっぽく動くシューティングゲームが出てくるだろうという。

大事なのはその後だ。実際にプレイすると、「ここはいまいち」「ここは面白くない」という点が見えてくる。色が気に食わない、敵をもっと出してほしいといった要望でもよいし、自機を2つ同時に操作したい、あまり見たことのないゲームにしたいといった独自のアイデアでもよい。普通の日本語で「ここをこうしてくれ」「ここを直してくれ」と伝えていけば、ChatGPTがゲームを改善していく。

例2・例3：ホームページとシミュレーター

ゲーム以外の例として、安野氏はホームページ作りを挙げる。「安野貴博のランディングページを作ってくれ」と頼むと、まずそれらしいものができあがる。そこから「こういうコンテンツではなく、こういう見た目にしたい」「こういう文章を入れたい」「ここと、ここの間にこれを入れてくれ」と指示を重ねると、ページがどんどん形になっていく。

ホームページに動きを加えたものとして、シミュレーターやダッシュボードも作れるという。安野氏が例に挙げたのは、検討中の新しい制度である所得連動型給付だ。財源がこれくらいあればこれくらいのことができる、このパラメーターを入れれば給付額はいくらになる、といった試算を行うシミュレーターを頼むと、ウェブページ上で操作できるものを作ってくれる。

この3つはあくまで例であり、発想次第でChatGPTだけで作れるものは無限にある、と安野氏は言う。一度出てきたものに改良の指示を足していくだけでも、かなりいろいろなものが作れることに気づくはずだという。

ボトルネックは指示を出す側にある

では、このやり方で何が制約になるのか。安野氏は、ChatGPTの能力ももちろん関係するとしつつ、それ以上に指示出しの側がボトルネックだと指摘する。自分が何を作ろうと思いつけるか、それを言おうと思えるか、どこを直したいと気づけるか、という点である。

いろいろ試していくうちに、AIはここまではできてここからはできない、ここは微妙だ、こういうプロンプトにした方がいい、といったことを考え始められるという。だからこそ、どこが改善点かを考え、言語化して伝えることがかなり大切だと安野氏は強調する。

ChatGPTで作りやすいもの、作りにくいもの

とはいえコツはある。安野氏はまず、ChatGPTで作るのに向いた対象を整理した。

一つは、セーブボタンのないものだ。データを保存するような機能は、まだかなり苦手だろうと安野氏は見ている。もう一つは、ページがあまり切り替わらないものだ。1ページのランディングページや商品ページは十分作れるが、10ページあって次々に切り替わるようなものだと大変になってくるという。比較的シンプルなアプリケーションの方がやりやすい。

さらに、ブラウザで動くものに限られる。スマホアプリのようなものは作れず、Chromeなどのブラウザでぱっと表示できそうなものなら、ChatGPTの上でも作れるというのが安野氏の説明である。

コツ1：エラーが出たら「バグを修正する」ボタンを押す

ChatGPTも常に正しいコードを出せるわけではない。千行ほど書いた後で再生ボタンを押すと、エラーで動かないことがある。そのとき、画面の下のほうに赤字でエラーの文章が表示される。

安野氏が挙げるポイントは、この赤字をクリックすることだ。すると「バグを修正する」ボタンが出てくる。これを押すとChatGPTがどこでバグが起きているかを認識し、もう一度やり直してくれる。やり直しでまたバグることもあるが、うまくいくときはうまくいくので、エラーが出たらまずこのボタンを押す、というのが最初の対処法である。

安野氏はここで、デバッグという言葉の意味の変化に触れる。これまでのデバッグは、エラーの内容を見て「ここが間違っている」と見当をつけ、プログラムのあちこちを手作業で直す作業で、ソフトウェアエンジニアはそれを日々やっていた。しかしバイブコーディングの世界では、初心者はまず「デバッグとはバグを修正するボタンを押すこと」だと思っておけばよいという。

安野氏自身は、小学生や中学生の頃、一つのバグにぶつかると原因がわからないまま何週間も悩んでいたと振り返る。それがワンクリックでだいたい解決するようになったことに、時代の変化を感じると語った。

コツ2：同じプロンプトを並列で投げ、うまくいったものを採用する

二つ目のコツは、同じ指示を複数回同時に出すことだ。AIは確率的な挙動をするため、同じ「シューティングゲーム作って」でも、毎回少しずつ違うものができる。

そこで、ブラウザのタブを3つ開いて同じプロンプトを3回実行する。すると微妙に違うゲームが3つでき、中にはエラーで動かないものもあるだろう。その中からうまくいっているものを選び、それをベースに改善を始める。安野氏はこれを、雑に何度も走らせて良いものを採用するやり方だと説明し、あまり頭を使わなくても最初の出発点が高くなるので勧めている。

コツ3：要望がまとまったら最初から作り直す

最初の指示には書いていなかった「こうしたい」「ああしたい」という要望は、実際に触っているうちにどんどん出てくる。安野氏は、要望がまとまってきたら、小さなアプリケーションの場合は完全に最初から作り直すのも手だという。

これは大規模なソフトウェア開発でも同じだと安野氏は言う。プロトタイプを作って試し、方向性が見えたら、それを前提に部品の配置や構成を決め直して作り直すと、ずっと良いものになることがある。作るコストが下がったからこそ、捨てて作り直すことがしやすくなった。1ページ程度のアプリケーションなら、このやり方はとても有効だろうと安野氏は見ている。

完成したらシェアボタンで配布する

納得のいくものができたら、右上にあるシェアボタンを押す。URLが発行され、他の人に共有できる。バイブコーディングで作ったホームページやシミュレーター、ゲームを他人に遊んでもらえるので配布もしやすく、安野氏は「よくできている」と評価している。

限界に達したら前のバージョンに戻す

要望を重ねて作るものが大きく複雑になると、エラーの頻度が上がっていく。安野氏はこれを、ChatGPTだけで作れるものの限界サイズだと表現する。

どうにも立ち行かなくなったときのために、ChatGPTには前のバージョンに戻すボタンが右上に用意されている。機能を一つ足したらいろいろなものが動かなくなった、という場合は、一つ前のバージョンに戻せば、動いていた状態から再出発できる。

安野氏は、改善したつもりが他の機能が動かなくなったり品質が落ちたりすることを、ソフトウェア業界では「デグレ」（デグレードの略）と呼ぶと紹介した。本来は機能がアップグレードされていくはずが、変更によって下がってしまった状態のことだ。デグレが起きたら前のバージョンに戻し、別のプロンプトでもう一度試す。これを繰り返せば、プログラミングの知識がなくても少しずつ自分の好みのものに近づけられる、と安野氏は述べる。

第3回の課題

最後に安野氏は、LLMを使ったバイブコーディングは文字だけでできるうえ、それだけで作れるものが実はかなりあるとして、試行錯誤を勧めた。できれば人に配れる品質まで高め、自分なりに必要だと思う機能を足していき、シェアボタンで共有するところまでをエクササイズとしてやってほしいという。

そのうえで課題が出された。ChatGPT、あるいはClaudeやGeminiを使って、1ページでできる小さなアプリケーションやゲーム、自分のウェブサイトなどを作り、シェアボタンでURLを発行して他の人に見せる、というものだ。見せる相手がいなければ、動画のコメント欄に「こういうものを作ってみました」とリンクを貼ってほしいと呼びかけた。人に見てもらい評価を受けることがモチベーションになるからだという。また、何を作ればよいか思いつかない人は、コメント欄に集まったリンクを見て、こんなものまで作れるのかと参考にしてほしいと述べて、第3回を締めくくった。