はじめに
前回の記事で、初心者でもバイブコーディングで簡単にWebサービスが作れるよ、という話をしました。
その際に、GeminiやChatGPTに質問形式で仕様書を作ってもらうという話をしたのですが、ちょっと素のGeminiだと個人的に使いづらいところがあったので、それならいっそのことWebサービスとしてみたらいいんじゃないかと思ったわけです。
Webサービスの概要
使い方は簡単! 「プロジェクト名」と「プロジェクトの概要」を入力して、そのまま生成された質問に回答するだけ。
最終的にマークダウン形式で仕様書が作成されます。
技術的なポイント
AIのAPIとWebサービスを組み合わせるときの「Tips」がまだまだ知られていないところだと思います。
今回ご紹介するのは、AIからの回答をJSONで指定して、それを取り出すという技術です。
かなり汎用的な技術なので、AIを活用したアプリケーションの開発を考えている方は必見!
まずプロンプトにて、「JSON形式の配列で回答してください。」と指定しましょう。
そうすると、例えば以下のような回答が返ってきます。
わかりました。以下がJSON形式の配列による回答です。
```json
[...]
```
あとはこれを正規表現を使って
match = re.search(r'```json\s*([\s\S]*?)\s*```', question_text)
json_str = match.group(1)
json_data = json.loads(json_str)
のようにすれば、JSONデータを配列で取得することができます。(例外処理は省いています)
Gemini CLIによるWebサービスの開発のポイント
今回はGemini CLIを使って、このWebサービスを半日程度で開発しました。もちろん無料枠を使っています。
基本的には、フロントエンド側のほとんどとバックエンドの半分をGemini CLIにまかせて、上記のAIのAPIまわりのPythonコードについては自分で書いています。
もちろん最初Gemini CLIが作ったWebサービスは正しく動作しません。このデバッグは人間がやるようにしましょう。デバッグをGemini CLIにまかせると、迷宮に入り込んで一生抜け出せなくなり、挙句の果にコードを全て削除しだすという恐ろしい誤動作?を起こすことがあります。
このようなところでも、今の段階ではAIと人間が手を取り合って開発するのが一番効率が良いなと思うところです。
おわりに
今回のWebサービスは8割ほど自分のために開発したようなものですが、使いやすく結構満足のいく出来です。
みなさんも楽しくLet's vibe coding!!