bolt.newを使ってみた話

fuku株式会社でインターンをしております、松澤と申します。普段は博士課程学生として、「LLMを用いたバイオインフォマティクス解析環境の自動構築」というテーマで研究を行っています。

今回は、AIを用いたWebアプリケーション開発サービスのbolt.newを利用した感想を記したいと思います。

背景

ある業務において、ワークフローの実行ログを管理するWebアプリケーションを実装することになりました。このアプリケーションには、主に以下のページを実装することが求められました。

  1. 今までの実行記録を一覧として閲覧するページ
  2. 各実行記録の詳細を閲覧するページ
    1. 実行したワークフローを構成するプロセス間の依存関係(プロセスAが終わったあとでなければプロセスBは開始できない、など)がグラフ構造で表示される
    2. 前述のグラフのノードをクリックすると、ノードに対応したプロセスの実行ログ(実行ステータス、開始・終了時刻など)が表示される

当初は既存のOSSをカスタマイズして使用する計画でしたが、条件を十分に満たすソフトウェアが見つからなかったため、フロントエンドをフルスクラッチで実装する必要が生じました。しかし筆者はフロントエンド開発の経験が浅く、OSSのカスタマイズと比較して工数がかかりすぎることが予想されました。そこで、AIを用いたWebアプリケーション開発サービスのbolt.newを利用したフロントエンド開発を試してみることにしました。

bolt.newを使ってみる

早速、実装したいフロントエンドのイメージを、日本語のプロンプトで与えてみました。与えたプロンプトのイメージは以下のとおりです:

"列A", "列B", "列C"を列として持つ表を作ってください。各列はソートと検索ができるようにしてください。
ページの右上にユーザーアイコンとユーザー名、ヘルプボタン、ログアウトボタンをつけてください

bolt.newの開発画面。左側のチャットに指示を入力すると、右側のエディター部分でコードが生成される。エディターには"code"タブと"preview"タブがあり、"code"タブでは生成されたフロントエンドのコードが表示され、"preview"タブでは実際の見た目を確認することができる。

かなりふんわりとした指示でしたが、1回目の生成の時点で、ほぼ筆者のイメージ通りのコンポーネント構成を持つページが出力されました。また、見栄えに関する指示が何もない状態でもtailwindcss*1を使用したリッチな見た目のページとなっており、見た目に関しては全く手を加える必要がない状態でした。

実行ログの一覧画面。各行が1回の実行に対応している。表形式になっており、列ごとに並び替え、検索が可能。各行のidをクリックすると詳細画面に遷移する。

実行ログの詳細画面。ワークフローを構成するプロセスの依存関係がグラフ構造で表されており、各ノードの色はプロセスの実行ステータスを反映している。このノードをクリックすると、右側にプロセスのログ情報が表示される。

仕様変更により苦戦

しかし、このあとで思わぬ苦戦を強いられました。表示するデータの構造に大きな変更が生じたため、それに合わせてフロントエンドを改修する必要が生じたのです。当初、bolt.newに修正を指示するプロンプトを与えて複数回修正を試みました。しかし、その都度新たなバグが生じてしまい、動作するコードを生成させることができませんでした。そのため手動で修正することにしましたが、その結果「他人が書いた(しかも自分の守備範囲外の)コードを読み解いて修正する」というヘビーな作業が発生し、かなりの工数を割くことになってしまいました。

今思えば、大幅な仕様変更が生じた時点で始めから作り直す方が工数を削減できたのではないかと思います。

使ってみた感想

生成されるフロントエンドのデザインは申し分なく、このクオリティのWebページを30秒程で生成できることに驚きました。一方で、大幅な仕様変更はうまくいかない場合があるため、あらかじめ仕様を十分に固めておき、やむを得ず大幅な仕様変更を加える場合はゼロベースで作り直すことを視野にいれるべきだと感じました。特に開発者がフロントエンド開発に習熟していない場合、無理に手動で修正しようとすると、bolt.newによって得られる利点(短時間で見栄えの良いフロントエンドが生成される)を打ち消すほどの手間と時間がかかる可能性が高いです。

落穂拾い

生成したコードのバージョン管理

StackBlitzを使用することで、GitHubと連携させる事ができるようです。私はローカルでも動作確認をしていたので、bolt.new上で変更されたファイルを都度ローカルにコピー&ペーストし、ローカルのGitで管理していました。bolt.newでは「どのファイルが追加・削除・変更されたか」を表示してくれるので、変更の追跡は十分可能です。

メッセージの言語

日本語でプロンプトを書いた場合でも問題なくコードを生成してくれますが、返ってくるメッセージは英語でした。

*1:ここは好みが分かれるかもしれません。tailwindcssを使ってほしくない場合は、プロンプトにその旨を記載したほうが良さそうです。