こんにちは、バックエンドエンジニアの前田です。
前回はbolt.newを用いて、画面イメージからどこまで画面を生成できるかを試してみました。
acro-engineer.hatenablog.com
画像を読み込み、ほぼイメージ通りに生成してくれることが分かったので、今回はシーケンス図を画像にしてbolt.newに渡し、どこまで生成してくれるかを試してみます。
1. 今回作成するアプリ
今回作成するアプリは、砂時計アプリです。
以下の画像のようなシーケンス図をdraw.ioやMermaid Graphical Editorなどを用いて作成し、作成した画像をbolt.newに渡して、砂時計アプリを生成してもらいます。
砂時計アプリの仕様としては、時間を1、3、5分から選択して設定し、スタート、一時停止、リセットボタンで操作できるようにします。
今回は、Mermaid Graphical Editorで、以下のようなシーケンス図を作成しました。
達成したいことは以下です。
- シーケンス図に記載している機能を満たし、動くアプリを作成すること
- メソッド名もシーケンス図に準拠すること
砂時計アプリは、言語はTypeScript、フレームワークはReactを用いて生成しています。
また、今回はフロントエンドのみで動作するWebアプリとしました。
2. アプリ作成
2.1. シーケンス図を指定してアプリを生成させる
シーケンス図の画像と以下のプロンプトを指定して生成させました。
砂時計アプリを作成してください。
以下の要件に従うこと。# 要件
・画像のシーケンス図に準拠すること。
・メソッド名もシーケンス図に準拠すること。
以下のような画面が生成されました。
シーケンス図の指定のみで、画面の指定はしていませんが、使いやすい画面を生成してくれました。
シーケンス図で指定した設定時間の選択や、スタート、一時停止、リセットボタンの生成はできていました。
2.2. 生成結果の詳細
シーケンス図を指定して生成させた結果、ロジック部分は以下のようなコードが出力されていました。
import { TimerOptions } from '../types';
export class TimerLogic {
private remaining_time: number = 0;
private timer_id: number | null = null;
private options: TimerOptions | null = null;
getTimerOptions(): TimerOptions | null {
return this.options;
}
getRemainingTime(): number {
return this.remaining_time;
}
setTimer(time: number): void {
this.remaining_time = time;
this.saveToStorage();
}
start(): void {
if (!this.timer_id) {
this.timer_id = window.setInterval(() => {
if (this.remaining_time > 0) {
this.remaining_time--;
} else {
this.reset();
}
}, 1000);
}
}
pause(): void {
if (this.timer_id) {
window.clearInterval(this.timer_id);
this.timer_id = null;
}
}
reset(): void {
this.pause();
this.remaining_time = 0;
this.saveToStorage();
}
private saveToStorage(): void {
localStorage.setItem('timer_options', JSON.stringify({
remaining_time: this.remaining_time,
}));
}
loadFromStorage(): void {
const stored = localStorage.getItem('timer_options');
if (stored) {
const options = JSON.parse(stored);
this.remaining_time = options.remaining_time;
}
}
}
| シーケンス図で指定した内容 | 生成結果 |
|---|---|
| クラス | 想定通り出力されていた |
| メソッド名 | 3語以上のメソッド名は少し指定したものと異なっていた。getTimeOptionsとしていたメソッドがgetTimerOptionsとなっていた。シーケンス図で指定したものとは違っていたが、より適切な名称になっていた。 |
| メソッドの内容 | 一部異なっていた。countTimeメソッドでカウントを更新するようにしたかったが、startメソッドに組み込まれていて、countTimeメソッドが存在しなかった |
| 処理の流れ | 基本的には想定通りだが、設定時間の保存がresetメソッド実行時のみに指定していたが、setTimerメソッド実行時にも設定時間を保存していた。処理自体は問題なかった |
3. まとめ
今回は、bolt.newにシーケンス図を渡して、どこまで生成してくれるかを試してみました。
結果としては基本的な機能は実装してくれていて、動くことを確認できました。
メソッド名やコメントなど、長い文章を指定している場合、指定した内容とは、多少異なる内容が生成されることもあるようです
また、処理が一部想定と異なっている部分がありましたが、今回は、とても簡単なプロンプトを指定しただけだったので、実際には、より具体的な内容をプロンプトで指定すると良いと思われます。
Acroquest Technologyでは、キャリア採用を行っています。
- Azure OpenAI／Amazon Bedrock等を使った生成AIソリューションの開発
- ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発
- マイクロサービス、DevOps、最新のOSSやクラウドサービスを利用する開発プロジェクト
- 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。
