AIに任せる「Vibe Coding」に潜む罠:新人エンジニアとAIの対話物語

ChatGPTのDeep Research(AI)での出力結果をそのまま掲載しています。ChatGPTのDeep Researchはハルシネーション(誤った情報の生成)が少なくなるよう調整されていますが、あくまで参考程度に読んでください。当記事は検索エンジンに登録していないため、このブログ内限定の記事です。

はじめに – Vibe Codingとの出会い

ある春の日、新米エンジニアのヒロシは噂の「Vibe Coding」に胸を躍らせていました。Vibe CodingとはAIに自然言語で指示を出すだけでコードを書いてもらうという新しいプログラミング手法です (Vibe Codingとは?—AIが主導する新時代のプログラミング|生成AI活用研究部)。ヒロシは「これで自分もコードを書かずにアプリが作れるかも!」と期待に満ちています。そんな彼のもとに、頼れる先輩エンジニアのサキが訪れました。

ヒロシ:「先輩、最近流行りのVibe Codingって知ってます?僕でも簡単なゲームとか作れるらしいんです!」
サキ:「もちろん知ってるわ。AIがコードの大部分を書いてくれるんでしょう?まさに魔法みたいよね。」

ヒロシは早速ChatGPTにログインし、あるアイデアを思いつきました。それは「ピザ屋ゲーム」。お客さんから注文が来たらピザ生地に好きな具材をドラッグ&ドロップで載せていくシンプルなゲームです (Vibe Codingの限界|shi3z) (Vibe Codingの限界|shi3z)。プログラミング初心者の彼でも思いついたままAIに指示すれば作れそうです。

ピザ屋ゲームをAIで作成 – 華々しい成功?

ヒロシはChatGPTにこうお願いしました:

「HTML/CSS/JavaScriptで、ピザ生地に具材をドラッグ&ドロップで載せて得点を競う簡単なゲームを作ってください。HTML、CSS、JavaScriptのコードをそれぞれください。」

するとChatGPTは勢いよくコードを生成し始めました。しばらくして画面上にはHTML、CSS、JavaScriptのコード一式が出力されます。ヒロシはそのコードを自分のPCで実行してみました。

AIの支援で「ピザ屋ゲーム」のプロトタイプがあっという間に完成したかのように見えた。
(300+ Free Programmer & Coding Images - Pixabay) AIの支援で「ピザ屋ゲーム」のプロトタイプがあっという間に完成したかのように見えた。

ヒロシ:「すごい、本当にコードを書いてくれた!ゲーム画面も表示された!」
サキ:「ちゃんとドラッグ&ドロップで具材を配置できるみたいね。初心者が作ったとは思えない完成度じゃない?」 (Vibe Codingの限界|shi3z)

画面にはピザ生地の画像とトマトやチーズなどの具材アイコンが並んでおり、ヒロシがそれらをドラッグするとピザの上に載せることができます。見た目にはそれっぽいゲームがすぐに出来上がり、ヒロシは大喜びです。

しかし、よく見ると動作にいくつか怪しい点がありました。例えば、具材を素早く連続でドラッグすると途中でドロップが反応しなかったり、スコアのカウントが正しく増えないことがあります。さらに、ピザを完成させてもリセットする機能が無く、次の注文に対応できません。

ヒロシ:「あれ…おかしいな。トマトを何度も置くとスコアが増えなくなる。バグかな?」
サキ:「試作品だし、まだバグがあるのかもね。でも大丈夫、AIに頼めばすぐ直してくれるわよ。」

バグとの闘い – AI任せのデバッグ地獄

ヒロシはChatGPTにゲームの不具合を報告し、修正を依頼してみることにしました。

「スコアが正しく増えません。バグを修正してください。」
「ゲームをリセットする機能を追加してください。」

ChatGPTは再びコードを生成し直し、修正版を提示しました。ヒロシはそのコードを差し替えて実行します。今度はスコアは正しく増えるようになりましたが、別の問題が発生します。リセット機能を追加したことで、新しいゲーム開始時に前回のデータが残ってしまい、時々画面に古い具材が表示されたままになるのです。

