boltってなんだ？何ができるんだ？

## 概要

boltについてちょっと調べて、ちょっと触ってみた

## ちょっと調べてみた

オフィシャルサイトURL↓

https://bolt.new/

↑のリンク先を見ると英語の画面が出るが、ファーストビューだけでどういうものかなんとなくわかった。作りたいサービスを自然言語で与えるだけである程度までアプリケーションを構築してくれるんじゃないか？？

![CleanShot 2025-03-22 at 10.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/410b872b-3dbf-4c4d-8310-3e3470f972a7.png)


## ちょっと触ってみる

あとからサインイン求められると面倒なので先にGitHubのアカウントを使ってサインインをしておいた。

https://qiita.com/miriwo/items/d9170cf6a4ab61ae6abc

↑上記の記事でlovableに作成してもらったものと同様の「かわいい犬の画像をランダムに表示するWebアプリケーション」を作ってもらおうと思っている。

```
かわいい犬の画像をランダムに表示するWebアプリケーションを作ってほしいです。
```

と伝えてみる。

![CleanShot 2025-03-22 at 11.55.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/e8d983d7-0ab3-4492-a1fd-791ef352b92e.png)

一瞬で生成されたっぽい、ものの10秒位でもうプレビューが出てきた。

![CleanShot 2025-03-22 at 11.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/d6e6a7c6-c281-45b4-8fa5-8c50f1d8e57d.png)

画面上部の「Code」をクリックすることで生成されたコードを見ることができ、編集もできる。ターミナルもあるっぽい。これは結構大きいlovableとの差かも。

![CleanShot 2025-03-22 at 12.03.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a96ca7d5-515f-410d-9f98-b28246618b93.png)

クリックして画像を更新する処理が入っていないように思えたので聞いてみたら案の定入ってなかったっぽい。クリックして画像を更新する処理を入れてくれた。lovableと違い、同じ画像が出てきてしまう問題などもなく上手く動作している。
ちなみに、生成時は英語だが、一度日本語で質問を投げればその後からずっと日本語で返してくれるようになる。

バックエンドの実装もできるのか本人に聞いてみたらできるらしい。ちゃんとできないことも教えてくれるのすごい。

```
はい、もちろんバックエンドの実装も可能です！以下のようなバックエンドフレームワークやテクノロジーを使用できます：

Node.js ベースのフレームワーク：
Express.js
Fastify
NestJS
Hono

データベース：
Supabase (デフォルトの推奨データベース)
SQLite (JavaScript実装)
libSQL

API スタイル：
REST API
GraphQL
tRPC
WebSocket

ただし、WebContainerの制約上、以下の点にご注意いただく必要があります：

ネイティブバイナリを必要とするデータベース（PostgreSQL、MySQL等）は直接使用できません
Python、Ruby、PHPなどのNode.js以外の言語ベースのバックエンドは実行できません
ファイルシステムへの永続的な書き込みには制限があります

例えば、以下のような実装が可能です：
Express.jsを使用したRESTful API
Honoを使用した軽量なAPIサーバー
Supabaseを使用したフルスタックアプリケーション
WebSocketを使用したリアルタイムアプリケーション

```

GitHubにコードを上げられるか聞いてみた。もしかするとboltは直接GitHubにコードを上げることはできないのかな・・？

```
残念ながら、WebContainerの環境ではGitコマンドを直接実行することができません。そのため、以下の手順で手動でGitHubにアップロードすることをお勧めします：

〜具体的な手順が記載されているだけなので割愛〜
```

ただ、感動したのは「GitHubにコードを上げたいんだけど〜」って聞いたら↑の返事を返している最中にREADME.mdのファイルを自発的に用意していた。そしてREADME.mdの内容はわかりやすくしっかり日本語で記載されている。

![CleanShot 2025-03-22 at 12.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b2638667-786d-4c7b-a54e-ad5a598c6b3e.png)

デプロイをしてみようと思う。
右上の「Deploy」のボタンを押下するとNetlifyを使ってデプロイするところまで自動でやりきってくれる。

![CleanShot 2025-03-22 at 12.35.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a0dbc546-6568-4322-9588-1c97b4eae9f6.png)
![CleanShot 2025-03-22 at 12.35.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/ba199135-6ea2-441d-b73b-19cf2baf6a50.png)

どうやらNetlifyを使ってデプロイしているっぽい。
Netlifyのアカウントがなくてもbolt経由でデプロイできるっぽい。
Netlifyにアカウントがあるなら、今回boltがデプロイしたものを自身所有のプロジェクトにする事ができるらしい。

筆者はNetlifyは使ったことがなかったがいい機会なのでアカウントを作って登録・ログインしておく。

![CleanShot 2025-03-22 at 12.41.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/c6bd9258-85f7-406b-aa32-a4b1707d4602.png)

「また、このNetlifyプロジェクトを自分のアカウントに移行したい場合は、以下のリンクを使用してください：」で提供されたURLにアクセスしてみる。

「Claim your Bolt apps on Netlify」の画面が出たので「Claim apps」をクリックした。

![CleanShot 2025-03-22 at 12.42.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/325103b2-9fae-4c99-90d6-601d67b55e5f.png)

そうするとかわいい犬のランダムな画像を出すWebアプリが自身のプロジェクトになった。

![CleanShot 2025-03-22 at 12.44.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/70ae744c-2422-4118-9ad3-c6a590290777.png)

Webアプリが自身のプロジェクトになったからと行って、最初に提供されたデプロイされているURLに変更はないらしい。

## ちょっと触ってみての感想とおきもちひょうめ（殆どがlovableとの比較）

生成スピード、正確さはlovableよりboltのほうが良い気がした。
単純に生成AIと会話するサイドバーの使い勝手がboltのほうがいい。（lovableはスペースキーで内容が送られてしまっていた。設定で変えられるなら自分のせい。）
ちゃんと調べてないがboltはGitHubのリポジトリに自動でpushしてくれたりはしない気がする。だが逆に生成されたコードをそのままブラウザ上でいじることができる。これは使い勝手が良い。
GitHubでコードを管理しつつパートナーとしてAIと一緒に開発したいならlovableが良いのかも？
lovableでデプロイまで試してないので比較できないがboltのデプロイの楽さは別格だった。

同じ日にlovableとboltを触ってみて、

boltはモックアップを作り、サクッとデプロイ（できることはもっとあるはずなのでこの限りではないと思う）
lovableはメイン開発の初期から伴走してもらい一緒に作り上げていく

みたいな感じかなと思った。

boltはブラウザ上でそのままコードも変更できるからコード記載、変更履歴管理、デプロイをオールインワンで面倒見てもらえる。多分そういう思想で作られている。非常に楽だし体験が良かった。全部まかせてお願いできるので我々は開発に集中できる。これは非常に個人開発と相性がいいと感じた。
一方である程度の人間がカスタムする余地があるのはlovableかもしれない。会社の小規模プロジェクトで少人数で使うならlovableなのかな？？