僕は最初、バイブコーディングでReactアプリを作ることを甘く見ていた。「プロンプトを打てばReactが出てくるなら、フロントエンド開発の知識は要らないだろう」と。2025年6月、受講者向けのダッシュボードをBolt.newで作った時、その考えが間違いだと気づいた。
バイブコーディングでReactアプリを作ること自体は簡単だ。結論から言うと、基本的なアプリなら30分で動くものが完成する。ただし「動く」と「実用に耐える」の間には大きな溝がある。その溝を埋めるのがフロントエンド開発の基礎知識だろう。
ダッシュボードは完成した。見た目もそれなりに整っていた。だが状態管理がめちゃくちゃで、データの更新が画面に反映されないバグが多発する。Reactの「state」と「props」の概念を知らなかったために、AIへの修正指示もピント外れになってしまった。
知っておくだけで、選択肢が変わる。
- バイブコーディングでReactアプリを作る具体的な手順
- v0・Cursor・Bolt.newの使い分け——React開発に最適なツール
- 最低限知っておくべきReactの基礎概念3つ
- AIにReactコードを書かせる際のプロンプトのコツ
- 実際に作れるReactアプリの具体例5つ
バイブコーディングでReactアプリを作る手順
Reactアプリの開発は、ツール選択から始まる。バイブコーディングでReactを扱う場合、3つのツールが候補に挙がった。
| ツール | React対応力 | 適した場面 |
|---|---|---|
| v0 | ◎ | UIコンポーネント単体の生成。shadcn/ui + Tailwind CSSベース |
| Bolt.new | ◎ | Reactアプリ全体の生成。プレビュー付きで即確認できる |
| Cursor | ◎ | 既存プロジェクトへの機能追加。コードベース全体を参照して編集 |
僕のおすすめは、v0でUIの雛形を作り、Bolt.newまたはCursorでアプリ全体を組み立てる二段構えの方法。この組み合わせが現時点で最も効率的だった。
React開発で知っておくべき3つの基礎概念
バイブコーディングでReactアプリを作るにあたり、コードを書く必要はない。だが「仕組みの理解」がないと、AIの出力を修正する指示が出せなくなる。最低限この3つは押さえておくべきだろう。
Reactではページ全体を小さな部品（コンポーネント）に分けて構築する。ヘッダー、サイドバー、カード、ボタン——それぞれが独立した部品。この概念を知っているだけで、AIに「ヘッダーコンポーネントを修正して」「カードコンポーネントにボタンを追加して」と具体的な指示が出せるようになった。
ボタンを押したら表示が変わる、入力した文字がリアルタイムで反映される——こうした動的な振る舞いはstateで管理されている。stateが変わるとReactは自動で画面を再描画する。この仕組みを知らないと、「ボタンを押しても画面が変わらない」バグの原因をAIに正確に伝えられないのではないだろうか。
親コンポーネントから子コンポーネントにデータを渡す仕組みがprops。たとえばユーザー一覧ページ（親）からユーザーカード（子）に名前やアイコンのURLを渡す。AIが生成するコードでpropsの受け渡しにバグがある場合、「このpropsが子コンポーネントに渡っていない」と指摘できれば一発で修正できた。
この3つの概念を理解するのに必要な時間は1〜2時間程度。YouTubeの入門動画で十分。コードの文法を覚える必要はなく、「Reactはこういう仕組みで動いている」というイメージが持てれば、バイブコーディングの精度が格段に上がった。
AIにReactコードを書かせるプロンプトのコツ
バイブコーディングでReactアプリを作る時、プロンプトの書き方が出力を左右する。React開発に特化したプロンプトのコツを3つ共有する。
1つ目は、使用ライブラリを明示すること。「React + TypeScript + Tailwind CSS + shadcn/ui」のようにスタックを指定する。指定しないとAIが勝手にMaterial UIやChakra UIなど別のライブラリを使い始め、プロジェクト内でスタイルが混在した。
2つ目は、コンポーネント単位で指示を出すこと。「ダッシュボードページを作って」より「KPIカードコンポーネント、売上グラフコンポーネント、最新注文リストコンポーネントを含むダッシュボードページを作って」の方が精度は高かった。
3つ目は、レスポンシブ対応を明示すること。「モバイル対応で」と一言入れるだけで、AIはメディアクエリやTailwindのレスポンシブ記法を含むコードを出力する。これを忘れるとPC表示にしか対応しないコードが返ってきた。
バイブコーディングで作れるReactアプリの実例
実際にどんなReactアプリが作れるのか。僕や受講者が作った実例を5つ紹介する。
バイブコーディングでは難しいReactアプリ
- リアルタイム通信（WebSocket）を多用するチャットアプリ
- 複雑なアニメーションが必要なゲーム
- 大量データをリアルタイムで可視化するBI系ダッシュボード
バイブコーディングで十分に作れるReactアプリ
- タスク管理アプリ（カテゴリ分け・期限設定・ドラッグ&ドロップ）
- ポートフォリオサイト（プロフィール・スキル・実績一覧）
- ECサイトのフロントエンド（商品一覧・カート・決済画面）
- 社内ツール（勤怠管理・出席確認・アンケートフォーム）
- ブログ・メディアサイト（記事一覧・カテゴリ・検索機能）
受講者で最も印象的だったのは、プログラミング未経験の方が2日でECサイトのフロントエンドを完成させたケース。商品一覧、カート、決済画面まで。バックエンドはSupabaseで、こちらもバイブコーディングで構築した。
React × バイブコーディングでよくあるトラブルと対処法
Reactアプリをバイブコーディングで作る際に、受講者が頻繁にぶつかるトラブルを3つ挙げる。
AIに「直して」を繰り返してもビルドエラーが解消しない場合、大抵は依存パッケージのバージョン不整合が原因。「package.jsonを表示して」とAIに頼み、パッケージのバージョンをチェックするのが最初の一手。
ブラウザの開発者ツール（F12）でコンソールエラーを確認する。エラーメッセージをそのままAIに渡せば、大半は解決した。Reactの場合、コンポーネントのimportミスが最も多い原因だった。
AIが生成したCSSクラスが競合しているケース。「Tailwind CSSのユーティリティクラスだけを使ってスタイリングして。カスタムCSSは使わないで」と指示することで、スタイルの競合を防げた。
フロントエンド開発の新常識——Reactとバイブコーディングの未来
2026年のフロントエンド開発は、「全部手書き」でも「全部AI任せ」でもない地点に落ち着きつつある。AIがコードの8割を書き、人間が設計と品質管理を担う。この分業がReact開発の新しい標準になりつつあった。
僕の講座では、Reactの概念理解→v0でUI生成→Bolt.newでアプリ化→Cursorで仕上げ、という4ステップを教えている。この流れなら、未経験者でも1週間でReactアプリを完成させられた。
- バイブコーディングでReactアプリは30分で動くレベルまで作れる
- v0でUI生成→Bolt.newまたはCursorでアプリ全体を組み立てる流れが最も効率的
- コンポーネント・State・Propsの3概念は最低限理解しておくべき
- プロンプトでは使用ライブラリの指定、コンポーネント単位の指示、レスポンシブ対応の明示が重要
- タスク管理やECサイト等、多くのアプリがバイブコーディングで実用レベルに作れる
- AIが8割書き、人間が設計と品質管理を担うのが2026年のフロントエンド開発の新常識
Reactは難しいという先入観を持っている人が多い。でもバイブコーディングがその敷居を大きく下げた。まずは1つ、簡単なアプリを作ってみてほしい。
