Bolt.new を使ってタスク管理ツールを作る

AI を使ったアプリケーション開発ツールを試したのでその記録。Bolt は StackBlitz 社が開発したツール。プロンプトを使って対話形式でアプリケーションを作成することができる。自分が PM 兼テスターになった感覚で使うことができた。

• https://bolt.new/

https://x.com/s_runoa/status/1873853575031644661

関連

同様のツールは他にも複数あるため、今後試してみる予定。

• v0
  • Vercel のサービス
  • Next.js を開発している会社
  • https://v0.dev/
• Github Spark
  • Github のサービス
  • 利用するには事前の申請が必要な状態
  • https://githubnext.com/projects/github-spark/
• AWS App Studio
  • Amazon AWS のサービス
  • https://aws.amazon.com/jp/appstudio/
• Lovable.dev
  • https://lovable.dev/

導入

Bolt.new を使う際は会員登録を済ませたらまずここに作りたいアプリケーションのことを入力する。最初に仕様が決まっているならそれを書けばいいし、ざっくりした指示でもたたき台となるアプリケーションを生成してくれる。今回は適当に「タスク管理ツール」を作ることにする。

• https://bolt.new/

最初の成果物

一般的なツールであれば「タスク管理ツールを作成して」程度の雑な指示で問題なく作ってくれた。こちらが日本語で指示を出すと Bolt も日本語で返してくれる（たまに英語になる）。画面構成も分かりやすく、AI に指示を出すプロンプトと、作成されたコードとプレビューが横並びに表示される。

今回の場合、上にタスク作成の UI, 下に作成したタスク一覧が表示されるような簡単なウェブアプリケーションになった。ここに追加で指示を出すことで機能を拡張することができる。また右上の Deploy ボタンを押すと本番環境に反映され、実際に使うことができる。作成する際は定期的に Deploy して実際の挙動をテストした。

機能拡張、改善

最初に作成したものをたたき台にして様々な指示を出して機能を拡張、改善してみた。例えば以下のような指示を出した。指示を出すたびにコードが修正され、プレビューに反映される。感覚的に、開発 → 修正指示 → 開発 → テスト → 再度修正指示 → 開発という流れが PM とエンジニアのやり取りと同じだったこともあり、開発経験のある人なら初見でも違和感なく使えそう。1つ指示を出すたびに1分前後の開発時間があり、そのあと結果が表示される。そのため開発と修正のフィードバックをとてつもなく早く回すことができた。

• 担当者と期限日を設定できるようにして
• 一覧画面で設定した担当者を表示するようにして
• 既存のタスクを編集する際は、入力するUIの一番上にタスクIDを表示して、編集中だということが分かるようにして
• 既存のタスクを親タスクとして、子タスクを追加できるようにして
• それぞれのタスクに、ログインしている人のIDでコメントを付けられるようにして
• ログインしたら右上に自分のメールアドレスを表示するようにして
• 担当者はドロップダウンでユーザー一覧を表示するようにして
• 右上にユーザー名も表示するようにして
• 右上のユーザー名を押したらユーザー情報の編集ページに遷移するようにして
• タスクの上位概念としてプロジェクトを作成できるようにして
• プロジェクトを作成、表示するUIを追加して
• タスクを作成する際にプロジェクトに追加できるようにして
• プロジェクトを選択したら、そのプロジェクトのタスクが表示されるようにして

バグ修正、エラー対応

今回試す中では、この3種類のエラーが発生した。その対応方法もとてもシンプルで、①なら「ooという挙動になっています。xxになるように修正してください」、②なら「ooというエラーメッセージが表示されます。修正してください」と伝えるだけで Bolt.new が良しなに修正してくれた。また③のパターンは一番多く発生したが、Bolt.new がエラーを報告して修正方法を提案してくれる。そのため画面上で Attempt fix を押すだけで修正することができる。

テストやデバッグは通常の開発と同様に人の手でやる必要があるが、エラーの解決を1クリックでできるのはとても便利。エンジニアとして一番大変なところを AI に任せることができた。

1. 意図と違う挙動
2. アプリケーションでエラーメッセージが表示される
3. Bolt.new がエラーを検知する

データベースを使う

Bolt.new はサーバーを使って作成したアプリケーションを一般公開することができるが、データベース機能は別で作成する必要がある。ヘルプを見ると Firebase, Supabase が使えるため、今回は Supabase を使った。何と Bolt.new はマイグレーションも自動で実行され、Bolt.new のプロンプトから Supabase と連携させるだけで API Key の連携、テーブルの作成、更新などをすべて完結させることができた。機能を追加する中で出てくる必要なテーブルもすべて自動で反映されており、v0 ではこの部分があまりスムーズに行かなかったこともあり、かなり便利に感じた。

• https://support.bolt.new/welcome
• https://supabase.com/docs

今回、作成したもの

最終的に作成したものはこちら。はじめからある程度形になっていたが、プロジェクト管理やサブタスクなどの機能追加、デザイン面の調整も含めてすべてプロンプトの会話で完結させることができた。ちなみにログイン機能は特に指示していなかったがいつの間にか実装されていてびっくりした。

今回のタスク管理ツールは2,3時間程度でここまで作ることができた。もちろん自分でもこのくらいのアプリなら問題なく作ることができるが、サーバー管理、デプロイ機能、UI の調整などなどすべて含めて2,3時間で終えるのはまず無理だと思う。セキュリティ面や保守性などまだまだ調査は必要なものの、今後の仕事の中でどのように使うか考えていきたい。