AI×ブラウザで簡単！フルスタックアプリ開発プラットフォーム「Bolt.new」徹底解説

こんにちは！今回は、完全ノーコードでフルスタックWebアプリの開発・デプロイが完結するブラウザベースのAI開発プラットフォーム「Bolt.new」を紹介します。

Bolt.newは、ブラウザ上でフロントエンドからバックエンドまで、アプリの開発・デプロイが可能なプラットフォームです。AIがコードの自動生成やエラーの検出、修正をするため、初心者でも高度なWebアプリを素早く構築することができます。さらに、生成されたアプリのコードは直接修正でき、そのままNetlifyにデプロイすることも可能です。

この記事では、Bolt.newの概要から、実際の開発フロー、デプロイまでの具体的な手順や利便性について詳しく解説していきます。AIを活用したアプリ開発に興味がある方や、スピーディーにアプリを構築したい方におすすめの内容です。ぜひ最後までご覧ください。

1. Bolt.new

1.1. 概要

Bolt.newは、StackBlitzが提供するブラウザベースの開発プラットフォームで、2024年10月3-4日に開催されたStackBlitzのカンファレンス「ViteConf 2024」で発表されました。AIを活用してフロントエンド・バックエンドの両方を備えたフルスタックのWebアプリを迅速に構築、デバッグ、デプロイできます。ユーザーが自然言語でアプリの要件を入力すると、AIがそれに基づいてコードを自動生成します。発表によると、AIはAnthropicのClaudeを使用しています。

Bolt.newはローカル環境のセットアップが不要で、すべての作業がブラウザで完結します。

bolt.new

What if AI dev products (Claude, v0, etc) let you install packages, run backends & edit code?

Introducing https://t.co/XXroNZNn7H, by StackBlitz:

- Prompt, edit, run & deploy fullstack apps
- Full dev env (npm, Vite, Next.js, …) w/ frontier AI
- Free! pic.twitter.com/dhkKogq3xY

— StackBlitz (@stackblitz) 2024年10月3日

blog.stackblitz.com

viteconf.org

1.2. 仕組み

Bolt.newは、StackBlitzが開発したWebContainers技術を利用して、ブラウザ内で直接Node.js環境を実行し、npmやVite、Next.jsなどのツールを使用できるプラットフォームです。WebContainers技術により、ローカル環境を必要とせず、ウェブブラウザ上でサーバーサイドのコードを実行できるNode.js開発環境を提供します。

StackBlitzはBolt.newの他にも手軽にコードのデバッグ、シェアなどができるプラットフォーム「StackBlitz」を開発しています。

stackblitz.com

1.3. 特徴

その他のBolt.newの主な特徴として、以下が挙げられます。

• プロンプトエンハンス：プロンプトを入力してエンハンスアイコンをクリックすると、AIがプロンプトを具体化してくれます。
• エラーの自動検出と修正：生成されたコードのエラーを自動で検知し、修正してくれます。
• ワンクリックでデプロイ：作成したアプリをワンクリックでクラウドサービス（Netlify）にデプロイできます。
• リアルタイムコラボレーション：プロジェクトをURLで共有でき、チームメンバーとリアルタイムで共同作業が可能です。
• パッケージ・ライブラリのインストール：パッケージやライブラリは自由にインストール可能です。
• StackBlitzとの連携：Bolt.newで開発したアプリをStackBlitz上で管理・ダウンロードすることができます。

一方で、制約としては、過去のチャット履歴を参照したり、過去の生成結果に戻ることができないといった点があります。

1.4. 料金

無料でも利用することができますが、Pro、Teams、Enterprise & Self-hostedの3つの有料プランがあります。無料プランでは1日で151Kトークンまでチャットすることができ、StackBlitzのPersonalプランの機能を利用できます。アプリの開発・デプロイは無料のPersonalプランでも可能です。

bolt.new

料金表は、Bolt.newに登録後、ナビゲーションメニューの「My subscription」から確認できます。

ちなみに、StackBlitzにも同様の料金プランがあります。

stackblitz.com

なお、本記事ではBolt.newの無料Personalプランでできることを紹介していきます。

1.5. 参考：Netlify

Bolt.newで開発したアプリのデプロイ先はNetlifyに設定されています。Netlifyは、静的サイトを簡単にホスティングし、サーバーレス機能やAPI連携で動的な機能も追加できるプラットフォームです。

