アプリ開発は「誰でもできる」　バイブコーディングはどう使う?

対話形式のやりとりを通じてバイブコーディングを学べる書籍『やりたい!ができる 生成AIでアプリづくり 仕事&日常がもっとラクになる』

「バイブコーディング」という言葉があります。簡単にいえば生成AIと対話しながらWebサイトやソフトウェアなどを開発する手法のことで、バイブ、つまり“感覚的なノリ”で、必要なコードその他を生成してしまおう、という昨今のムーブメントでもあります。

これまで開発といえばプログラマーやITエンジニアが手掛ける専門領域でしたが、バイブコーディングによって、その裾野が急速に拡大しています。「やりたい。だけど難しそう」と感じていた人でも、気軽にチャレンジできる環境が整ったのです。

この記事では、2025年10月30日に発売の書籍『やりたい!ができる 生成AIでアプリづくり』の紹介を兼ね、バイブコーディングの実演をチラ見せします。

とりあえず作ってみる!

今回は、本書でも紹介しているBoltというAIツールを使って実際に英単語クイズWebアプリを作ってみます。ブラウザでbolt.newを開き、サインインしたらプロンプトを入力。そのプロンプトがこちら(↓)。ちなみにこのプロンプトも書籍内で使っているのと同じものです。

英単語アプリを作成したいです。日本語が出てきて、その日本語に対する正しい英単語を3択形式で選択する、もしくは英単語が出てきて、3択から正しい日本語を選択するみたいな形でクイズを出してください。全体で10問ぐらいほしいです。毎回ランダムな単語を出すようにしてください。あとはUIの設計として、進捗具合と正解の数、最終的な結果を表示してほしいです。最後の結果の画面はおしゃれな感じにして、そこのスクリーンショットを取れるようにしてください。

そして数分待つと、完成したアプリが表示されます。

画面の右側にアプリがプレビューされる

それっぽいものができていますね。実際に遊んでみると、プロンプト通りに動作しているようです。

クイズを始めると、3択で日本語→英語、英語→日本語の問題が出題される。上部には進捗も表示されている

最後の結果画面では、プロンプトで指示した通りスクリーンショット機能も備わっていて、ボタンをクリックすると動作しました。

10問すべてに正解した場合の結果画面。スクリーンショット機能も正常に動いた

間違えた場合も、意図通りの結果画面になります。

全問正解にならなかった場合の正解数なども正しく表示される

ただ、[もう一度挑戦する]ボタンから何回かチャレンジしてみても、どうやら同じ単語が繰り返し出題されているようでした。この、一見すると完成していそうで、実際は不完全であるといったことが、生成AIでのアプリ開発では「あるある」なのです。

技術は不要。必要なのは根気と情熱

冒頭で触れた書籍『やりたい!ができる 生成AIでアプリづくり』の中でも、同じような壁にぶつかって、トライ&エラーを繰り返してアプリを完成させていきます。意図通りに動かない場合も生成AIに尋ねれば解決策を提示してくれるのがバイブコーディングのよいところですが、知っておくと役立つテクニックもあります。

たとえばBoltに修正指示を出しても一発で直らない場合は、コーディングに強いClaudeに修正点を洗い出させてみたり、スクリーンショット画像からエラーを分析させてみたり、といった技を駆使すると、よりスムーズに解決できます。

ちなみにBoltでは生成されたアプリのフォルダ構成やソースコードを確認できます。vocabulary.tsを見ると、単語リストが生成されており、ここにある単語が繰り返し出題されていることがわかります。書籍内では、こういった問題を解決し、さらに機能を追加してWebアプリとして公開するプロセスを丁寧に説明しています。

Boltでソースコードを確認したところ

AIツールは日進月歩で進化しているので、そのとき上手く生成できなかったアプリでも、次のタイミングでチャレンジするとあっさり完成することがあります。また、同じプロセスで制作しても、まったく同じ結果になることはありません。書籍などでベストプラクティスとして紹介されているものは、あくまで1つの体験であり、成功を保証するものではないのです。成功に必要なのは、根気強さと、やりたい!という情熱です。

バイブコーディングに興味をもった方は、ぜひ書籍『やりたい!ができる 生成AIでアプリづくり』を読んでみてください。その醍醐味を味わえるはずです。