![見出し画像](https://assets.st-note.com/production/uploads/images/162910195/rectangle_large_type_2_b8f32e76450be68ee2fe6339ff476165.png?width=1200)
プログラム自動生成AI「bolt.new」を試してみた(フロントエンドの開発自動化はなるか?)
今回はbolt.newというプログラミング自動生成AIについて書きます。主にフロントエンドの開発について自動化がなされていると聞いて、フロントエンドが比較的苦手な私には必要かと思いました。
近年、AI技術の進化により、プログラミングの自動化が現実のものとなっています。今回は、StackBlitz社が開発した自動プログラミング生成AI「bolt.new」を試してみました。試してみたのはもちろん無料版です。本記事では、bolt.newの概要から実際の使用感、活用事例、メリット・デメリット、そして今後の展望について解説します。
1. bolt.newとは
bolt.newは、自然言語での指示をもとに、フルスタックのウェブアプリケーションを自動生成するAIツールです。プログラミングの知識が浅いユーザーでも、簡単にアプリケーションを開発・公開できる点が特徴です。
![](https://assets.st-note.com/img/1732343124-bUCYcRqaoHOdy3vNB198Tejs.png?width=1200)
2. bolt.newの概要
bolt.newは、ブラウザ上で動作し、特別な開発環境の構築を必要としません。React、Vue、Angular、Next.jsなど、人気のフレームワークに対応しており、作成したアプリケーションをNetlifyなどのホスティングサービスにワンクリックでデプロイできます。
※Netlify:静的ウェブサイトやフロントエンドアプリケーションのホスティングとデプロイを簡単に行えるプラットフォーム
3. bolt.new利用に必要なもの(料金プランと商用利用について)
bolt.newは、以下の料金プランを提供しています:
![](https://assets.st-note.com/img/1732327313-bkTdO5gPLaew1qtj6xE9ipv7.png?width=1200)
4. bolt.newの主な用語説明
プロンプト:ユーザーが自然言語で入力する指示文。これに基づいてAIがコードを生成します。
デプロイ:作成したアプリケーションをインターネット上で公開すること。
トークン:bolt.newの機能を利用する際に消費される単位。プランごとに月間利用上限が設定されています。
5. bolt.newに触ってみる(簡単なスケジュール管理ソフトを作成)
実際にbolt.newを使って、簡単なスケジュール管理ソフトを作成してみました。フレームワークはNext.jsを使いました。
bolt.newのサイトに行く:bolt.newのサイトに行って、ユーザー登録などを済ませる。
プロンプトの入力:プロンプトに「一般的なスケジュール管理のフロントエンドアプリを作ってください。Next.jsを使って作ってください。」と入力。
コードの生成:AIが自動的にコードを生成し、ブラウザ上でアプリが動作。
エラーの対処:エラーが発生してもある程度は自動的に修正。
プレビュー:「Preview」タブをクリックし、ブラウザ上で作成したアプリを動作。
デプロイ:「Deploy」ボタンをクリックし、Netlifyにワンクリックでデプロイ。
![](https://assets.st-note.com/img/1732327434-dtRNqBYW68Sslj4HA2DpK0To.png?width=1200)
![](https://assets.st-note.com/img/1732327529-iDCMmFn3JeYHIPk78Aa60bul.png?width=1200)
![](https://assets.st-note.com/img/1732327580-n5qHkmgdBlIY4zVtjPDN0LpM.png?width=1200)
![](https://assets.st-note.com/img/1732327627-ibWSCDMkZn4egY6hKPUvcazI.png?width=1200)
![](https://assets.st-note.com/img/1732327648-1K2vVfrEloz9bqh6Os4AdZYN.png?width=1200)
![](https://assets.st-note.com/img/1732327673-xg4tzkuTGPlVqDjW8cdBXMsY.png?width=1200)
短時間で基本的なスケジュール管理アプリが完成しました。
6. bolt.newの活用事例と応用例
プロトタイプ開発:新しいサービスのアイデアを迅速に形にする際に有用です。
社内ツールの開発:データ分析ツールやプロジェクト管理システムなど、特定の業務ニーズに合わせたツールを短期間で構築可能です。
教育分野での利用:プログラミング初心者でも簡単にアプリケーションを作成できるため、教育現場での活用が期待されています。
7. bolt.newのメリットとデメリット
メリット:
迅速な開発:プロンプトを入力するだけで、短時間でアプリケーションを作成可能。
学習コストの低減:プログラミングの知識が浅いユーザーでも利用しやすい。
多様なフレームワーク対応:複数のフレームワークに対応しており、柔軟な開発が可能。
デメリット:
高度なカスタマイズの制限:複雑な機能やデザインの実装には限界がある。
商用利用の制約:無料プランでは商用利用が制限されている。
トークン制限:プランごとにトークンの利用上限が設定されており、大規模な開発には注意が必要。
![](https://assets.st-note.com/img/1732343170-ZQ1bgsGcBjN57t09mRohdVKP.png)
8. bolt.newのまとめ(今後の展望など)
bolt.newは、AIを活用した新しいアプローチで、プログラミングのハードルを下げ、迅速な開発を可能にするツールです。特に、プロトタイプの作成や教育分野での活用に適しています。今後、AI技術の進化とともに、より高度な機能やカスタマイズ性の向上が期待されます。また、商用利用のハードルが下がることで、幅広い分野での応用が進むでしょう。引き続き、bolt.newのアップデート情報や活用事例を注視していきたいと思います。