cURL コマンドを JavaScript fetch・Python requests に変換する方法|DevTools 連携
API デバッグでよくある作業が「Chrome DevTools で確認した cURL コマンドをそのままコードに落とす」というものです。本記事では <strong>cURL のオプション体系</strong>、DevTools の「Copy as cURL」機能の仕組み、主要言語 (JavaScript fetch / axios / Python requests / PHP cURL / Go net/http) への変換パターンを解説します。末尾で紹介する <a href="/ja/tools/curl/">cURL 変換ツール</a> を使えば、これらをコピペ一発で変換できます。
なぜ cURL を起点にするのか
API を実装・デバッグする際、まず「curl で叩いて動くか確認してからコードに起こす」というワークフローが一般的です。理由は以下の通り:
- <strong>言語非依存</strong>: curl はほぼあらゆる環境で使える共通言語
- <strong>DevTools から即コピー</strong>: Chrome / Firefox / Safari の Network タブでリクエストを右クリック → Copy as cURL で完全な再現コマンドを取得できる
- <strong>再現性の担保</strong>: バグ報告や Stack Overflow の質問で curl コマンドを添付すれば、環境差なく相手に同じリクエストを試してもらえる
cURL の主要オプション
最低限押さえるべき cURL オプションは以下です。
| オプション | 用途 | 例 |
|---|---|---|
-X / --request | HTTP メソッド指定 | -X POST |
-H / --header | リクエストヘッダ追加 | -H "Content-Type: application/json" |
-d / --data | リクエストボディ | -d '{"id":1}' |
--data-raw | エスケープ解釈をしない生データ | --data-raw 'a=1&b=2' |
-F / --form | multipart/form-data | -F "file=@./a.png" |
-u / --user | Basic 認証 | -u user:pass |
-b / --cookie | Cookie 送信 | -b "session=abc" |
-L / --location | リダイレクト追跡 | — |
-k / --insecure | SSL 証明書検証スキップ (開発時のみ) | — |
--compressed | gzip 受け入れ | — |
DevTools の「Copy as cURL」で何が得られるか
Chrome / Firefox / Edge で Network タブを開き、任意のリクエストを右クリックすると <strong>Copy → Copy as cURL</strong> というメニューがあります。これをクリックすると以下が完全に再現されたコマンドがクリップボードにコピーされます。
- HTTP メソッドとフル URL
- 送信されたすべてのリクエストヘッダ (Authorization / User-Agent / Accept / Cookie など)
- リクエストボディ (JSON / form-data / binary)
- ANSI-C quoting (<code>$'...'</code>) によるエスケープ
注意点として、Firefox の「Copy as cURL」は <code>--data-raw</code> を使うのに対し、Chrome は <code>--data-binary</code> を使うなど微妙な差があります。変換ツール側でどちらも認識できる実装になっている必要があります。
JavaScript fetch への変換
典型的な JSON POST の変換例を示します。
# cURL
curl -X POST https://api.example.com/users \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer YOUR_TOKEN' \
-d '{"name":"Alice","email":"alice@example.com"}'
// JavaScript fetch
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_TOKEN',
},
body: JSON.stringify({ name: 'Alice', email: 'alice@example.com' }),
})
.then(r => r.json())
.then(console.log);
axios 版
import axios from 'axios';
axios.post(
'https://api.example.com/users',
{ name: 'Alice', email: 'alice@example.com' },
{ headers: { 'Authorization': 'Bearer YOUR_TOKEN' } }
).then(r => console.log(r.data));
Python requests への変換
import requests
response = requests.post(
'https://api.example.com/users',
headers={
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_TOKEN',
},
json={'name': 'Alice', 'email': 'alice@example.com'},
)
print(response.json())
ポイントは <code>data=</code> ではなく <code>json=</code> を使うこと。<code>json=</code> を指定すると requests が自動で JSON シリアライズし、Content-Type も自動設定されます。
PHP cURL への変換
<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.example.com/users');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'Authorization: Bearer YOUR_TOKEN',
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode([
'name' => 'Alice',
'email' => 'alice@example.com',
]));
$response = curl_exec($ch);
curl_close($ch);
echo $response;
Go net/http への変換
package main
import (
"bytes"
"io"
"net/http"
)
func main() {
body := bytes.NewReader([]byte(`{"name":"Alice","email":"alice@example.com"}`))
req, _ := http.NewRequest("POST", "https://api.example.com/users", body)
req.Header.Set("Content-Type", "application/json")
req.Header.Set("Authorization", "Bearer YOUR_TOKEN")
res, _ := http.DefaultClient.Do(req)
defer res.Body.Close()
data, _ := io.ReadAll(res.Body)
println(string(data))
}
注意: トークンのハードコードは厳禁
cURL コマンドをコードに落とすとき、Authorization ヘッダの値 (Bearer トークンや API Key) を <strong>そのままコードに書いてコミット</strong> しないように注意してください。
- 本番トークンは環境変数 (<code>process.env.API_TOKEN</code> / <code>os.environ['API_TOKEN']</code> / <code>getenv()</code>) 経由で読む
- コミット前に <code>git diff</code> で秘密情報が混ざってないか確認
- 既に commit してしまった場合はトークンを即時無効化 (rotation)、そして履歴を書き換える (git filter-repo)
DevLab の cURL 変換ツール
<a href="/ja/tools/curl/">DevLab の cURL ⇄ fetch / axios 変換ツール</a> は、上記すべての変換を <strong>ブラウザ完結</strong> でワンクリック実行します。対応ターゲットは 13 種類:
- JavaScript: fetch / axios / node-fetch / Node.js 標準 https
- Python: requests / urllib
- PHP: cURL / file_get_contents
- Go: net/http
- Rust: reqwest
- wget / HTTPie / PowerShell Invoke-WebRequest
cURL 側のオプションは <code>-X</code> <code>-H</code> <code>-d</code> <code>--data-raw</code> <code>--data-binary</code> <code>--data-urlencode</code> <code>-F</code> <code>-u</code> <code>-b</code> <code>-A</code> <code>-e</code> <code>-L</code> <code>-k</code> <code>-I</code> と ANSI-C quoting <code>$'...'</code> に対応しており、Chrome と Firefox の「Copy as cURL」出力をそのまま受け付けます。
まとめ
cURL は言語非依存の HTTP 再現共通言語として極めて便利で、DevTools と組み合わせれば実運用中の API リクエストを即座に再現できます。本記事で示した変換パターンを押さえれば、どの言語からでも同じ挙動を再現できます。手作業で変換すると抜け漏れ (特に Content-Type や引用符のエスケープ) が発生しやすいので、ツール化された自動変換の活用を強くおすすめします。