1つのプロンプトからReactアプリを作る方法

2026年7月17日更新 — 検証済みプラットフォームデータと現行のモデルラインナップで刷新。

1つのプロンプトからReactアプリはどう作るのか?

完全な答え:アプリの具体的な説明 — レイアウト、ページ、機能、データの形、色 — をVULKに入力します。プロンプトは16以上のAIモデルのいずれか(デフォルトはClaude Sonnet 5;切り替え可能)に送られ、正しいReactプロジェクト構造を強制するエンジニアリングされたシステムプロンプトに包まれます。モデルは計画をストリーミングし、それからファイルを1つずつ生成します:ルーティング、コンポーネント、状態、リアルなモックデータを備えたVite + React + TypeScript + Tailwindプロジェクトです。アプリはサーバーサイドでコンパイルされ、30〜90秒でホットリロード付きのライブプレビューにレンダリングされます。フォローアッププロンプトで反復し、Deployをクリックすれば、Cloudflare PagesのライブURLが手に入ります。

「速い」を信仰で受け入れる必要はありません:11,355の生成プロジェクトにわたり、登録から最初の動くアプリまでの時間の中央値は47秒、プロンプトの中央値はわずか364文字(約60語)、ビルド会話の中央値は4メッセージです(VULKプラットフォームデータ、2026年7月)。React + Viteはプラットフォームの全アプリの80.5%が出荷する形です。このガイドは、その4メッセージを最大限生かす方法をカバーします。

プロンプトを入力すると実際に何が起きるのか?

AIコードビルダーを使ったことがなければ、これは期待次第で魔法にもナンセンスにも見えるでしょう。だから種明かしをさせてください。

作りたいアプリの説明を入力します。VULKはそれを16以上のAIモデルのいずれか(どれかはあなたが選ぶ)に送ります。正しいReactプロジェクトの構造化をモデルに教える、注意深くエンジニアリングされたシステムプロンプトに包んで。モデルは計画をストリーミングで返し、ファイルを1つずつ生成します。VULKはそれらのファイルをリモートサーバーでコンパイルし、動いているアプリをプレビューのiframeにレンダリングします。全プロセスは複雑さに応じて30〜90秒です。

結果はスキャフォールディングではありません。ボイラープレートでもありません。ルーティング、コンポーネント、状態管理、Tailwind CSSスタイリング、リアルなモックデータを備えた完全なプロジェクト — プレビューし、反復し、デプロイする準備ができたものです。

VULKのReact出力は何が違うのか?

プロンプトの話に入る前に、VULKのReact生成のために私が下した技術的な選択を説明したいと思います。重要だからです。

Create React AppではなくVite。 CRAは事実上放棄されています。Viteはモダンな標準です — 速いビルド、優れたツリーシェイキング、ネイティブESMサポート、そして本当にコードを最適化するプロダクションビルド。VULKで生成されるすべてのReactプロジェクトはViteをビルドシステムに使います。

デフォルトでTypeScript。 プラットフォームで生成されるものの3分の2は型付きです:生成された124,755のコードファイルの65%がTypeScript/TSX(VULKプラットフォームデータ、2026年7月)。型付き出力は、AI生成エラーの一群をランタイムではなくコンパイル時に捕まえます。

デフォルトでTailwind CSS。 ユーティリティファーストのCSSは、生成コードがポータブルでカスタマイズ可能で、コンポーネントライブラリのデザインシステムに依存しないことを意味します。フォローアッププロンプトでどんな視覚要素も変えられます。

正しいプロジェクト構造。 VULKはすべてをApp.tsxに放り込みません。ルートコンポーネント用のsrc/pages/、再利用可能なUI用のsrc/components/、モックデータ用のsrc/data/、そしてリクエストしたカラースキームのtailwind.config.jsが手に入ります。平均的な生成プロジェクトは20.7ファイル、約1,500行のコード — モノリスではなく、小さく焦点の合ったファイルの集まりです(VULKプラットフォームデータ、2026年7月)。

プロダクショングレードの依存関係。 ルーティングにReact Router、チャートにRecharts、アイコンにLucide React。おもちゃのライブラリではありません。プロのReact開発者が実際に使うものです。

