はじめに

最近、Bolt.newを使用する機会があったので、実際に試してみた結果を記事にしてみました。

Bolt.newとは

Bolt.newは、生成AIを使用して、Webアプリケーションの構築を迅速かつ効率的に支援する生成AIツールです。
Bolt.newの特徴として、ユーザーはWebブラウザ内で直接コード生成、デプロイ、実行のプロセスを一貫して完結させることができます。この一貫したプロセスを可能にしているのは、Bolt.newがStackBlitzのコンテナ技術を使用しており、強力なオンライン開発環境をサポートしているからです。

Bolt.newのライセンス、料金

Bolt.newにはさまざまな料金プランがあり、各プランは利用者のニーズに応じて異なります。
また、年間プランを選択すると、月額料金が割安になり、よりお得に利用することができます。

各プランの詳細については、以下のリンクから確認していただければと思います。

実際にBolt.newを使ってみた

・Bolt.newの準備

Bolt.newの公式サイトにアクセスし、画面右上にある「Get Started」をクリックします。

下の画像のようなポップアップが表示されるので、GitHubアカウントまたはメールアドレスを使用してアカウント登録を行います。

以上を実施すれば、Bolt.newの準備が完了します。

・初期プロンプトの送信

今回は例として、よくあるショッピングサイトを作成しようと思います。

プロンプトは少し抽象的ですが、「シンプルなショッピングサイトを作成してください。」という内容のプロンプトをBolt.newに送信します。

少し待つと、Bolt.newの画面左側に、生成されたコードの説明や実装の概要が表示されます。

また、Bolt.newの画面右側に表示されている「Code」タブをクリックすると、生成されたアプリのソースコードを確認できます。

「Preview」タブをクリックすると、生成されたアプリの画面が表示されます。

・デプロイ

Bolt.newの画面右上にある「Deploy」をクリックすると、Webアプリのリンクが生成されます。

生成されたリンクを受け取った人は誰でもWebアプリを使えるようになります。

・2回目のプロンプト送信

続いて、2回目のプロンプトとして、ユーザーアカウント管理機能を実装させます。

Bolt.newの返答としては、Supabaseを使用してくださいとのことなので、指示通りSupabaseを使用してみます。

・Supabaseの準備(アカウント登録、Bolt.newとの連携設定)

Supabaseの公式サイトにアクセスし、画面中央または画面右上にある「Start your project」をクリックします。
（本記事ではSupabaseの詳しい説明や操作は割愛します。）

下の画像のように画面遷移しますので、アカウント登録を行います。
Supabaseにも様々な料金プランがありますが、今回は無料版のSupabaseを使用します。

そして、SupabaseとBolt.newの連携設定を終えたら準備は完了です。

・Bolt.newからSupabaseに接続する

Bolt.newの画面右上にある「Connect to Supabase」をクリックします。

Bolt.newの返答にもあるように、「Connect to Supabase」をクリックすると、テーブルの作成が自動的に実行されます。
また、「.env」ファイルにはSupabaseの接続情報が自動で記載され、migrationsフォルダ内のSQLファイルが実行されます。

Supabaseの画面を確認すると、今回は例として「profiles」というテーブルが自動で作成されています。

・検証

Bolt.newで生成されたアカウント作成画面に、任意の情報を入力してアカウントを新規作成します。
正常に新規アカウントが作成された場合、入力した情報が「profiles」テーブルに挿入されることを想定しています。

新規アカウントを作成後、Supabaseの画面を確認すると、「テスト太郎」の情報が「profiles」テーブルに追加されています。

感想

・複数回の対話において、実装漏れが発生することがある。

Bolt.newでは、コード生成、デプロイ、実行のプロセスが一貫して行われるため非常に便利ですが、複数回にわたる対話を行う中で、前回の実装が反映されないことがあります。

例えば、初回のプロンプトで作成されたコードが後の対話で反映されなかったり、新たな機能追加時に以前の実装内容が考慮されないケースがありました。

開発の進捗を追いながらも、都度確認と修正が必要になることがあり、実装漏れを防ぐためには何らかの対策が必要だと感じました。

・過去の対話を振り返りたい場合、限界がある。

Bolt.newを使用していると、過去に行った対話内容を振り返る機能に限界を感じることがあります。

例えば、ChatGPTでは、画面を上にスクロールすれば、過去の対話履歴をさかのぼることが容易で、初期プロンプトまで確認できるため、進行中のプロジェクトに関連する情報を素早く見返すことができます。

Bolt.newでも、画面を上にスクロールすることで、過去の対話をある程度まで確認することができます。しかし、一定の範囲を過ぎると、過去の対話履歴を確認できなくなるため、長期間にわたる対話や複数回の対話を経た場合に、初期のやり取りや以前の実装内容を確認する事が難しいと思われます。

最後に

最後までお読みいただき、ありがとうございました。
この記事が少しでもお役に立てたなら、嬉しく思います。

仲間を募集しています！

生成AIの進化が進む中で、ARIでは新たな技術に挑戦しており、現在、エンジニア、ITコンサルタント、PM職など幅広いポジションで募集中です。
カジュアル面談も随時受け付けておりますので、ご興味ある方はこちらをご覧ください。