無料のStarterプランでもアプリの作成・公開は可能ですが、月々のサイトの構築（ビルド）時間の制限は300時間まで、データ転送量は100GBまでに制限されます。

www.netlify.com

www.netlify.com

2. 登録

それでは、早速Bolt.newを使ってみます！Bolt.newを利用するにはStackBlitzの登録が必要です。Bolt.newのトップページを開き、右上「Get started」から新規登録します。

その後、StackBlitzでプロフィール等の設定ができたら登録完了です。Bolt.newのトップページに戻りましょう。

3. アプリの開発手順

3.1. 生成

それでは、早速プロンプトを入力して生成してみます。今回は次のプロンプトを入力し、入力欄下部のプロンプトエンハンスアイコンをクリックします。

• プロンプト…複数のユーザー間で予定を共有できる予定管理アプリ

プロンプトにリマインダー機能とグループで利用する場合の用途が補足されました。現時点でエンハンスは英語のみ対応しているようです。生成ボタンをクリックします。

• エンハンス後のプロンプト…Create a multi-user schedule management app that allows users to share and coordinate their calendars, set reminders, and efficiently organize group events or meetings. （複数のユーザーがカレンダーを共有し、リマインダーを設定し、グループイベントやミーティングを効率的に開催できるスケジュール管理アプリを作成して。）

生成を開始すると、このようにファイルが生成されていきます。チャットの部分で進行状況が分かるようになっています。

生成が完了すると、チャットでファイルの説明と現在実装している機能、今後実装が考えられる機能が表示され、右側に生成したアプリのプレビューが表示されます。

3.2. 開発画面

アプリの開発画面を詳しく確認していきます。

No.	名前	できること
1	チャット入力・送信欄	質問や修正指示を入力し送信します。左下部のリンクアイコンをクリックしてファイルの添付、スパークルアイコンをクリックしてプロンプトのエンハンスができます。添付できるファイルの種類は、PDF、テキスト、画像ファイルです。
2	チャット履歴表示欄	チャットのやり取りの履歴や、生成の進行状況、実行コマンド、エラーなどが表示されます。
3	生成結果表示欄	生成したアプリのコードとプレビューが表示されます。左上部の「Code」「Preview」をクリックして表示するものを切り替えることができます。「Code」を選択するとファイルエクスプローラー、コードエディタ、ターミナル（No. 4）が表示され、直接コードの編集をすることも可能です。「Preview」を選択するとアプリのプレビューが表示され、実際にプレビュー上で動作を確認することができます。
4	ターミナル	コマンドを実行したり結果を確認します。パッケージのインストールや開発サーバーの立ち上げもこちらで行います。基本的なコマンドはBolt.newが実行します。
5	Open in StackBlitz	このアプリをStackBlitzで開きます。無料のPersonalプランに加入していればBoltで生成したアプリをStackBlitzで管理・編集することができます。より高度な開発環境が必要なとき等はStackBlitzで編集を続けることができます。
6	Deploy	このアプリをデプロイします。
7	ナビゲーションのハンバーガーメニュー	ホバーしてナビゲーションを表示します。

3.3. 生成結果の確認

それでは、生成されたアプリにどこまでの機能が含まれているのかを確認します。チャットによると、イベントを表示するメインカレンダービュー、新しいイベントを作成するフォーム、シンプルなリマインダーリスト、セクション間のナビゲーションを移動を実装したということです。

実際に、メインカレンダービュー（「Calnender」）、イベント作成フォーム（「New Event」）、リマインダーリスト（「Reminders」）の画面があり、上部のナビゲーションでそれぞれ移動することができました。

また、イベントは開始日時と終了日時を登録できるようになっています。作成したイベントはカレンダー上で表示されました。

反対に、実装できていなものは、ログイン・ユーザー認証機能、データベース連携、カレンダーの共有機能、共有カレンダーのリアルタイム更新機能、イベントカテゴリ・定期イベント・通知などの機能とのことです。

プロンプトの複数のユーザーがカレンダーを共有しという内容からユーザー認証機能は必須と考えられますが、生成結果には含まれていませんでした。Bolt.new単独ではデータベースや認証機能を実装できないことに関係がありそうです。