効くプロンプトはどう書くのか?

プロンプトの質が出力の質を直接決めます。この時点で何千もの生成プロジェクトを見てきましたが、パターンは明確です:具体的なプロンプトは良いアプリを、曖昧なプロンプトは汎用的なアプリを生みます。

悪いプロンプト:

タスクマネージャーを作って。

これではモデルに材料がほとんどありません。デフォルト色の汎用的なToDoリストが返ってくるでしょう。

良いプロンプト:

タスク管理アプリを作って。ダークなサイドバーナビゲーション、ドラッグ&ドロップの列(未着手、進行中、完了)を持つカンバンボードビュー、タイトル・担当者アバター・優先度バッジ・期限を表示するタスクカード。ダークテーマに紫のアクセントカラー。上部の検索バーと「新規タスク」モーダルを含めて。

これはレイアウト(サイドバー + メインコンテンツ)、主要機能(カンバンボード)、データの形(タイトル、担当者、優先度、期限)、インタラクションパターン(ドラッグ&ドロップ、モーダル)、視覚スタイル(ダークテーマ、紫)を指定しています。

上級プロンプト:

3ページの個人資産トラッカーを作って:ダッシュボード、取引、設定。ダッシュボードは総残高、収入vs支出の棒グラフ(Rechartsを使用)、最近の取引を表示。取引ページは日付、説明、カテゴリ、金額、種類の列を持つフィルター可能なデータテーブル。「取引を追加」モーダルを含めて。設定にはプロフィールフォームとカテゴリ管理。白テーマで収入は緑、支出は赤。アイコン付きサイドバーナビゲーション。

これはページ構造、チャートライブラリ、データスキーマ、色のセマンティクスを定義しています。VULKはすべてが配線されたマルチページのReact Routerアプリを生成します。

有用な基準:プラットフォームで成功するプロンプトの中央値は約60語 — 短く具体的な一段落で、仕様書ではありません(VULKプラットフォームデータ、2026年7月)。レイアウト、機能、データ、スタイルをカバーしたら、そこで止めましょう。

生成プロセスはどんな見た目か?

プロンプトを送信すると、こうなります:

まず計画が現れます — AIが実行するステップの番号付きリストです。見せかけではありません。計画は生成を整理された状態に保ち、モデルが途中でアーキテクチャを見失うのを防ぎます。

それからファイルが1つずつ生成され始めます。エディタ左側のファイルツリーにリアルタイムで現れるのを見られます。

典型的なプロジェクトには以下が含まれます:

• index.html — メタタグとフォントインポート付きのエントリポイント
• src/main.tsx — StrictModeとBrowserRouter付きのReactルート
• src/App.tsx — ルート定義を持つトップレベルコンポーネント
• src/pages/ — ページごとに1コンポーネント
• src/components/ — 再利用可能なUIコンポーネント
• src/data/ — リアルな内容のモックデータ
• tailwind.config.js — リクエストした色に合わせたカスタムテーマ
• package.json — 依存関係

ライブプレビューはどう動くのか?

ファイルが生成されるにつれ、プレビューパネルは自動更新されます。生成の完了を待つ必要はありません。プレビューは隔離されたマイクロVMでサーバーサイド実行されます — スクリーンショットやモックアップではなく、ホットリロード付きの実際にコンパイルされたアプリケーションです。コンパイルがサーバーで行われるため、Safariやモバイルを含むすべてのブラウザとデバイスで動きます。

プレビューは完全にインタラクティブです。ボタンをクリックし、ページ間を移動し、フォームに入力し、レスポンシブ挙動をテストしてください。次のプロンプトを書く前に、何を変えるべきかの特定に使いましょう。

フォローアッププロンプトでどう反復するのか?

最初の生成が完璧なことはめったにありません。それは設計どおりです。VULKは反復的な洗練のために作られています。プレビューを確認したら、狙いを定めたフォローアップメッセージを送りましょう:

設定ページにダークモードのトグルを追加して。設定はlocalStorageに保存して。

ダッシュボードの棒グラフを折れ線グラフに置き換えて。7日・30日・90日の日付範囲セレクターを追加して。

