⚡

bolt.newを使ってWebアプリを作ってみる

sotani

2024/11/06に公開

この週末は今年最後の3連休でしたね。色々と試したいことのうちの1つでbolt.newでWebアプリを作ってみました。シンプルなものだとこんなに一瞬で作れるのかと驚きでしたので、簡単に記事にまとめてみました。

 bolt.newとはbolt.newはWebアプリなどのアプリケーションを生成AIのプロンプトで簡単に作成してくれます。フロントエンドからバックエンドまでフルスタックで開発でき、しかも高速で行ってくれるので、非常にありがたいですね。また、生成したコードを1クリックでDeplyまで行うことができます。ReactやNext.jsなど主要なフレームワークにも対応していて、それらを指定して開発することもできます。
最初のUIは以下のような感じです。ChatGPTなどと同じようにテキストのプロンプトを入力するだけで作成できます。


 bolt.newを試してみるでは、実際にWebアプリを作ってみます。今回は毎週データをcsvで取得し、それを追加して可視化する環境を構築してみようと思います。データはこのZennの統計データで試しにやってみます。統計データでそれぞれの投稿の作成者、PV数の情報があるのですが、これをアップロードすることによって、累計のPV数や、期間ごとのPV数を可視化してみたいと思います。
入れたプロンプトは以下の内容です。
以下のようなWebアプリを作りたい。
・入力はCSVファイル。CSVファイルにはユーザ名、Slug、タイトル、PV発生日、PV数の情報がある。
・CSVファイルを読み込むことでこれまでの情報に追加する。同じ日付がすでにある場合は新しいデータに置き換える。
・トップ画面にタイトルごとの累計PV数をテーブル表示する。
・期間を選択することもでき、選択した期間内のタイトル、PV数をテーブル表示する。
これを実行するだけで、1分ちょっとで以下の動画のようにアプリが作れてしまいます。非常に簡単です。（Zennの投稿では動画をアップロードできず、3MB以下のGifファイルで登録する必要があったため、自動ループでどこからがスタートかがわかりづらく、またfpsも減らしたので動作がカクカクとなってしまっています。ご容赦ください。下の画像はプロンプトの入力画面がスタートです。）
確認のためにデータファイルをアップロードしてみます。ファイルをアップロードするとエラーが発生したのですが、Fix programのボタンを押すと自動的に修復してくれます。これでデータを読み込めるようになり、各投稿のアクセス数が表示されました。（この画像はクリックしてcsvファイルをロードするところがスタートです。）
新しい2週間分のデータを入れてみます。PV数がアップデートされることが確認できました。（この画像はすでに投稿のPV数が表示されているところから追加でcsvファイルを入力しています。）

 bolt.newで仕上げてみる使い方は大体わかったので、もう少し機能を追加してみました。テーブルにはPV発生日の最も古い日時を投稿日として表示し、また並び替え機能もつけてみました。また、日毎の合計PV数を折れ線グラフで表示するようにしました。
CSVのファイルの日本語に対応できなかったり、日付の表記方法の違いなどで中々うまく動作しなかったのですが、一つずつ間違いを指摘することで動くようになりました。いくつかあるCSVファイルのうちなぜか取り込めないものがありましたが、そのCSVファイルをUploadして解析させることで修正することができました。またうまく動作しないときに、実際のコーディングのときのようにエラー内容を表示させるように指示しておくと、何が問題で表示されないのかがわかるので、次のプロンプトで指示を出しやすくなります。使っていくと、いい感じにできるコツが掴めてきた気がします。

 使ってみての感想
 良かった点簡単に、かつ高速にやりたいことが実現できるようになります。プロンプトで指示を出すだけでアプリが作れるので、プログラム経験がなくても簡単なツールは作れるようになります。
エラーが発生しても自動的に修復してくれたり、またエラー内容をプロンプトに入れると、改善をしてくれますので、いちいち調べる必要がないのもありがたいです。
コードも見ることができ、そこで編集することもできます。なので、ある程度形だけ作ってもらい、そこからは自分で作っていくというやり方でも時短できると思います。
どのように修正したかを明示してくれるので、納得感があります。（実際にその通りにコードが生成されたのかはわかりませんが）
今回は使用してませんが、デプロイ機能もあり、ボタン一つで行えるので、そのあたりもメリットかと思います。

 注意が必要な点フリー枠はすぐに消費します。価格は$20/月が一番安く10Mトークンまでです。今の円安の状況だとそこそこ費用は掛かります。また、がっつりやろうとするとすぐにトークン追加で上のプランが必要になるかもしれません。
期待通り動作しない場合、デバッグする手段が乏しいので、コードを理解しないと解決できないときもあるかと思います。そうなると、結局ある程度プログラミングの知識が必要になるかもしれません。
LLMと同じで、プロンプトで指示しても、こちらの意図通りの修正をしてくれないときもあるので、その辺りはコツが必要です。（このあたりは習うより慣れよですね）
コード以外に問題がある場合（例えば入力ファイルの問題など）、いくらプロンプトで現象を伝えて修正するように指示しても、当然のことながら解決できません。このあたりは実際に開発する時と同じです。
これはbolt.newに限ったことではありませんが、著作権やライセンス違反をしてないかなどはわからないので、その辺りは使う側の責任で解決する必要がありそうです。

 最後にプログラミング知識や経験がなくても、やりたいことができるというのはやはり魅力です。費用は掛かりますが、メリットは大きく、使う価値は十分にあると思います。作ったコードを理解していけば、プログラミングを学ぶ上でも役立つかもしれませんね。