無料のAIエージェントにサービス作ってもらった話

ryotaharuki0
4月7日
読了時間: 7分

イントロダクション

SNSのXを見ていると、「使えないので、AIエージェントを解雇しました」というポストがちらほら出てきましたね。高額な利用料金に見合った完璧なアウトプットを出せるようになるまでには、もう少し時間が必要なようです。

そんなAIエージェントの無料枠を使って、前々から作りたいと思っていた「組織図エディター」と「フィットネススタジオ予約サービス」を作ってみました。

何度やってもバグを仕込んできたり、こちらが期待する以上のアウトプットを出したりと、一喜一憂しながら開発を進めていくうち、AIエージェントを使ってどのように開発を進めていくかの解像度が高まってきたので、参考までにご紹介します。

サービスの紹介

AIエージェントで作成した２つのサービスの簡単な紹介をします。まだフロントエンド部分だけを実装しているので、データベースへの保存などのバックエンド部分はこれから実装予定です。

組織図エディター
組織図エディターは、ドラッグアンドドロップで組織図を作っていくサービスで、組織図をJSON形式でエクスポート・インポートする機能、作成した組織図をHTML形式で出力する機能を有しています。

組織が成長し、メンバーが増えてくると、どのメンバーをどのチームに所属させるか、人員を組み替えた後の組織構成を視認したい要望が一定数あると想定して、本サービスを作成しました。

「社員を追加」ボタンをドラッグして既存の社員の上にドロップすると、部下の社員が追加されます。また、既存の社員を他の社員にドラッグアンドドロップすると、その社員の部下として編集されます。社員の名前や役職名、アイコン画像も変更可能です。
今後の機能追加案としては、特定の組織の表示・非表示を切り替えられるようにしたり、チームメンバーのスキル一覧が参照できるようにしたりなどを検討しています。
フィットネススタジオ予約サービス
フィットネススタジオ予約サービスは、スタジオの管理者、会員の双方が利用するスケジュール登録・予約サービスです。

私が通っている格闘技道場のホームページに週間スケジュールのタイムテーブルが掲載されているのですが、最新化されておらず実態に合っていない状況でした。道場の先生方は兼業をしており、ホームページを更新する時間もないので仕方ないですが、このままでは、新規会員が見学に来た時に戸惑うので、タイムテーブルを容易に更新可能にして最新状況がわかるようにしたい、という思いがこのサービスを作ろうとした動機でした。Googleカレンダーでいいのでは？という話はおいておきましょう。

まだプロトタイプなので、管理者モードと会員モードをトグルスイッチで切り替えるようにしていますが、本来はログインしたユーザーのロールによりモードを切り替えます。管理者モードでは、日時やインストラクターを指定してクラススケジュールを登録し、会員モードでは、あらかじめ登録されたスケジュールを予約します。

AIエージェントの紹介

今回は、Vercel社が提供する「v0」というAIエージェントを使いました。無料枠プランでは、200クレジット/月（UI生成やコード出力などの操作ごとに消費される単位）まで利用可能で、10回/日までプロンプトで指示可能という制限があります。

Vercel社はReactベースのフレームワーク「Next.js」の開発元であり、フロントエンドアプリケーションをホスティングするPaaSも提供しています。

「v0」は、フロントエンドアプリケーションの開発に特化しており、画面表示のプレビューを確認しながら、プロンプトで部品のコンポーネントごとに微調整を指示したりできるのが特徴です。

開発時の試行錯誤

こんな感じの画面構成で、こういうことを実現したい、などの簡単な要件定義を最初にテキストで指示した結果、AIエージェントが作成した画面は、想像以上にスタイリッシュなものでした。

詳細設計レベルの細かい指示まで出していないので、AIエージェントが勝手に判断して作りこんだ機能もあり、そんな良いアイデアもあるのかと驚いたり、全然使えないのでやめてほしいと落胆することもありました。

また、何度指示しても実現できない機能の場合は、こちらで実装案のソースコードを書いて、これを参考に修正して、と依頼した結果、ようやくこちらが考える機能が実現できる場合もありました。

フロントエンド開発を得意とする人の場合は、最初にざっくりとAIエージェントにプロトタイプを作ってもらって、あとは自分で修正したほうが早いかもしれません。私はフロントエンド開発は苦手なので、可能な限りプロンプトで依頼していったので、微妙なニュアンスが伝わらなかったり、伝え方が難しいケースもありました。

例えば、「組織図エディター」の場合、社員間で親子関係を作って組織図風に自動レイアウトしたかったのですが、「社員のノードが追加されたら、他の社員のXY座標の間隔をあけて重ならないようにレイアウト調整して」と依頼したところ、社員と社員をつなぐ線が重なったり、追加した社員が上司の下に隠れたりと一向に期待通りの結果になりませんでした。

最終的には、「社長の下に二人の部下が所属している。社長と部下の関係は親子関係のノードとする。二人の部下は兄弟関係のノードとする。兄の社員に二人の部下が所属した場合、弟の社員のノードのX座標は兄の座標と一致させ、Y座標は兄の部下の二人目の部下のY座標の下に移動する」など細かく指示を出していくことでようやく期待通りの結果になりました。後で思いついたのですが、社員ノードのXY座標を指定したJSONを作成して、これ通りに作ってと依頼したほうが早かったかもしれません。

「フィットネススタジオ予約サービス」では、管理者が登録するスケジュールについて、クラスによって背景色を変えたかっただけなのですが、「スケジュール登録時に選択した背景色に変えて」という指示だけではカレンダー上の表示文字の背景色だけ変わり、スケジュールのカード全体の色が一向に変わらなかったので、スケジュールライブラリの利用例を紹介しているサイトからサンプルコードを抜き出してコピペして、これ通りに修正して、と依頼をすることで実現できました。

その他の注意点としては、何度か修正の依頼を行っていくうちに、依頼していない既存機能を勝手に修正してしまい、気に入っていたデザインが全く別の物に変わることもあるので、機能追加の毎に受入試験して、既存機能に影響がないかを確認する必要があるところです。依頼する修正内容はなるべく少なくした方が、誤った時にロールバックしやすいです。

また、AIエージェントが作成したコードにバグがあり正常に画面が表示されないケースも多々ありました。エラーが出た場合は、v0の画面上にエラー修正ボタンが表示され、修正ボタンを押すとAIエージェントがエラー理由を解析して自動修正します。また、エラー修正がうまくいかなければ、過去のバージョンへのリストア（ロールバック）も簡単に行えるので、元の状態に戻して、そこから再びエラーが発生しないように依頼内容の伝え方を変えていきます。ただし、そのたびに無料枠の1日の依頼枠を消費してしまうので、残念に感じました。