768px未満の画面ではサイドバーをアイコンだけに折りたたんで。ハンバーガーメニューボタンを追加して。

各フォローアップは変更が必要なファイルだけを生成します。VULKは外科的な編集を行い、それ以外はすべて保持します。これは重要です — メッセージのたびにプロジェクト全体を再生成しているわけではありません。

バグ修正もできます:

モーダルの外をクリックしても閉じない。オーバーレイのクリックハンドラーを追加して。

新機能のリクエストも:

取引ページにCSVエクスポートを追加して。表示中の全行を.csvファイルとしてダウンロード。

プラットフォームの全アプリの半分は本質的に「一発 + 微調整」(中央値4メッセージ)ですが、人々が投資するプロジェクトは25メッセージを超えます — 反復ループこそ良いアプリが作られる場所です(VULKプラットフォームデータ、2026年7月)。

コードを直接編集できる?

左サイドバーにプロジェクトの全ファイルが表示されます。任意のファイルをクリックすれば、ソースコードを直接見て編集できます。このハイブリッドなアプローチ — AI生成 + 手動の微調整 — が、欲しいものを正確に得る最速の方法であることも多いのです。

私は意図的にVULKをこう作りました。ブラックボックスではありません。コードは標準的なReact、標準的なTypeScript、標準的なTailwindです。Reactを知っていれば、AIが生み出すすべてを読み、理解し、修正できます。まだReactを知らなくても、生成コードは現実世界のパターンに従っているため、本当に役立つ学習リソースになります。

プロダクションへのデプロイはどうするのか?

アプリの見た目に納得したら、デプロイはワンクリックです。ツールバーのDeployボタンを押します。VULKはViteでアプリをビルドし、静的出力をCloudflare Pagesにアップロードし、ライブURLをくれます。

デプロイされたアプリはCloudflareのグローバルCDN — 300以上のエッジロケーション — で動きます。URL形式はyour-project-name.pages.devで、後からカスタムドメインを接続できます(Pro+)。

再デプロイも同じです。変更を加え、Deployをクリックすれば、新バージョンが数秒でライブになります。

プラットフォーム全体の正直な統計を1つ:生成されたアプリのうち公開URLにデプロイされるのはわずか3.7%(VULKプラットフォームデータ、2026年7月)。もはや生成は難しい部分ではありません — 完成させることが難しいのです。プレビューでアプリが動いているなら、Deployをクリックしてください;それだけで上位数パーセントのビルダーに入れます。

一貫して効くプロンプトパターンは?

何千もの生成を観察した結果、常により良い結果を生むパターンがあります:

レイアウト構造を指定する。 「左にサイドバーナビゲーション、右にメインコンテンツ」はモデルに明確な枠組みを与えます。

ページを明示的に名付ける。 「3ページ:ホーム、商品、カート」はルート定義とナビゲーション項目になります。

データの形を説明する。 「各商品には名前、価格、画像URL、カテゴリ、在庫数がある」は、コンポーネントとフォームにどのフィールドを含めるべきかを正確に伝えます。

特定のライブラリを指名する。 「チャートにはRechartsを使って」「ページ遷移にはFramer Motionを使って」は依存関係の選択をコントロールします。

カラースキームを述べる。 「シアンのアクセント付きダークテーマ」は、どうせ変えたくなるデフォルトの青テーマを防ぎます。

(まだ)できないことは?

アプリにデータベース付きの本物のバックエンドが必要なら、Backend Modeを有効化できます。フロントエンドと並んでPostgreSQLベースのAPIを生成します — 生成される全アプリの62%がSQLスキーマを含み、27%がプロビジョニングされたバックエンドを動かしています(VULKプラットフォームデータ、2026年7月)。バックエンドはVULKのインフラで動きます — まだ自分のサーバーにはデプロイできません。認証はVULK組み込みの認証システムを使います。外部認証プロバイダー(Firebase、Auth0、Supabase)はデフォルトでは生成されません — ただしPro+では統合システム経由で自分のSupabaseの接続をオプトインできます。

これらは現実の制限であり、率直に伝えたいと思います。セルフホストのバックエンドデプロイに取り組んでいますが、まだ準備できていません。