ヒロシ:「また変な動きが…リセットしても前のピザの具材が残っちゃう!」
サキ:「何度かAIに修正をお願いするしかないわね。こういうやりとりはよくあることよ。」

実は「AIにプログラムを書いてもらうと、よくプログラムのエラーに出会います」 (ReplitとChatGPTを使ってブラウザで動作する簡単なゲームを作成しよう! | ITスキルアップ相談室)。最初の出力が完璧に動くことは稀で、「エラーが出たらAIに伝えて修正を依頼」→「さらに別のエラーが出たらまた修正」といったループを繰り返すのが現状です (テスト駆動型AIコーディングでバイブコーディングを超える)。ヒロシもまさにその典型的な流れにハマっていました。

AIが生成したコードには「ERROR」の文字が…エラー修正の連続で初心者は振り回される
(Download Error, Computer, Computers. Royalty-Free Stock Illustration Image - Pixabay) AIが生成したコードには「ERROR」の文字が…エラー修正の連続で初心者は振り回される。

ヒロシ:「ChatGPTに何度も訊いて、ようやくバグを潰したけど…なんだかコードがどんどん複雑になってきたような…?」
サキ:「そうね、AIが修正を重ねていくと、コードは膨れ上がりがちだわ。内容を全部理解するのは大変になってくるでしょう?」

ヒロシは出来上がったコードを眺めました。しかし最初に生成されたコードより行数も増え、ロジックも複雑になっており、彼には全てを追うのは難しく感じられました。変数の数も増え、エラーチェックらしき処理も追加されていますが、どこで何をしているのか直感的に掴めません。AIが生成したコードは他の開発者から見ると読みにくい場合があるとも言われています (Vibe Codingとは?—AIが主導する新時代のプログラミング|生成AI活用研究部)。ヒロシ自身も「このコード、自分で書いたわけじゃないから読み解けない…」と不安になってきました。

ヒロシ:「先輩、このコード正直よくわからないです…。とりあえず動いてはいるみたいだけど…」
サキ:「ヒロシ君、ちょっとこのコード私にも見せてくれる?」

サキはコードを確認すると、いくつか気になる点に気付きました。例えばエラー処理(エラーハンドリング)がほとんど無く、想定外の操作をするとすぐプログラムが止まってしまう可能性があります。またデータ構造の使い方も少し冗長で、「もっと簡潔に書けそうだけど…AIがとりあえず動く方法で書いたのね」と感じました。

サキ:「ヒロシ君、このコード、エラー処理が弱いわね…。例えば、ドラッグ中に急にウィンドウを閉じたりしたらどうなるかしら?たぶん何も対策してないから不安定になると思う。 (Coding with AI: Instant Gratification, Followed by Hours of Debugging : r/ArtificialInteligence)それから状態管理も雑かな。前のゲーム状態が残っちゃう不具合、まだ潜んでいるかもしれない。」
ヒロシ:「確かに…僕にはそこまで頭が回ってなかった…。AIも教えてくれなかったですね。」

サキは経験上、AIが生成したコードには「抜け」が多いことを知っています。AIは与えられた指示に沿ってそれらしいコードを出力しますが、それがすべてのケースで正しく動くとは限りません。「AI生成コードは見た目動いてもバグや脆弱性を含むことがある」という指摘もあるくらいです (Vibe Codingとは?—AIが主導する新時代のプログラミング|生成AI活用研究部) (Coding with AI: Instant Gratification, Followed by Hours of Debugging : r/ArtificialInteligence)。今回のようにエッジケース(隅々のケース)やエラー処理をAIはしばしば見落とすため、後から重大な不具合が見つかることもあります (The Biggest Dangers of AI-Generated Code - Kodus)。

実際、別のエンジニアがAIで動画処理コードを生成した際、一見うまく動いていたのに最後の数秒の映像を書き出せていないという「見えにくいバグ」が潜んでおり、原因はAIがデコーダをフラッシュ(flush)し忘れていたことだったそうです (Coding with AI: Instant Gratification, Followed by Hours of Debugging : r/ArtificialInteligence)。表面的には動作しているように見えても、こうした細かな部分でAIはミスを犯しやすいのです。

