こんにちは。バックエンドエンジニアの前田です。
最近はかなり冷え込んできて、冬が近づいてきたなと感じます。
社内では、肉まんを販売しています。
寒い日に熱々の肉まん、良いですよね。
さて、今回はbolt.newを用いて、ゼロからアプリケーションを作成していきます。
（私は、フロントエンドの経験があまりなく、苦手分野なのですが・・・）
1. bolt.newとは
bolt.newは自然言語のみで、フルスタックアプリケーションを開発、実行、編集、デプロイできるAIツールです。
さらに、パッケージやライブラリのインストールなどもすべてWebブラウザ上で行ってくれるため、ローカルでの面倒な環境構築も不要なことが特徴的です。
github.com
bolt.newはアカウントを作成すれば、無料でも利用可能です。
各プランとその料金は、以下のようになっています。
- Personal：0$ /month
- Pro：18$ /month
- Teams：29$ /member /month
※商用利用は、Teams以上のプランでないとできないようです。
2. 今回作成するアプリについて
以下のようなチェックリスト管理アプリをWebブラウザ上に構築していきます。
以下がbolt.newで実際に作成したアプリケーション画面です。
チェックリストの要件は以下です。
- 画面はヘッダー、サイドメニュー、ダッシュボード画面が存在すること。
- サイドメニューに「テンプレート一覧」というメニューが存在すること。
- 「大項目」、「中項目」、「小項目」の3つの項目が存在すること。
- 「確認」ボタンが存在すること。
- チェック項目にチェックを入れると、色が変わること。
- チェックをしていない項目がある状態で確認ボタンを押すと、その項目が赤くなること。
- 新規作成のポップアップが表示されること。
今回のアプリに利用した言語、フレームワークやライブラリは以下です。
| 言語／DB | ライブラリ／フレームワーク | |
|---|---|---|
| フロントエンド | TypeScript | React |
| バックエンド | Python | FastAPI |
| DB | SQLite | sqlite3 |
3. UIを作成する
3.1. 基本機能を実装する
まずは、チェックリストの要件を満たすように、基本機能を実装してもらいましょう。
以下のプロンプトを入力します。
チェックリスト管理システムを作成したい。
以下の条件を満たすように作成してください。# 条件
・ヘッダーとサイドメニューとダッシュボード画面を作成すること。
サイドメニューには、「テンプレート一覧」というメニューを追加すること。
・チェックリストは「大項目」、「中項目」、「小項目の3つの項目に分けること。
（チェックを入れるのは小項目のみとする）
・「確認」ボタンを作成すること。
チェックしていない項目がある状態で「確認」ボタンを押したとき、チェックしていない項目を赤くしすること。
・チェックをした項目は、緑色に色を変えること。
・「新規作成」ボタンを作成し、押したら「タイトル」を入力し、「大項目」、「中項目」、「小項目」の3つをそれぞれ自由な数追加できるようなポップアップを表示すること。
・新規作成したら、テンプレート一覧に追加したものを表示すること。
実際にプロンプトを入力している様子が以下の画像です。
プロンプトを入力し、Enterを押すと、以下の画像のように実際にコードを生成している様子がわかります。
2～3分で出てきた画面が以下。
以下のように新規作成画面のポップアップも出てきました。
せっかくなので、チェックリストの機能要件をどの程度満たしているかのチェックリストを新規で作成し、確認してみたところ、ダッシュボード画面以外は実装されていました。
3.2. 使いやすいUIにする
新規作成画面において、文字が入力欄の左に寄りすぎているので、直してもらうことにしました。
ここでも、具体的なプログラミングの知識は必要ありません。
上のようなチャット欄に以下のようなプロンプトを入力するだけ。
新規作成画面や編集画面の入力欄が見づらいので、見やすくしてほしい。
入力欄の左側に文字が寄りすぎなので、もう少し広くとってほしい。
「もう少し」という曖昧な表現を用いましたが、どのように実装するのでしょうか。
返答は以下のようなものでした。
AIが自動でパディングなどを設定してくれたようです。
このように、チャットをする感覚でアプリを実装できます。
さて、ダッシュボード画面も作ってもらいましょう。
同じく、チャット欄に以下のようなプロンプトを入力しました。
・ダッシュボード画面を作成すること。
ダッシュボード画面には最近使ったチェックリストを表示すること。
・ヘッダーの文字の部分に、ダッシュボードへのリンクを貼ること。
・テンプレート一覧にあるチェックリストを選択したら、そのチェックリストを大きく表示すること。
（テンプレート一覧に表示するものは、チェックリストのタイトルのみで良い。）
ダッシュボードには、最近使ったチェックリストを表示してもらうようにしました。
おまけで、日付まで表示してくれています。
さらに、少しカスタマイズしたいときも以下のようにチャットをする感覚で変更してくれます。
テンプレート一覧画面の「新規作成」ボタンの色を青からオレンジ色に変更してください。
また、「新規作成」から「新規テンプレート作成」に変更してください。
4. バックエンドも実装してみる
フロントエンドができたので、バックエンドも実装しようと思います。
こちらもチャット感覚で以下のように入力しました。
バックエンドも実装してください。
これだけで、バックエンドはNode.js、DBはSQLiteを用いて、自動生成してくれました。
私はPython派なので、PythonとSQLiteを用いて実装するように変更してもらいました。
どうやら、FastAPIを使ってフロントと疎通し、checklist.dbというファイルにデータを保存するようです。
そこで、ローカルに一旦ダウンロードし、checklist.dbが作成されるか実際に確認してみました。
まずは、右上のDownloadボタンでローカルにダウンロード。
解凍して環境構築をしたら（環境構築のやり方も書いてくれていました）、新規テンプレート作成ボタンを押し、新規作成。
テンプレート一覧に追加され、リロードしても残っていたので、DBにちゃんと登録されていそう。
ローカルのファイルを見に行くと、checklist.dbが生成されていたので、バックエンドも実装できていることを確認できました。
5. まとめ
bolt.newを用いてアプリ作成をしてみました。
作成するのにかかった時間は25～30分程度。
コード生成にかかっていた時間は10分程度でした。
私は普段ほとんどフロントエンドを触らないので、ちゃんとできるのか不安でしたが、自然言語のみで実装できるので、簡単でした。
今回私が行ったように、自動生成されたアプリケーションはダウンロードしてローカルで起動させることもできますし、
フレームワークなど指定できることも多いようなので、構成をしっかり練れば、もっと複雑なこともできそうです。
Acroquest Technologyでは、キャリア採用を行っています。
- Azure OpenAI／Amazon Bedrock等を使った生成AIソリューションの開発
- ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発
- マイクロサービス、DevOps、最新のOSSやクラウドサービスを利用する開発プロジェクト
- 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
