バイブコーディングで東京ディズニーランドルート提案アプリを作ってみた

はじめに

生成AIは文書・画像・プログラムの自動生成、要約、翻訳、アイデア出しといったことが得意です。中でもプログラムの自動生成については、発展が目覚ましく、ユーザーの指示を元にウェブアプリを作ってくれるまでになりました。本記事では、昨今話題になっているバイブコーディングで東京ディズニーランドルート提案アプリを作った事例をご紹介します。

バイブコーディングとは

バイブコーディング（Vibe Coding）は名前の通りなんとなくの”雰囲気”をAIに伝えることで、プログラムの生成や修正をAIに任せる開発手法です。従来はウェブアプリを開発する際、プログラミングのスキルが必要でしたが、バイブコーディングでは、AIとの自然言語のやりとりだけでウェブアプリを作ることができます。ですので、プログラミングの経験が無い人もウェブアプリをつくることができます。バイブコーディングを行うには様々なサービスが出ており、v0やBolt.newですと誰でも無料で始められます（無料だと使えるトークン数の制限あり）。今回はBolt.newを使ってウェブアプリを開発してみたいと思います。

Bolt.newの使い方

上図の通り、自然言語でどんなアプリを作ってほしいのか、プロンプトを入力します。プロンプトを入力するとアプリが自動で生成される仕組みです。今回私はChatGPTを使ってプロンプトを作りました。自分で作ったなんとなくのプロンプトよりもChatGPTにどんなものを作りたいかなんとなく伝えて、おすすめのプロンプトを作ってもらう方がより良いアプリを作れると思います。

テーマパークルート提案アプリ事例

今回は東京ディズニーランドを例にアトラクションをどの順にまわると時間をかけずに済むのかわかるアプリを作ってみました。自分が今いる現在地エリアを選択し、そこからまわる予定のアトラクションを選択、その時の待ち時間（分）と優先度（１、２、３）も選択します。計算するボタンを押下するとおすすめルート順が表示されるといった仕様です。

わかったこと

今回バイブコーディングでウェブアプリを作ってみて以下のことがわかりました。

• 従来、ベテランエンジニアが0から作ると1～2週間かけてデプロイしていたようなアプリをバイブコーディングではたった数時間（今回の所要時間は3時間）で作れる
• 開発中、アプリを操作してエラーが発生すると、自動でデバックしてくれる
• 実際にアプリを使ってアトラクションをまわってみた結果、距離感やだいたいかかる時間がわかり参考になった（まったく使い物にならないわけではなかった）
• バイブコーディングではアプリを作ることはできるか、ユーザーの期待している動作をするかは触ってみないとわからないため、最終的な動作確認は必ず人間が行わなければならない

おわりに

今回、バイブコーディングでウェブアプリを作ってみて、最低限使えるものは作れることがわかりました。プログラミングの知識を問わないため、今後各々が業務効率化のためアプリを作る時代が来るかもしれません。