開発に何時間も費やしているのに、もっと短時間でアプリケーションを構築できたら……そんな悩みを持つエンジニアは多いのではないでしょうか。
Bolt.newはそうした課題を劇的に解決するツールです。ChatGPTの力を借りて、わずか数分でフル機能のWebアプリケーションを作成できます。本記事では、Bolt.newの使い方を実例を交えながら、詳しく解説します。
Bolt.newとは？エンジニアが知るべき基本
Bolt.newは、StackBlitzが提供するAIネイティブアプリケーション開発プラットフォームです。従来のローカル開発環境を必要とせず、ブラウザ上でコード生成・実行・デプロイまでを一貫して行えます。
最大の特徴は、ChatGPT（またはClaude）との統合により、自然言語で指示するだけでコードが自動生成される点です。プロトタイピングから本番運用まで、様々なシーンで活躍します。
- フロントエンド（React、Vue、Svelte対応）
- バックエンド（Node.js、Python対応）
- データベース連携
- リアルタイムコラボレーション
- ワンクリックデプロイ
エンジニアにとって最も価値がある点は、環境構築に費やす時間をゼロにでき、ロジック実装に集中できることです。
Bolt.newの始め方｜初期セットアップ5ステップ
ステップ1：Bolt.newにアクセスしてアカウント作成
まずはBolt.newの公式サイト（bolt.new）にアクセスします。GitHubアカウントまたはメールアドレスで登録可能です。
- GitHubでサインイン（推奨：リポジトリ直結に便利）
- メールアドレスで新規登録
- Googleアカウントでの認証
アカウント作成後、ダッシュボードが表示されます。ここから新規プロジェクトを開始します。
ステップ2：新規プロジェクト作成と言語選択
「New Project」ボタンをクリックすると、プロジェクト設定画面が開きます。
- プロジェクト名：英数字とハイフンで記述
- テンプレート選択：React、Vue、Svelteなどから選択
- バックエンド：Node.jsまたはPythonを選択
初心者であれば「React + Node.js」テンプレートから始めることをお勧めします。最も情報が豊富で、サンプルコードも充実しています。
ステップ3：ChatGPTプラグインの連携設定
Bolt.newの真の力を引き出すには、ChatGPTとの統合が必須です。ダッシュボードの設定から「AI Assistant」を選択し、OpenAIのAPIキーを入力します。
APIキーはplatform.openai.comから取得できます。以下の手順で進めてください。
- OpenAIのダッシュボードにログイン
- 「API Keys」セクションから「Create new secret key」をクリック
- 生成されたキーをコピー
- Bolt.newの設定ページにペースト
- 「Save」ボタンで保存
APIキーは絶対に外部に漏らさないよう注意してください。環境変数として保管する習慣をつけましょう。
ステップ4：開発環境の確認
プロジェクトが作成されると、以下のような画面が表示されます。
- 左側：ファイルツリー（ディレクトリ構造）
- 中央：コードエディタ
- 右側：プレビュー画面（ブラウザ表示）
このレイアウトは、Webstormなどの統合開発環境に近く、エンジニアにとって直感的です。
ステップ5：AI Assistantでコード生成を試す
画面右下の「Ask Claude」（またはChatGPT）ボタンをクリックします。自然言語で機能リクエストを入力すると、AIが自動的にコードを生成・追加します。
例えば、「ダークモード切り替え機能を追加して」と入力するだけで、必要なコンポーネントやCSSが自動で生成されます。
実例1：TODOアプリを10分で完成させる
それでは、Bolt.newの実力を体感するため、簡単なTODOアプリを作成してみましょう。
プロンプト例：AIへの正確な指示
ChatGPT/Claudeに以下のプロンプトを入力します。具体性が高いほど、生成されるコードの質が向上します。
以下の機能を持つReactベースのTODOアプリを作成してください：
1. タスク追加フォーム（テキスト入力＋ボタン）
2. タスク一覧表示
3. 各タスクの右側に削除ボタン
4. 完了/未完了の切り替えトグル
5. 完了済みタスクは打ち消し線表示
6. フッターに「未完了タスク数：X件」と表示
7. 全体的にTailwind CSSを使ってモダンなデザイン
8. ダークモードに対応このプロンプトを入力すると、AIは約30秒で以下のコンポーネント構成を自動生成します。
生成されるコード構造
Bolt.newが自動生成するファイル構造は以下の通りです。
project/
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── components/
│ │ ├── TodoForm.jsx
│ │ ├── TodoList.jsx
│ │ └── TodoItem.jsx
│ └── index.jsx
├── package.json
└── vite.config.js各ファイルの役割を理解することで、後続の修正が容易になります。
修正と追加実装の流れ
生成されたコードに対し、さらに機能を追加したい場合は再度AIに指示を出します。
「このTODOアプリにローカルストレージ機能を追加して。
ページをリロードしてもタスクが残るようにしてください。」このように段階的に要件を追加することで、複雑なアプリケーションを反復的に構築できます。
実例2：APIサーバー＋フロントエンドの連携
より実務的な例として、バックエンドAPIを含むアプリケーション開発を紹介します。
要件定義とプロンプト作成
以下のような完全なスタック構成を指示してみましょう。
Node.js + Express + MongoDBを使った、ユーザー管理APIを作成してください。
機能：
1. ユーザー登録エンドポイント（POST /api/users）
2. ユーザー一覧取得（GET /api/users）
3. ユーザー詳細取得（GET /api/users/:id）
4. ユーザー更新（PUT /api/users/:id）
5. ユーザー削除（DELETE /api/users/:id）
フロントエンド側：
1. Reactで登録フォーム作成
2. ユーザー一覧をテーブルで表示
3. 各ユーザーに編集・削除ボタン実装
4. Axiosでバックエンドと通信
5. エラーハンドリングとローディング状態の表示このプロンプトを送信すると、Bolt.newはバックエンド・フロントエンド・DB接続設定を一括で生成します。
自動生成されたバックエンドコード例
// server.js（一部抜粋）
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(express.json());
// MongoDB接続
mongoose.connect(process.env.MONGODB_URI);
// ユーザースキーマ
const userSchema = new mongoose.Schema({
name: String,
email: { type: String, unique: true },
createdAt: { type: Date, default: Date.now }
});
const User = mongoose.model('User', userSchema);
// ルート定義
app.get('/api/users', async (req, res) => {
const users = await User.find();
res.json(users);
});
app.post('/api/users', async (req, res) => {
const user = new User(req.body);
await user.save();
res.json(user);
});
app.listen(3000, () => console.log('Server running on port 3000'));フロントエンド側のAxios統合も自動生成されます。このレベルの実装を手動で行えば、数時間かかる作業が15分で完了します。