bolt.newとは
bolt.newは、StackBlitz社が提供するAI搭載のWebアプリ構築ツールです。ブラウザ上で自然言語の指示を出すだけで、フルスタックのWebアプリケーションを構築できます。
v0がUIコンポーネントの生成に特化しているのに対し、bolt.newはフロントエンドからバックエンドまで含めたアプリケーション全体を構築できるのが特徴です。環境構築は不要で、ブラウザだけで完結します。
bolt.newの始め方
- bolt.newにアクセス: ブラウザで
bolt.newにアクセス - アカウント作成: GitHubアカウント等でサインアップ
- プロンプトを入力: 作りたいアプリの説明を入力
- AIがアプリを構築: AIがファイル構成を設計し、コードを生成し、プレビューを表示
- 対話で修正: チャットで追加指示や修正を重ねて完成度を上げる
bolt.newの基本機能
アプリの自動構築
プロンプトを入力すると、bolt.newは以下を自動で行います。
- プロジェクトの初期化（フレームワーク選択、ディレクトリ構成）
- 必要なパッケージのインストール
- フロントエンド・バックエンドのコード生成
- リアルタイムのプレビュー表示
ファイルエディタ
生成されたコードはブラウザ内のエディタで直接編集できます。AIに任せきりではなく、必要な部分だけ手動で調整することも可能です。
デプロイ
完成したアプリをワンクリックでWebに公開できます。Netlify等のホスティングサービスと連携しています。
実践: ToDoアプリを作る
bolt.newでシンプルなToDoアプリを作る手順を紹介します。
ステップ1: 基本アプリの生成
プロンプト: 「シンプルなToDoアプリを作ってください。タスクの追加、完了、削除ができるもの。React + Tailwind CSS。ダークモード対応。」
AIがプロジェクトを構築し、数十秒でプレビューが表示されます。
ステップ2: 機能の追加
プロンプト: 「タスクに期限日を設定できるようにして。期限切れのタスクは赤く表示して。」
ステップ3: データの永続化
プロンプト: 「ブラウザのlocalStorageを使って、ページを閉じてもタスクが残るようにして。」
ステップ4: デザインの調整
プロンプト: 「全体のデザインをもう少し洗練させて。カードにシャドウを追加、余白を広めに。」
この4ステップで、実用的なToDoアプリが完成します。
bolt.newが得意なこと
- プロトタイプの高速作成: アイデアを即座に動くアプリにできる
- フルスタック開発: フロントエンドとバックエンドを一括で構築
- 学習用途: 「こういうアプリはどう作るのか」を実際のコードで学べる
- デモ用アプリの作成: プレゼンや提案時のデモアプリを短時間で用意
bolt.newの限界と注意点
- 大規模アプリには向いていない: 小〜中規模のアプリやプロトタイプが適切な用途。大規模な本番システムの構築にはCursorやClaude Codeが適する
- 生成コードの品質確認: 動くことと品質が高いことは別。セキュリティ、パフォーマンス、メンテナンス性は人間がレビューする必要がある
- 外部APIの連携: 認証やデータベース連携など、外部サービスとの統合は追加の設定が必要
- トークンの消費: 複雑な指示や長い会話はトークンを多く消費する。効率的なプロンプトを心がける
v0との使い分け
- UIコンポーネントだけ欲しい → v0
- 動くアプリ全体を作りたい → bolt.new
- React/Next.jsのコードが欲しい → v0
- フレームワークを柔軟に選びたい → bolt.new
目的に応じて使い分けるのがベストです。両方試して、自分の用途に合う方を見つけてください。
まとめ
bolt.newは、自然言語でWebアプリを即座に構築できるツールです。プロトタイプの作成、アイデアの検証、プログラミング学習に特に有効です。まずはbolt.newにアクセスして「シンプルなメモアプリを作って」と入力してみてください。環境構築ゼロで、数分後には動くアプリが手元にあるはずです。