3.4. 修正（外部データベース連携）

では、アプリの修正指示をして、外部データベースとの連携を確認します。今回はSupabaseのTableと連携してみます。

Supabaseとの連携をサーバーサイドで実行できるように修正指示のプロンプトを入力します。また、連携するSupabaseのTable設定は下記の通りです。

• プロンプト…SupabaseのTableにEventを保存する機能を実装してください。データの取得と保存はサーバーサイドで実行し、SupabaseのURLとAPIキーは環境変数（.envファイル）を使用して管理します。クライアントサイドでは、これらの情報が露出しないようにし、サーバーサイドからのみSupabaseにアクセスする仕組みを作ってください。URL: SUPABASE_URL API key: API_KEY

• id…Type: int8/Default Value: NULL/Primary Key: Yes
• created_at:Type: timestamp/Default Value: now()/Primary Key: No
• title…/Type: text/Default Value: NULL/Primary Key: No
• description…/Type: text/Default Value: NULL/Primary Key: No
• start…/Type: timestamp/Default Value: NULL/Primary Key: No
• end…/Type: timestamp/Default Value: NULL/Primary Key: No

※今回は確認のためRLS設定を無効としていますが、本番環境に移行する前に必ずRLS設定を有効にして適切な設定をしてください。

チャットが表示され、修正が完了したようです。チャットによると、SupabaseのTableにデータを保存し取得できるようAPI処理を追加し、サーバーサイドでAPIを実行できるようにコードを修正したそうです。

Supabaseにデータを保存できるかPreviewから確認してみます。ナビゲーションから「New Event」をクリックしてイベント作成画面を開き、タイトル、開始日時、終了日時を入力して「Create Event」をクリックします。

すると自動でCalendar画面に遷移し、入力した通り予定が表示されているのが確認できました。

次に、SupabaseのTable Editorでeventsを開き確認すると、入力した通りにデータが保存されているのが確認できました。

また、サーバーサイドで実行できるコードになっているか確認します。.envファイルにSupabase URLとAPI Keyが環境変数として記載され、server.jsファイルでは環境変数を使って外部API（ここではSupabase）のURLやAPIキーにアクセスしていることが分かります。以上のことから、サーバーサイドでAPIを実行するコードができていることが分かります。

3.5. デプロイ

それでは、このアプリをデプロイしてみます。開発画面右上の「Deploy」をクリックします。

すると、ユーザーがチャットで「Deploy this application.」というメッセージを送信したことになり、デプロイ作業が開始されます。Bolt.newからのメッセージによると、Supabaseとの接続を維持したままNetlifyにデプロイしてくれるとのことです。

1、2分待つと、デプロイが完了したというメッセージが送信されてきます。メッセージには公開URLとクレームURLの2つのURLが含まれています。

• 公開URL：アプリのデプロイ先URL。Netlify環境。
• クレームURL：アプリをホスティングしているNetlifyアカウントにアプリの所有権を移行するためのURL。アプリのホスティングを自分のNetlifyアカウントに移管できる。

まず、公開URLをクリックすると、デプロイされたアプリが表示されます。

次に、クレームURLをクリックします。URLをクリックすると、クレームの確認画面が表示されるので「Add projects to Netlify dashboard」をクリックします。

すると、Netlifyダッシュボードに遷移し、Sites>Siteの一覧にデプロイしたアプリが表示されているのが確認できます。これで自分のNetlifyアカウントへの移管完了です。

なお、Netlifyの自分のアカウントに移管後の本番環境でも、Bolt.newでのデプロイ時のURLを引き続き使用することができます。もちろんカスタムドメインの設定も可能です。

このような流れでデプロイが行われるので、チャットでデプロイを指示することで実行することも可能です。

3.5.1. 補足：外部APIと連携しているアプリをNetlifyで運用するのに必要な設定

デプロイ時にSupabaseとの接続を維持したままNetlifyにデプロイするというメッセージがBolt.newから届きましたが、実際にはサーバーサイドでのSupabaseとの接続はデプロイ時に失われるため、Netlifyでの追加設定が必要です。

外部APIのサーバーサイドでの利用には環境変数を使用しますが、Bolt.newとNetlifyでは環境変数の設定方法が異なります。そのため、外部APIを利用するアプリをNetlifyに移管した後は、Netlifyで環境変数を設定し、クライアントの初期化時にNetlifyで設定した環境変数を使用するようにコードを修正する必要があります。

