未来が現実に！AIを活用したサービス「Bolt.new」でアプリ開発を体験してみた

# はじめに
2024年になって、私たちの生活にAIが溶け込み始め、多種多様なサービスが次々と登場しています。そんな中、以前から気になっていた話題のサービス「Bolt.new」を試す機会が訪れました。
「Bolt.new」は、驚くほど簡単にアプリを開発できるAI開発ツールになっています！
この記事では、「Bolt.new」の体験談をお伝えできればと思います。

https://bolt.new/


# Bolt.newとは
StackBlitz社が提供しているサービスになります。
AI を活用した Web 開発エージェントで、ブラウザから直接フルスタックアプリケーションをプロンプト、実行、編集、デプロイできます。
そのため、わざわざローカル環境のセットアップする必要がなく、手間がかかりません。

:::note warn
**注意点**
ほとんどの一般的な JavaScript フレームワークとライブラリをサポートしていますが、それ以外のプログラミング言語（Java、Pythonなど）には対応していません。
:::

# 料金プラン
以下のプランで構成されています。
商用で利用しない、個人開発で利用するのであれば「Personal」で十分だと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/38343a3b-ed42-2931-54dd-9722a901d0e4.png)
 https://stackblitz.com/pricing

 「Personal」は、トークン150,000/日、1,000,000/月の上限になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/013a3f7a-9194-2eac-fc46-d819a41adfc9.png)


# 試してみる
### １．Blot.newにログインする
https://bolt.new/ にアクセスし、「Get Started」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/b0e18470-80f0-b03b-0150-3b1f6edb42ec.png)

そうすると、ダイアログが表示されるため、「Continue with Github」でGithubと連携してログインするか、「Don't have an account? Create one here.」のリンクをクリックしてメールアドレス、ユーザ名、パスワードを入力してアカウントを作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/0def6485-0107-e16e-a4a6-6607997018bd.png)
※「Don't have an account? Create one here.」のリンククリック後のダイアログ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/35593a1c-eea0-565f-bc9b-1b7cb0e035d4.png" width="400px">

ログインが完了すると、左側にカーソルを移動すると以下のサイドメニューが表示されるようになります。
![スクリーンショット 2024-12-10 192922.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/e757af47-1ea2-bbde-8db5-0444d8146ce2.png)

### 2．プロンプトでアプリを作成してみる
そしたら、TODOアプリを作成してみたいと思います。
以下の指示を入力して、「Enter」を入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/f49d56d7-490d-006f-c397-2a23c6d32585.png)

画面が遷移して、左のプロンプトが進みTODOアプリ作成されていきます。
作成が完了すると、「Preview」からアプリを確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/dbfa1449-0302-1655-df6b-a861539770c0.png)

実際にTODOリストを操作してみましょう。
TODOを登録してみます！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/7c5ac0c7-4e65-8fce-7d7b-cff178be7307.png">
TODOの一覧に登録されました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/0be16ba7-fd76-9036-82ac-a5c196f9956d.png">
チェックすると、TODOが完了して横線が引かれました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/4a38bdd1-2052-bfc3-ec8d-afb4f47d44a0.png">

### ３．コードを見てみる
「Code」をクリックすることで、実際のコードを確認することができます。
また、コードを書き換えることも可能です。
作成されたコードをダウンロードしたい場合は、「Download」ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/d604477d-a823-0be8-9877-6f2f70badeb4.png)


### ４．プロンプトで既存のアプリをさらによくする
プロンプトに以下の内容を入力し、「Enter」を入力してください。
そうすると、左のプロンプトが進みTODOアプリを再作成していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/018d1d8a-9fe9-1a1b-a39a-52558c423993.png)

作成が完了すると、先ほど入力した内容が反映されたTODOアプリになりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/d32c6522-a543-6e15-9965-c30d84e5351f.png)
また、date pickerも実装してくれており、さらに使いやすくなりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646964/b2f0842e-89e6-ac6b-b78e-ed2e0a254520.png)


# 最後に
これまで何時間もかかっていたアプリ開発が、わずか数分でできるなんて、本当に驚きました！
「アイデアはあるけれど、開発に割ける時間がない」、「プログラムの経験がないけれど、自分でアプリを作ってみたい」という方には特におすすめのサービスです。

今後、AIを活用したサービスはますます増えていくことでしょう。
エンジニアとして、それらのサービスをいかに活用し、自分のスキルとして取り込むかが非常に重要だと感じています。
これからも新しいサービスを積極的に学び、スキルアップを目指していきたいと思います！

# その他
- https://support.bolt.new/welcome