bolt.new所感

はじめに

Claude3.5のaritifact機能やv0など、プロンプトのやりとりだけでフロントエンド生成までできるAIツールが続々と出てきていますが、いろいろ触ってみてbolt.newはかなり直感的かつ多機能で便利に思えたので、何番煎じなんだよと思いつつ備忘も兼ねて残しておきます。

１．以下のURLからログインする

bolt.newにログインします。最初Githubとの連携が求められるので、Githubのアカウントを持っていない人は事前に作っておく必要があります。
https://bolt.new/

２．プロンプトを入力する

プロンプト入力画面にプロンプトを入力します。今回はbolt.newの操作感だけ試したいので、シンプルな電卓アプリを作成してもらいます。

３．bolt.newが自動でコードを生成する

左側の画面でbolt.newが作業プランを立て、プランに基づき右側の画面にソースコードを書き始めます。必要なモジュールなども自分でどんどんインストールしていき、ソースに問題があれば自分でそれを検知し、完成に向けてどんどんソースコードを改善していきます。

４．アプリが完成する

アプリが完成すると左側画面のチャットで教えてもらえる。右側画面のタブでプレビューすると、アプリの動作を確認することができます。

５．デプロイもできる

画面右上のDeployボタンを押下すると、ウェブアプリとしてインターネット上にリリースされる。ワンボタンでリリースまでできちゃうのがすごいですね！
今回作成したアプリは以下のURLからアクセスできます。ただの電卓ですが……。
https://sensational-baklava-182f03.netlify.app/

まとめ

今回は触り的に電卓アプリだけ作ってみましたが、デプロイまでノーコード・ワンボタンでできるというのは知らなかったので、実際に触ってみて驚きました。初回ログインからアプリリリースまで10分くらいでできちゃったので、驚異的なツールだと思います。なんかフロントエンドだけでなくバックエンドもいけるっぽいみたいな話も聞いているので、また時間を見つけて複雑めな趣味アプリなど作ってみたいですね。

---

11/8追記

なんか5分くらいで認証画面とか課金画面とかついてるキャリア目標とそれにあわせた実行プラン作成・ToDo管理ができるサイトができた

bolt.newに細かめなプロンプトを入れたら何が起きるか試してみたら、こんな感じのサイトが一発で生成された。樋口はキャリア目標を立てたあとの管理が非常に苦手（ほぼ忘れる）ので、プランとToDoを管理してくれるサイトを作ってくれ、と言ってみたら、なんかソースコードがゴリゴリ書かれはじめて、こんなものが出てきた。




デプロイをしようとしたらBuildエラーが出て先に進めなかったのでキャプチャのみの共有ですが、生成されたプログラムはzipでダウンロードできるので、落として自分でデバッグしてもよいという感じです。すごいですね。