docs.netlify.com

4. 対応範囲・クオリティの検証

ここまでで紹介できなかったBolt.newの特徴やできることを紹介していきます。

4.1. デザイン

特に指示がない場合はオーソドックスでクラシックなデザインで生成されます。

ただし、プロンプトでデザインについて「最新のトレンドに沿った」という指示を追加すると、ちょっとおしゃれなデザインで生成してくれます。

ホバー時のアクションも目立つものになっており、ナビゲーションメニューの拡大表示時のスライドインなどのアニメーションが設定されていました。

ただし、追加で指示した「レスポンシブデザイン」は実装できていませんでした。

4.2. ローカルストレージ

Bolt.newはローカルストレージ（IndexedDB）をサポートしているので、ローカルにデータを保存する機能をつけるのもおすすめです。

こちらは、ローカルストレージを利用して保存するToDoアプリの例です。

• プロンプト…Create a simple ToDo application using React and TypeScript. Include features for adding, completing, and deleting tasks. Implement local storage to persist tasks between sessions. Style the application using Tailwind CSS for a clean and responsive design.（ReactとTypeScriptを使ってシンプルなToDoアプリケーションを作成する。タスクを追加、完了、削除する機能を含める。ローカルストレージを実装して、セッション間でタスクを永続化します。Tailwind CSS を使用してアプリケーションをスタイル化し、クリーンでレスポンシブなデザインにします。）

コードを確認すると、todosの初期化や取得、更新をローカルストレージを使って行っているのが分かります。

実際に、プレビュー上でToDoを登録してプレビュー表示部左上の更新をクリックしても、登録したToDoが再度表示されます。

4.3. コードの修正・バージョン管理

Bolt.newの強みはコードを直接修正できるところと言えます。実際、ファイルに直接書き込む形で修正することができます。

ただし、バージョン管理の機能はないため、同一チャット内の過去のバージョンに戻すことはできません。

また、プロンプトを送信して、現在の結果を完全に維持したまま一部を修正するのはかなり難しいようです。修正箇所は自分で直接修正するか、一度目の生成時に懸念点に関する指示をまとめて送信するのがおすすめです。

4.4. エラーの自動検出と修正

Bolt.newはエラーを見つけて解消するのも得意です。下記はプレビュー操作時のエラーです。プレビューでデータ作成を行ったところ正常に保存できなかったようです。

エラーメッセージを見ると、生成したコードと合致するカラムがデータ保存先のテーブルにないことによるエラーのようです。左下の「Fix problem」をクリックすると、エラーの確認と修正が始まります。チャットでアップデートしたファイル名と、検証環境サーバーを起動したことが表示され、次に修正内容の概要が送信されます。

チャットによると、カラム名の不一致を修正するため、コード内のカラム名を修正したということです。このように、エラーをキャッチして原因の特定・修正をする機能もBolt.newには実装されています。

4.5. GitHubリポジトリのインポート

Bolt.newではGitHubリポジトリのインポートが本当に簡単です。Bolt.newにインポートしたいリポジトリのURLをブラウザの入力バーに入力し、リポジトリURLのhttps://の後ろにbolt.new/を追加して「Enter」をクリックすると、Bolt.newでリポジトリのアプリを動かしてみることができるようになります。

5. まとめ

今回は、Bolt.newの概要とその使い方について紹介しました。Bolt.newでは、AIを活用してフロントエンドとバックエンドの両方を生成し、さらにワンクリックでNetliyにデプロイすることができます。コードを直接修正することもでき、非常に柔軟な開発が可能です。

ただし、いくつかの制限も見られました。例えば、前日以前のチャット履歴にアクセスできなかったり、生成結果のバージョンを戻せないなど、長期的なプロジェクト管理には向かない部分もあります。また、外部APIをサーバーサイドで実行する場合は、Netlifyにデプロイ後、環境変数の設定を別途行う必要がある点にも注意が必要です。

とはいえ、簡単にフルスタックアプリケーションを構築でき、コーディングのスキルを持つ開発者にとっても非常に便利なツールです。現在β版ですが、今後さらに機能の充実が期待されるので、引き続き注目していきたいサービスです。