こんにちは、あさひです 🙋♂️
今回は Hono Conference でも話題になっていた Hanabi.REST を試してみたので振り返りがてら皆さんに共有したいと思います。
この記事を読んで欲しい人
- Hanabi.REST ってなんだ？って人
- Hanabi.REST の黒魔術を感じたい人
この記事でやること
Hanabi.REST で何ができるかわかることを目標にしたいと思います。
Hanabi.REST って？
Hanabi.REST は AI を使って REST API 生成するツールで、利用者がプロンプトから指示を出すことで API を作成できるサービスです。Hanabi.REST は生成された API のプレビュー機能があり TypeScript のコードと SQL、ドキュメントを確認したり、実際に生成された API を動かしてみたりすることができます。また Cloudflare の Workers と D1 、Hono などが採用されておりデプロイも簡単に行うことができます。
試してみた
ログイン
まず、Hanabi.REST にアクセスし、ログインします。アカウントがない場合はサインアップしてください。ログイン後、トップ画面から 「Generate API」ボタンを押すことでプロンプトの入力をすることができます。
API 生成
新しい API を生成するには、トップ画面から「Generate API」ボタンをクリックし、プロンプトを入力します。プロンプトは AI への指示や命令です。
ここでは例としてデフォルトで表示がある「Create Twitter like sns」を入力して API を生成してみようと思います。
またプロンプト入力画面でいくつかのオプションの選択ができます。画像を選択したり、API の生成について速度か質の何を優先するかを選べたりするみたいですね。
ではプロンプトが入力できたら「Generate→」ボタンで生成していきます。もしかするとしばらく時間がかかるかもしれません。気長に待ちましょう、完了すればプレビュー画面が表示されるはずです。
プレビュー画面
API の生成が終了すると以下のような画面が表示されるかと思います。ここでは以下の項目が用意されています。それぞれプレイグラウンドでは 2 つまで並べて表示できるようになっていますね。それぞれ個別に見ていきましょう。
API Guide
ここはもう文字通りですが生成された API の簡単な使い方について説明がされてますね。
Document
ここは各それぞれの API ドキュメントになっています。メソッドの種類やエンドポイント、request body、response とこの API が何をしてくれるかの説明まで必要十分な情報はここで確認できそうですね。
SQL Editor
DaaS によくあるコンソールで SQL を実行できる機能を想像してもらうといいと思います。今回だとデプロイ先が Cloudflare の D1 互換なので D1 のコンソールにもあるやつですね。
API Client
ここで生成された API の動作を確認してみることができます。皆さんが API の疎通確認とかで使ってるアレです。
デプロイを実際にしてない API がブラウザ上で動くのが不思議ですよね。（裏側はどうなってるんだろうか 🤔）
Table Viewer
これは「SQL Editor」で実行した結果を確認できる画面です。
Code Editor
生成された API のコードを確認することができます。ブラウザ上でコードが確認できるだけかと思いきやしっかり型も当たってます、ほぼ IDE です。
実際にデプロイする前にここで自分でコードを修正して動作確認してからデプロイするみたいなことが可能です。
デプロイ
生成されたコードのデプロイも Hanabi.REST のコンソールもしくは CLI から行うことができるみたいです。今回は CLI でローカルにコードを落としつつデプロイまでやってみようと思います。
プレビュー画面の右上の方にスペースシャトルが飛んでるマークがあるのでここから方法が確認できます。
Configure the Hono.js project and install dependencies.
なるほど、まずはプロジェクトを作るみたいですね。以下のコマンドでローカルに作成した API のプロジェクトを作成することができます。
<version-id>の箇所は実際には生成したコードが入ってるかと思います。
$ npx @hanabi.rest/cli create <version-id>
Edit the wrangler.toml file to specify the D1 Database ID, then migrate the database.
DB がある場合はマイグレーションをするみたいです。今回は割愛しますが Cloudflare のコンソールで D1 を作成します。<YOUR_DATABASE_ID>だけ書き換えれば OK です。
[[d1_databases]]
binding = "DB"
database_name = "my-database"
database_id = "<YOUR_DATABASE_ID>"
migrations_dir="./migrations"
あとは以下のコマンドを流すだけでマイグレーションに関しては完了するはずなのですが私の場合はなぜかうまくいきませんでした。
後ほどやりますが、アクセストークンの登録を先にしていなかったからできなかったのかもしれません。
仕方ないので Cloudflare D1 のコンソールからmigrations/schema.sqlにある SQL を直接実行しました。
This application is private. You need to issue an Access Token.
（これを読み飛ばして進めたからですかね 😅）
## local migration
$ npm run migrate
## prod migration
$ npm run migrate:prod
To start and deploy a project with Wrangler, enter the following command.
さてではデプロイをしてみようと思ったのですがうまくいかない…はい、そうです。アクセストークンを設定できていませんでした。
以下のコマンドでできるみたいです。実行してみると指定の URL を開いて生成したアクセストークンを入力するように言ってきます。
指示通りトークンを作成して設定を進めてみます。
$ npx @hanabi.rest/cli config set
気を取り直して以下のコマンドでデプロイを試してみます。
はい、無事デプロイ先を選択してデプロイが完了しました！🎊
## deploy to cloudflare workers
$ npm run deploy
動作を確認してみます。ちゃんと動いていそうです。やったぜ 🙌
$ curl -X POST https://<workerのエンドポイント>/users \
-H "Content-Type: application/json" \
-d '{"email": "user4@example.com", "password": "password4"}'
{"id":"d2dc5b7e-6458-4fc2-bd53-a96d392b8856","email":"user4@example.com"}
感想
さて一通り触ってみてですが、サービス自体の発想はものすごく面白いなと思いました。実際触ってみてうたっていることはできていると思います 🤔
ただ生成されたコードの品質についてはかなり不安がありそう。簡単なプロンプトで試したので仕方ないのかもしれないと思いつつも一部雛形としても微妙なコードもあったり…🫠
プロンプトが原因かと思い他にも試したのですが、外部ライブラリが使えなかったり、テストがなかったり、何回試しても精度に不安があったりしそうです。
ただこの辺りは開発者の Zenn の記事でも触れていますが今後の課題にはなっているみたいですので今後に期待したいと思います 🧑💻
参考
Discussion