「とりあえず動く」罠 – 初心者ゆえの落とし穴

ピザ屋ゲームは一応遊べる形にはなりました。しかし、ヒロシは自分でコードをゼロから書いていないため、どこをどう修正すればよいか自力では判断がつきません。「なんとなくAIに頼り続ける」しかできない状態で、これはまさにVibe Codingの難しさの本質でした (Vibe Codingの限界|shi3z)。

ヒロシ:「正直、僕コードの中身ほとんど理解できていないんです…。追加機能を入れたいけど、自分じゃ怖くていじれない。」
サキ:「うーん、それだと保守や拡張がつらいわよね。実はそれがVibe Codingの典型的な問題点なの。 (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)」

サキはヒロシにVibe Codingにまつわる議論を教えてくれました。AIにすべて任せてアプリを作ろうとしても、完全に動くものを丸ごと生成するのは難しいということです (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)。特にヒロシのようにプログラミングの知識がない人が最初から全てAIに頼もうとすると大抵は失敗するとも言われています (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)。なぜなら、AIが出力したコードのどこに問題があるかを自分で判断・修正できないからです。

サキ:「ChatGPTに『このまま動くアプリを全部作って』って頼んでも、たぶん無理なの。 私も試したことがあるけど、大抵途中でコードが途切れたり、”ここにロジックを書く”みたいなコメントだけ残して肝心の処理が抜けてたりしてね (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET) (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)。」
ヒロシ:「僕のゲームでも、最初スコア処理とか抜けてました…確かにありました、// TODO: implement score logicみたいなのが。」
サキ:「そうでしょう?AIはそこまで面倒見てくれないのよ。アプリ全体の構成細かな設計は人間が考えないと無理ね。 (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)」

実はサキ自身、以前にChatGPTにMac用のユーティリティアプリを一から作らせようと詳しく指示を書いて試したことがありました。しかし、出てきたコードは大量の断片で、どのファイルに何を書くべきかの構成も示されず、重要な処理が「ここにロジックを書くこと」とコメントだけで省略されていたのです (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET) (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)。結局、そのプロジェクトは自力で仕上げる羽目になり、「何も知らない状態でAIに全部やらせようとしても失敗する」と痛感したそうです。

ヒロシ:「じゃあ、初心者はAIでプログラミングなんてできないんでしょうか…?」
サキ:「そんなことはないわ。AIは部分的なサポートとしてとても有用よ。 (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)たとえば、特定の機能だけを作ってもらって、それを組み合わせるようにするとかね。」

サキによると、ChatGPTはプロの補助輪のように使うのがコツとのこと。全自動運転の車ではなく、高性能なカーナビくらいに思えばいいといいます。「ここにメニューを表示するルーチンを書いて」と頼めば的確なコードが出てくるし、自分でコードを書ける人が使えば生産性が格段に上がる場面も多い (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)。しかし、コードを書く経験が全くない人がAIに全部任せると、結局は制御不能になってしまう (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)。ヒロシのケースでも、彼が基本的なWeb開発知識を持っていれば、AIへの指示や結果の修正がもっとスムーズだったでしょう。現状ではAIに振り回され、時間を無駄にしてしまっていました。

実際、ある専門家は「AIは良いエンジニアをさらに良くし、悪いエンジニアをさらに悪くする」と言っています (AI Code Generation- Should I use it or stay away from it? - Reddit)。これは、スキルの高い人がAIを使えば細部の自動化によって効率が上がるけれど、スキルの低い人が使うと基本を学ぶ機会を逃し、結果的に非効率になりかねないという意味です。ヒロシも今回、基礎を飛ばして楽をしようとした結果、かえってバグ修正に多くの時間を割く羽目になりました。

典型的な落とし穴 – 何が難しいのか?

ここで改めて、初心者がVibe Codingで陥りがちな典型的な落とし穴を整理してみましょう。

1. エラーハンドリング(エラー処理)の欠如

