curl→fetch/axios変換ツール | APIリクエストをそのままJSコードへ

ドキュメントやSlackで共有されたcurlコマンドを、ブラウザ上でJavaScriptのfetchまたはaxiosコードへ書き換えるツール。メソッド・ヘッダー・JSONボディ・Basic認証を読み取り、貼り付けと同時に2つの形式を切り替えて表示する。

💡 このツールについて

API連携の手順書やcurlの例はバックエンド寄りの記法で書かれることが多く、フロントエンドの実装に落とすときに毎回手で組み直す手間が発生する。-H を headers オブジェクトへ、-d を body や第2引数へ、-u を Authorization ヘッダーや axios の auth へと、頭の中で対応表を引きながら書き写すのは地味に間違えやすい工程である。

このツールは curl の主要オプション（-X / --request、-H / --header、-d 系のデータ、-u / --user、-b / --cookie、-I / --head）を解析し、対応する fetch または axios のコードを生成する。-d を指定すると GET から POST へ自動で切り替わるなど、curl の暗黙の挙動も反映する。ボディが JSON として妥当な場合は JSON.stringify(...) でラップし、そうでなければ文字列として扱う。

すべての処理はブラウザ内のJavaScriptで完結し、貼り付けたコマンドが外部に送られることはない。社内APIのトークンを含むcurlを試しに変換しても安全である。

🧐 よくある質問

Q. fetchとaxiosはどう使い分ければよいですか? fetchは標準APIで追加ライブラリ不要、axiosはレスポンスの自動JSONパースやインターセプターなど便利機能が揃う。両方の出力を並べて比較し、プロジェクトの方針に合う方を選べる。

Q. 複数行に分かれたcurl（行末がバックスラッシュ）も読めますか? 読める。行末の \ と改行を結合してから解析するため、ドキュメントからコピーした整形済みのコマンドでもそのまま貼り付けられる。

Q. -u user:pass のBasic認証はどう変換されますか? fetchでは Authorization ヘッダーに Basic ${btoa('user:pass')} を組み立てる。axiosでは auth: { username, password } の形式に分解する。

Q. 認識できないオプションがあるとどうなりますか? 未対応のフラグは読み飛ばし、URLとサポート済みオプションだけを使って変換する。生成後のコードは手元で必要に応じて補える。

Q. クエリパラメータ付きのURLはどう扱われますか? URLはそのまま fetch / axios の第1引数に渡される。クエリ文字列を含むURLでも分解せずに保持する。

📚 豆知識

curl は 1998 年に Daniel Stenberg が公開した転送ツールで、いまや世界中のサーバーや組み込み機器に同梱されている。一方、ブラウザの fetch API は 2015 年に登場し、古い XMLHttpRequest を置き換える存在になった。「curl で動いた API を、そのままフロントエンドへ」という橋渡しは、サーバー検証からクライアント実装へ移る開発の現場で日常的に発生する作業である。axios はその間を埋めるサードパーティライブラリとして長く支持されてきた。