はじめに
こんにちは、たろです。普段はREST APIベースのバックエンド開発をしています。今日は、そんなAPI開発の日常から生まれた「Voluta」というVS Code拡張機能の開発のポエム、宣伝です。
「なんでこんなツールがまだなかったんだろう？」と思った瞬間から、実際に作って公開するまでの道のりを、技術的な話よりも「開発者としての気持ち」を中心にお伝えします。
毎日のAPI開発で感じていた「もどかしさ」
皆さんも経験ありませんか？APIのテストでcURLコマンドを使うときのあの手間。
- ターミナルに長いcURLコマンドを貼り付ける
- ヘッダーをちょっと変えたいな…
- パラメータを調整したい…
- あ、また最初から貼り直し…
特に開発中は、同じエンドポイントに対して微妙にパラメータを変えて何度もテストするのが日常茶飯事。毎回コマンドをコピペして、手動で編集して…という作業が本当に面倒でした。
「Firefoxの開発者ツールには『Edit and Resend』って便利な機能がある鬼Chromeには簡単にできる機能がない。。。VS Code内もない。。。」
「PostmanみたいなGUIツールもいいけど、シンプルにcURLでやりたいときもある」
（じゃあFirefoxで開発しろよ、というのに対してはまた色々考えがあります。またそれは違う日のお話。そして、今回開発したのはEdit&Resendを超えていると思います！）
そんな思いが日に日に強くなっていきました。
VSCode拡張なので、BE開発者は。。。
さっさとダウンロード！
拡張から「Voluta」で検索！
https://marketplace.visualstudio.com/items?itemName=YutaroWatanabe.voluta&ssr=false#overview
使い方
Chromeでの導入が前提ですが、だいたいどのブラウザでも同じです。
- デバッグしたいWebサービスへ行く（localhost, Prodでも）
- Consoleを開く。(LinuxならCtrl+Shift+I, Mac使いはわかりません、ごめんなさい)
- Networkタブを開く。REST APIなら、多分Fetch/XHRフィルタ内を見るのが鉄板。この状態でテストしたい元となるリクエストを送る。
- そのエントリを見つけ、右クリック。Copyから、Copy as cURLを選択。
- VSCodeにてコマンド貼り付け。that's it!
開発の中で「これは便利！」と思った機能
苦労もありましたが、実際に使ってみて「これはいい！」と思える機能もいくつか実装できました。
1. ループ実行機能
これは個人的に一番気に入っている機能です。例えば：
- ユーザーIDを1から10まで変えてテストしたい
- 異なる認証トークンで試したい
- 複数のエンドポイントをまとめてテストしたい
- DBが空のバックエンドを立ち上げたときに、一気に大量にリクエストを送ってオブジェクトを作りたい
こんなときに、一度設定するだけで自動で繰り返し実行してくれます。API開発のテスト作業が格段に楽になりました。
ちなみに、ループは並行ループもできます。
イメージとしては、ループしたいフィールドが3つあったとします。
A: [a1, a2, a3]
B: [b1, b2, b3]
C: [c1, c2]
ループはデフォルトで全組み合わせが前提ですが、それが必要ない場合もありますよね。AとBを並行で走らせる場合、
- a1, b1, c1
- a2, b2, c1
- a3, b3, c1
- a1, b1, c2
- a2, b2, c2
- a3, b3, c2
- a1, b1, c3
- a2, b2, c3
- a3, b3, c3
というような処理ができます。当然、AとBは同じ長さである必要があります。
そして、このループ、以下の全てについて、mix/matchで同時処理できます。
1．route (base url, protocol, api route等)
2. header (JWT token, -H header, -b header等)
3. URL Parameter
4. Form Data
ただやりすぎ禁物です、7パターンを7フィールドで7P7 -> 5000超えします。
2. リアルタイム編集
cURLコマンドを貼り付けると、自動的にURL、ヘッダー、ボディデータなどが分解されて表示されます。各部分をGUIで編集できるので、コマンドラインが苦手な人でも直感的に操作できます。
3. 実行履歴の保存
実行結果はエクスポートできます。この機能はもっと良くしていきたいですね。
開発を通じて学んだこと
1. 「ありそうでない」ものの価値
世の中には便利なツールがたくさんありますが、自分の日常的な不便さを解決するツールは、意外と見つからないことがあります。小さな不便さに気づき、それを解決しようとする姿勢が新しいものを作るきっかけになるんだな、と実感しました。
2. オープンソースの力
このプロジェクトでは、parse-curl-jsやcurlconverterといったオープンソースのライブラリを活用しました。これらの既存の資産があったからこそ、比較的短期間で実用的なツールを作ることができました。
3. LLM すげえ
割とLLMに手伝ってもらいましたね。言わずもがな、自力だけでやるとなったらもっと全然時間がかかったと思います。
おわりに
「Voluta」は、私自身が日々の開発で感じていた「もどかしさ」から生まれたツールです。技術的には特別なものではありませんが、実際に使う開発者の気持ちを考えて作った点に価値があると思っています。
もしあなたも「こんなツールあったらいいな」と思っていることがあれば、ぜひ挑戦してみてください。小さな不便さの解決が、誰かの役に立つ素敵なツールになるかもしれません。
Volutaはこちらから試せます
- VS Code Extensionで 「Voluta」 または 「cURL editor」 を検索してインストールしてください。
- https://marketplace.visualstudio.com/items?itemName=YutaroWatanabe.voluta&ssr=false#overview
使ってみた感想や要望があれば、ぜひ教えてください！一緒にもっと便利なツールにしていきましょう。
(本記事は、Zenn様にも投稿しております。）