AIが生成したコードは、一見正しく動いているように見えてもエラー処理が甘いことが多々あります (Coding with AI: Instant Gratification, Followed by Hours of Debugging : r/ArtificialInteligence)。ユーザーの予期しない操作やネットワークの障害、予想外の入力値など、正常な流れから外れたときの対応が書かれていません。そのため、少しイレギュラーな状況になるとすぐにアプリが落ちたり不正な挙動を示したりします。

ヒロシのピザ屋ゲームでも、具材を置く途中でキャンバスをクリックし直したらスコア処理が狂う、といった問題が残っていました。これはエラーとは少し違いますが、「想定外の操作」に対する備えが足りない例です。経験豊富な開発者であればエラー処理や例外ケースを考慮しますが、AIは指示されなければそこまで気が回りません。AIはコードをテストせず提示するので、コーナーケースやエラー処理が完全に見落とされがちなのです (The Biggest Dangers of AI-Generated Code - Kodus)。

2. データ構造・コード品質の問題

AIは膨大な学習データからもっともらしいコードを作りますが、それが常に最適解とは限りません。ときには本質から外れた冗長な実装や、初心者には難解な高度なテクニックを使ったコードを生成することもあります。

例えば、クラス構造やデザインパターンを初心者が理解していないのにAIが勝手に用いてしまい、コードがブラックボックス化するケースがあります (The Good and Bad of AI Tools in Novice Programming Education)。実際にある調査では、学生の45%が「AIが授業で習っていない高度な関数や構文を提示して困惑した」と報告しています (The Good and Bad of AI Tools in Novice Programming Education)。ヒロシの場合も、AIが内部でかなり複雑なDOM操作やイベント管理を行っており、彼にはその意図を理解できませんでした。

また、コードの品質にもばらつきがあります。AIは動けば良いと判断したコードを出すことがあり、可読性や保守性は二の次です。そのため、後から人間が見ると「なんでこんな書き方を?」と思うような部分も出てきます。上記の学生の調査でも34.2%のチームが「AIのせいでコードの質が低下した」と感じているという結果がありました (The Good and Bad of AI Tools in Novice Programming Education)。これは、AIの提案通りに書いた結果、無駄の多いコードになってしまったり、統一感の無いスタイルが混在したりすることを指しています。

3. 状態管理や設計の不備

アプリが大きくなると、状態管理(ステート管理)の重要性が増します。ユーザーの進行状況、UIの表示状態、データの保存と読み込み…複数の状態が絡み合う中で一貫性を保つ必要があります。しかし、AIは文脈を理解してコードを生成するとはいえ、長い対話の中で徐々にコードを修正していくと、前後のつじつまが合わなくなることがあります。

ヒロシのゲームでリセット機能を後付けした際にも、最初の設計になかった「ゲーム状態の初期化」が不完全でした。その結果、前のゲームの残骸が残るバグが発生しました。これはAIが一貫した設計図を持たず、その場その場でコードを継ぎ足したために起きた破綻です。AIの出力はプロンプト次第で変わるため、同じ内容を尋ねても毎回少し違うコードになることもあり、整合性を取りにくいのです (The Good and Bad of AI Tools in Novice Programming Education)。

さらに、ChatGPTのようなLLMは一度に保持できる文脈(コンテキスト)の長さに限界があります。長いコードや複数ファイルにまたがるプロジェクトになると、AIが前半で作った変数や関数名を後半では忘れてしまい、別の名前で類似機能を作ってしまうといった事態も起こりえます。これではUI/UXの一貫性どころか、コード自体の統一性も崩れてしまいます。

4. デバッグの困難さと時間浪費

コードにバグはつきものですが、AIが書いたコードをデバッグするのは、自分で書いた場合より難しいと感じる人が多いようです。ある開発者は「AIが吐き出したコードを直すくらいなら、初めから自分で書いたほうが早い」と不満を述べています (Why AI Code Generation Feels Useless — How to Make It Work Like a 10x Engineer | by Pramod Kumar | Mar, 2025 | Medium)。また別の開発者は、「AIが即座にそれっぽいコードを出してくれるときは瞬間的な快感があるが、結局その後に何時間もデバッグするハメになる。まるでジェットコースターみたいだ」と表現しています (Coding with AI: Instant Gratification, Followed by Hours of Debugging : r/ArtificialInteligence)。

