バイブコーディングでアプリを作成し、公開するまでの流れと注意事項についてご紹介
目次
バイブコーディングの基礎~デバイスと使用するAiの選択~
バイブコーディングとは、自然言語を用いてAiに指示出しをしプログラムを作成してもらうことを言います。バイブコーディングを行うことは、デバイス問わず、またブラウザ版でもアプリ版でも行うことができます。しかし、作ったアプリをプレビュー(実際に動かす)ためにはデバイスや使用するAiによって動かせるプログラミング言語のやデバイスによって制限があります。
codex,claudeは簡単にプレビューできます。しかし、使用できるプログラミング言語やAPIに制限があるため、アプリ作成時やうまくプレビューできなかった時などにAiに質問するとスムーズに問題解決することができます。
【図解】バイブコーディングの流れ~Webアプリ作成編~
※1 ブラウザ版claudeでは、手動でコピペ。VS Code拡張機能（Claude Dev / Cline)やCursorを使う場合はVSCode上のコードをそのまま書き換えてくれる
vibe codingの基本「MVP」と「アジャイル」
Webアプリ開発の全工程（2枚目の図）を見ると、「1. 要件定義」から「6. 運用・保守」まで直線的に進むように見え、初心者にはハードルが高く感じるかもしれません。しかし、vibe codingなら大丈夫です。
ここで鍵となるのが**「MVP」と「アジャイル開発」**という考え方です。vibe codingでは、2枚目の図で下線が引かれている「3. 開発(実装)」と「4. テスト」の工程を、AIの力を借りて超高速で繰り返します。
1. MVP（Minimum Viable Product）で小さく始める
「MVP」とは、必要最小限の機能だけを持った「とりあえず動く試作品」のことです。
いきなり完璧な「1. 要件定義」や「2. 設計」を行って巨大なアプリを作ろうとすると、途中で挫折しやすくなります。vibe codingでは、まずは「ボタンを押したら文字が出るだけ」のような小さなMVPを目指します。 1枚目の図の**「01. 仕様書作成」**で、そのMVPのシンプルな機能を自然言語でAIに伝達（プロンプト入力）するところから、すべてがスタートします。
2. アジャイル開発でぐるぐる回して育てる
「アジャイル（Agile）」とは「素早い」という意味で、小さな開発サイクルを何度も回しながら、少しずつアプリを完成させていく手法です。
2枚目の図**「AIを活用したシステム開発サイクル」**の円そのものが、アジャイル開発の流れを表しています。
- 01. 仕様書作成: AIに「ここをこうしたい」と自然言語で指示を出す。
- 02. AIプログラミング: AIが瞬時にコードを書いてくれる。
- 03. 環境の更新: プレビュー画面やVSCodeなどの開発環境に新しいコードを反映させる。
- 04. テスト: 実際に動かしてみて、指示通りに動くか、他の部分が壊れていないか確認する。
テストをして「もう少しデザインを変えたい」「新しい機能を追加したい」と思ったら、また**「01」**に戻ってAIに指示を出します。
「MVP」と「アジャイル」まとめ
vibe codingとは、**「MVP（小さな試作品）からスタートし、AIと一緒にアジャイル（4つのステップの高速回転）でアプリを育てていく」**というスタイルです。このサイクルをぐるぐると回し続けることで、初心者でも迷子にならずに、自分だけのWebアプリを作り上げることができます。