StackBlitzによるAI搭載のフルスタックWeb開発プラットフォームで、ブラウザ内でアプリケーションの生成、実行、デプロイをすべて行える。
| コマンド | 説明 |
|---|
bolt.newにアクセス | ブラウザでBolt.newを開く |
| GitHubまたはGoogleでサインイン | プロジェクト永続化用のアカウントを作成 |
| チャットにプロンプトを入力 | アプリケーションの構築を開始 |
| 準備ができたら「Deploy」をクリック | Netlifyやその他のホストにデプロイ |
| StackBlitzにフォーク | StackBlitz IDEで編集を続ける |
| プロジェクトをダウンロード | ソースコードをzipで取得 |
Bolt.newのアーキテクチャ:
1. 自然言語で作りたいものを説明
2. AIがプロジェクト全体を生成（フロントエンド + バックエンド + 設定）
3. WebContainerがブラウザ内でアプリを実行（サーバー不要）
4. AIが変更を加えるとライブプレビューが更新
5. チャットで反復 — AIがリアルタイムでコードを修正
6. Netlifyに直接デプロイまたはソースをダウンロード
技術: StackBlitz WebContainersで動作
- Node.jsがブラウザ内で実行（リモートサーバーではない）
- npm install、ビルド、開発サーバーがすべてローカルで実行
- Docker不要、VM不要、クラウドコンピューティング不要
| プロンプトスタイル | 説明 |
|---|
| 「Build a todo app with React and Tailwind」 | フレームワークとスタイリングを指定 |
| 「Create a REST API with Express and MongoDB」 | バックエンド中心のプロンプト |
| 「Make a landing page for a SaaS product」 | デザイン中心のプロンプト |
| 「Add authentication with email/password」 | 既存プロジェクトに機能を追加 |
| 「Fix the bug where the form doesn’t submit」 | 既存の問題をデバッグ |
| 「Change the color scheme to dark mode」 | スタイルの変更 |
| 「Add a dashboard page with charts」 | 新しいページ/機能のリクエスト |
| 「Refactor the code to use TypeScript」 | コード品質の改善 |
良いプロンプト:
「Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system.」
「Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature.」
悪いプロンプト:
「Make me a website」 → 曖昧すぎる
「Build Facebook」 → 広すぎる
「Fix everything」 → 具体的なターゲットがない
ヒント:
- テックスタック（React、Vue、Svelteなど）を指定する
- 必要な機能を説明する
- スタイリングの好み（Tailwind、CSS modulesなど）を言及する
- 特定のAPIやデータソースを参照する
- 大きなアプリは段階的なプロンプトに分割する
| フレームワーク | 説明 |
|---|
| React | コンポーネントベースのUIライブラリ |
| Next.js | SSR/SSG対応のReactフレームワーク |
| Vue.js | プログレッシブJavaScriptフレームワーク |
| Nuxt | SSR/SSG対応のVueフレームワーク |
| Svelte | コンパイル時リアクティブフレームワーク |
| SvelteKit | Svelteのフルスタックフレームワーク |
| Astro | コンテンツ重視の静的サイトビルダー |
| Solid.js | きめ細かいリアクティブUIライブラリ |
| Angular | フル機能のTypeScriptフレームワーク |
| フレームワーク | 説明 |
|---|
| Express.js | 軽量Node.js Webフレームワーク |
| Fastify | 高速Node.js Webフレームワーク |
| Hono | 軽量エッジファーストフレームワーク |
| NestJS | TypeScriptエンタープライズフレームワーク |
| tRPC | エンドツーエンドの型安全API |
| Remix | フルスタックReactフレームワーク |
| ライブラリ | 説明 |
|---|
| Tailwind CSS | ユーティリティファーストCSSフレームワーク |
| shadcn/ui | Reactコンポーネントライブラリ |
| DaisyUI | Tailwindコンポーネントライブラリ |
| Material UI | Google Material Design for React |
| Chakra UI | アクセシブルなReactコンポーネント |
| Radix UI | スタイルなしのアクセシブルコンポーネント |
| コマンド | 説明 |
|---|
| サイドバーのファイルをクリック | エディタでファイルを開く |
| コードを直接編集 | 手動でコードを変更 |
Ctrl + S | ファイルの変更を保存 |
| ファイルを右クリック → New File | 新しいファイルを作成 |
| ファイルを右クリック → Delete | ファイルを削除 |
| フォルダを右クリック → New Folder | ディレクトリを作成 |
| ファイルの変更を自動検出 | ホットリロードでプレビューを更新 |
| コマンド | 説明 |
|---|
| 下部のターミナルパネルをクリック | WebContainerターミナルにアクセス |
npm install package | npmパッケージをインストール |
npm run dev | 開発サーバーを起動 |
npm run build | 本番用にビルド |
npx prisma migrate dev | Prismaマイグレーションを実行 |
node script.js | Node.jsスクリプトを実行 |
| コマンド | 説明 |
|---|
| 「Add a navbar with logo and links」 | 新しいコンポーネントを追加 |
| 「Make the button bigger and blue」 | スタイルの変更 |
| 「Add form validation for email」 | 機能を追加 |
| 「The page crashes when I click submit」 | バグレポート |
| 「Show loading spinner while data fetches」 | UX改善 |
| 「Add error handling for the API call」 | 堅牢性の向上 |
| 「Make it responsive for mobile」 | レスポンシブデザイン |
| 「Add dark mode toggle」 | テーマの切り替え |
| コマンド | 説明 |
|---|
| チャット履歴にすべての変更を表示 | AIが変更した内容を追跡 |
| 「Undo the last change」 | AIの変更を元に戻す |
| 「Go back to the version with the blue header」 | 以前の状態を参照 |
| 任意の時点でプロジェクトをダウンロード | ローカルにスナップショットを保存 |
| StackBlitzにフォークしてgitを使用 | 完全なgit統合 |
| コマンド | 説明 |
|---|
| 「Deploy」ボタンをクリック | デプロイプロセスを開始 |
| Netlifyアカウントを接続 | Netlifyアクセスを承認 |
| 自動ビルドとデプロイ | 数秒でライブURLを取得 |
| カスタムドメインサポート | Netlifyダッシュボードで設定 |
| HTTPS付き | 自動SSL証明書 |
| コマンド | 説明 |
|---|
| プロジェクトをダウンロード → 手動でデプロイ | 任意のホスティングプロバイダー |
| StackBlitzにフォーク → CI/CDを接続 | GitHubベースのデプロイ |
| GitHubにフォーク → Vercel/Netlify自動デプロイ | Gitベースのワークフロー |
ダウンロード → npm run build → dist/をアップロード | 手動の静的ホスティング |
デプロイワークフロー:
1. Bolt.newで「Deploy」をクリック
2. Netlifyを選択（またはアカウントを接続）
3. Bolt.newがプロジェクトをビルド
4. Netlifyに自動アップロード
5. ライブURLを取得: https://your-app.netlify.app
カスタムドメインの場合:
1. まずデプロイしてNetlify URLを取得
2. Netlifyダッシュボード → ドメイン設定に移動
3. カスタムドメインを追加
4. レジストラでDNSレコードを更新
| 機能 | 説明 |
|---|
| Node.jsがブラウザ内で実行 | リモートサーバー不要 |
| npm/yarn/pnpmサポート | 完全なパッケージ管理 |
| ブラウザ内のファイルシステム | 仮想ファイルシステム |
| ブラウザ内の開発サーバー | ローカルURLでホットリロード |
| Docker不要 | すべてクライアント側で実行 |
| オフラインで動作（読み込み後） | 継続的なインターネット接続不要 |
WebContainersで実行できるもの:
✓ Node.js（最新のLTS）
✓ npm、yarn、pnpm
✓ TypeScriptコンパイル
✓ Vite、Webpack、esbuild
✓ Express、Fastify、Hono
✓ SQLite（インメモリ）
✓ Prisma（SQLiteと共に）
✓ ファイルシステム操作
実行できないもの:
✗ Dockerコンテナ
✗ PostgreSQL / MySQL / MongoDB
✗ ネイティブバイナリ依存関係
✗ Python / Ruby / Go
✗ システムレベルの操作
✗ 長時間実行のバックグラウンドプロセス
| データベース | 説明 |
|---|
| SQLite（インメモリ） | WebContainerで直接動作 |
| Prisma + SQLite | ローカルデータベース付きORM |
| Supabase（リモート） | API経由のPostgreSQL |
| Firebase（リモート） | Firebase SDK経由のNoSQL |
| Turso（リモート） | libSQL経由のエッジSQLite |
| PlanetScale（リモート） | API経由のMySQL |
Bolt.newでのローカル開発:
SQLite + Prismaが最適な組み合わせ
- WebContainer内で完全に動作
- 外部サービス不要
- マイグレーション付きのフルORM
本番環境:
ホストされたデータベースに接続
- Supabase（無料枠: 500MB）
- Turso（無料枠: 9GB）
- PlanetScale（無料枠: 5GB）
接続文字列を環境変数として設定
| テンプレート | 説明 |
|---|
| 「React + Vite + Tailwind starter」 | モダンなReact SPA |
| 「Next.js app with shadcn/ui」 | フルスタックReact |
| 「Express API with Prisma + SQLite」 | REST APIバックエンド |
| 「Vue + Nuxt + Tailwind」 | Vueフルスタック |
| 「Svelte + SvelteKit」 | Svelteフルスタック |
| 「Astro blog with MDX」 | コンテンツサイト |
| 「Landing page with Tailwind」 | マーケティングページ |
-
明確で具体的なプロンプトから始める — テックスタック、機能、デザインの好みを最初に説明しましょう。「Build a task manager with React, Tailwind, and localStorage persistence」は「make a todo app」より良い結果が得られます。
-
段階的に構築する — コア機能から始めて動作を確認し、1つずつ機能を追加しましょう。各プロンプトは一度にすべてをリクエストするのではなく、1つのことに集中すべきです。
-
デバッグ時にコードを参照する — 「it doesn’t work」ではなく、「ContactForm.tsxのhandleSubmit関数がPOSTリクエストを送信しない」と言うと、より的確な修正が得られます。
-
検証にターミナルを使用する — AIにデバッグを依頼する前に、ターミナル出力でビルドエラー、不足している依存関係、ランタイムの問題を確認しましょう。
-
定期的にバックアップをダウンロードする — 安全策としてプロジェクトを定期的にダウンロードしましょう。ブラウザデータをクリアすると、ブラウザベースのプロジェクトが失われる可能性があります。
-
必要に応じてパッケージバージョンを指定する — 特定のライブラリバージョンが必要な場合、「Use react-query v5」や「Use Tailwind CSS v3, not v4」のように指定しましょう。
-
高度な編集にはStackBlitzにフォークする — git、複数のターミナル、より複雑なワークフローが必要な場合、プロジェクトをフルStackBlitz IDEにフォークしましょう。
-
シークレットに環境変数を使用する — プロンプトにAPIキーをハードコードしないでください。環境変数を使用するようAIに依頼し、デプロイプラットフォームで設定しましょう。
-
ブラウザ内データベースにはSQLiteを選択する — WebContainersはPostgreSQLやMySQLを実行できないため、ローカル開発にはPrisma付きのSQLiteを使用し、本番環境ではホストされたDBに切り替えましょう。
-
コマンドパレットを活用する — Ctrl + Kを押してファイルの検索、コマンドの実行、プロジェクトのナビゲーションをメニューをクリックせずに素早く行いましょう。