ヒロシも痛感したように、AIコードのデバッグは「AIをデバッグしているようなものだ」と感じるほど手間がかかります (Why AI Code Generation Feels Useless — How to Make It Work Like a 10x Engineer | by Pramod Kumar | Mar, 2025 | Medium)。原因を突き止めようにも、コードの意図を完全には把握できていないため推理ゲームのようになり、時間だけが過ぎていきます。実際、「AI補助でコーディングした人の16.4%がバグ特定と修正に無駄に時間を費やしてしまった」と回答しています (The Good and Bad of AI Tools in Novice Programming Education)。ヒロシも本来コーディングそのものに使えたはずの時間の多くを、バグとの戦いに割くことになりました。

ヒロシ:「最初はすぐ形ができて『人類の時代終わった!AIすげえ!』って興奮したんですけど…今はなんだか疲れちゃいました。」
サキ:「最初は手間が省けて楽しいけど、あとでデバッグ地獄…ありがちね (Coding with AI: Instant Gratification, Followed by Hours of Debugging : r/ArtificialInteligence)。AIは銀の弾丸じゃないって、本当にそう思うわ。」

ヒロシはしみじみとうなずきました。「コードは最初からバグが少なく書きたい。デバッグに何時間も費やすのはもう懲り懲りだ」と (Coding with AI: Instant Gratification, Followed by Hours of Debugging : r/ArtificialInteligence)実感したのです。AIによる自動コーディングは、決して「人間が何もしなくていい魔法のツール」ではなく、むしろ使いこなすには人間側のスキルと工夫が必要だと身をもって学んだのでした。

対話を終えて – 学んだ教訓

ヒロシ:「先輩、僕Vibe Codingをなめてました…。簡単にできるのは最初の70%だけで、残り30%の詰めがすごく大変だった感じです (The 70% problem: Hard truths about AI-assisted coding)。」
サキ:「いい経験になったでしょう?AIに全部頼るのではなく、あなた自身もコードを理解して協調していくことが大事なのよ。」

ヒロシは今回の体験で、以下のような教訓を得ました。

  • AIは補助輪:最初の試作品づくりには便利だが、最終的な品質向上や細かな調整は人間の出番。特に初心者ほどAI任せにしすぎないこと。
  • コードを読む力の重要性:AIが書いたコードでも、自分で理解し直す努力が必要。何が書かれているか読めなければバグも直せない。
  • 段階を踏む:いきなり大作を狙わず、小さな部品ごとにAIに頼り、それらを組み合わせるようにする。大きすぎる要求はAIが混乱し失敗する (How to use ChatGPT to write code - and my favorite trick to debug what it generates | ZDNET)。
  • テストと検証:AIの出力を鵜呑みにせず、自分で様々な入力や操作を試してみる。想定外のケースでどう動くか確認し、不具合があれば早めに対処する。

サキは付け加えます。「最終的にコードと向き合うのは人間である以上、AIと上手に対話して誘導していくスキルが必要よ」。これは単に日本語でお願いするだけでなく、時には疑問を持ち、時には自力で手を加える姿勢です。先述の学生調査でも、「AIツールへの過度な依存(75%)」が大きな懸念として挙げられていました (The Good and Bad of AI Tools in Novice Programming Education)。自分の頭で考えることを放棄してしまうと、結局遠回りになるという皮肉な結果が待っているのです。

まとめ – Vibe Codingとどう付き合うか

最後に、今回の物語を通じて見えてきたVibe Codingのポイントをまとめます。

ヒロシは今回の経験を踏まえ、まずは自分でも簡単なプログラムを書いてみる決心をしました。その上で、AIにはサポート役として参加してもらうつもりです。「魔法のツールだと思ってたけど、AIも使いようですね」と笑うヒロシに、サキはうなずいて言いました。「ええ、AI時代のプログラミングは、AIと人間の二人三脚よ。上手に付き合って、これからも成長していきましょう!」

参考文献