【AI駆動開発】Next.jsデベロッパー目線で「bolt.new」を試してみる！ 「bolt.new」でNext.jsアプリは生成できるのか？ #AI #bolt.new #ChatGPT

はじめに

前回は以下の記事で「bolt.new」についてUIデザイン＋フロント実装の概要を紹介しました。今回は既に、Next.jsを使って実務を行っている開発者目線にて活用できるのかにフォーカスして試してみた結果をブログ化しました。

【AI駆動開発】「bolt.new」でUIデザイン＋フロント実装、デプロイまでを全自動化！AI駆動開発が新フェーズへ #AI #v0 #bolt.new #ChatGPT

カレンダーアプリを作ってみる

bolt.new のプロンプトに作りたいアプリの内容を書く

今回はnext.jsを使ってカレンダーアプリを作りたいので、以下のように入力してみます。

実行すると以下のようなエラーが表示されました。なにやら問題が発生した模様です。ビルドが失敗している模様です。「Fix problem」ボタンを押してみます。

すると自動で修正が行われます。今度はうまくビルド成功しました。

カレンダーアプリがきました！
ここまで数分です。このスピード感は本当に驚きです。動作も問題なく動きます。

コードを見るとnext.config.jsも入っており、ちゃんとNext.js製になってます。
tailwind.config.jsも勝手に入れてくれてますね。ただcssファイルも一緒に作成されていてスタイリングはcssファイルで行ってそうなのでtailwindは活用できてなさそうです。

サードパーティ製ライブラリを導入して自分好みのプロジェクトにする

今回のプロンプトで入力したのは「Next.jsでカレンダーアプリを作ってほしい」だけですので、アウトプットは変わらないものの、技術選定は全くできてない状態です。そこで自分好みのライブラリを使用した上でアプリを作り直してみます。

まずは、tailwindを活用できるように追加でプロンプトで指示してみます。

globals.css以外はcssファイルが消え去り、インラインのtailwindですべてスタイリングしてくれました！
しかも、レスポンシブ対応もしてくれてます。

作成したプロジェクトのデプロイ

画面右上にDeployボタンがありましたので押してみましょう。
すると自動的にBuild→Deployが実行されます。

Deployが完了するとNetlify環境にURL公開してくれます。

レスポンスの中にある「You can view it at: https://dazzling-rugelach-e498e7.netlify.app」のURLに接続してみます。

問題なくデプロイされていて動作を確認することができました。

生成されたコードをローカルPCにダウンロードして動かす

画面右上にDownloadボタンがあったので押してみましょう。

ローカルにこのような名前でzipファイルがダウンロードできます。

zipファイルを解凍しましょう。ファイルが一通り正常にダウンロードできています。

次は、コマンドラインでこのディレクトリに移動し、実際に起動してみます。
まずは、「npm install」を実行します。

次は「npm run dev」を実行します。

こちらも成功しました。
http://localhost:3000で起動されたので、このURLにアクセスします。

ローカルPCで動作を確認することができました！

生成されたコードを確認する

開発者が bolt.new を使うケースの一つとして、新規プロダクト立ち上げの時の叩き台を作りたいというケースがあるかもしれません。そのようなケースの場合は、bolt.new が作成したコードの理解やディレクトリ構造の把握は必須になってきますので、今回はどんな風に中身が作られているのか確認していきましょう。

まずは package.json から見ていきましょう。@radix-uiがたくさん使われています。

@radix-ui系の中の一番上の@radix-ui/react-accordionに注目してみます。
このpackageはcomponents/uiディレクトリ内のaccordion.tsxファイルの中で使用されていました。

このタイミングでおや？と疑念を抱きました。
シンプルなカレンダーUIなのにaccordionなんか必要ないのではないか？と。
components/uiディレクトリの中を改めて覗いてみると、非常に多い数のコンポーネントが作成されています。不要なコンポーネントも数多く出来ています。

今後の新規機能開発のために必要だろうということで親切に作ってくれているのでしょうか。しかし今回は必要最低限のコンポーネントのみで良いので、改めてそのように指示してみましょう。

この指示だけでは、コンポーネントが全然消えませんでした。

components/uiディレクトリ内にたくさん不要なコンポーネントがあるので、具体的に指示を出す必要がありそうです。以下のように具体的な指示を記載してみます。

不要なコンポーネントが削除されました！

具体的な指示だと期待通りに動作しましたが、指定したディレクトリ内を削除するだけなので今回は単純な指示だったかもしれません。最初の「不要なコンポーネントを削除したい」という指示に能動的に削除してほしいところですが、まだそこの精度には達していないようです。

次は、ローカルにダウンロードした後に「npm run build」を実行し、ビルドが成功するか確認していきたいと思います。

ビルドエラーが発生しました。

使用しているライブラリがpackage.jsonに記載されていなかったのが原因の模様です。bolt.new のコンソールに「ビルドエラーが起きたので修正して」と指示してみましたが、今回は修正できませんでした。

bolt.new のターミナルにもビルドエラーが表示されているので、このエラー文をそのままコンソールに貼り付けます。

ビルドが成功しました！！

機能追加をやってみる

現状はまだシンプルなカレンダー表示機能しか作成してないので、簡単な機能追加を指示してみます。今回は以下のように日付選択や予定追加ができるように指示してみます。

出来上がりました！！指示の通り、日付選択ができ、「予定追加」ボタンをクリックしたら選択した日付の背景がオレンジになりました。

以下は、出来上がったコードの一部抜粋です。

Tailwind CSSを使ってうまくスタイリングしてくれています。
必要に応じてサードパーティのライブラリも使って実装はしますが、スクラッチで簡単に仕上げれるところはちゃんとスクラッチで作成してくれました。

まとめ

今回は、next.jsデペロッパーの目線で、bolt.newを使ってみました。試す前はnext.jsでは、業務レベルで使えるクオリティは出せないだろうと思ってましたが、上手く活用できそうです。

今回の題材であるカレンダーアプリの実装は、スクラッチで実装しようとすると手間暇がかかります。一方で、ライブラリに頼るとバージョン管理や柔軟性を担保できなかったりします。そのようなケースでこのbolt.newは大幅な工数削減に繋がると感じます。

今回試してみた通り、ビルドにエラーが発生したり、具体的な指示を行わないとうまく実装に反映できなかったりすることもあります。ただエラーの内容を伝えたり、具体的な指示を出すことで解決につながりました。今後精度もあがりこのような部分は改善されると思いますが、AIツールの精度、癖を理解することが上手く付き合うコツと言えそうです。

今回の記事が皆さんの参考になれば大変嬉しいです。ぜひ next.jsデペロッパーの皆さんも、bolt.newを試してみましょう！

お気軽にご相談ください