curlコマンドをJavaScript Fetch APIに変換

curlからJavaScript Fetchへの変換

Fetch APIは、JavaScriptでHTTPリクエストを行うための最新の標準であり、すべてのブラウザとNode.js 18以降で利用可能です。curlをfetchに変換することは、フロントエンドおよびフルスタック開発者にとって不可欠なスキルです。

GETリクエスト

curl:

curl https://api.example.com/users

JavaScript:

const response = await fetch("https://api.example.com/users");
const data = await response.json();

JSONを使ったPOST

curl:

curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name": "Alice"}'

JavaScript:

const response = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice" }),
});
const data = await response.json();

Bearerトークン認証

curl:

curl -H "Authorization: Bearer token123" https://api.example.com/me

JavaScript:

const response = await fetch("https://api.example.com/me", {
  headers: { "Authorization": "Bearer token123" },
});

エラーハンドリング

curlとは異なり、fetchはHTTPエラーステータスコードでrejectしません。response.ok を手動で確認する必要があります:

const response = await fetch("https://api.example.com/data");
if (!response.ok) {
  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();

curlとの主な違い

curlの動作	fetchでの対応
リダイレクト自動追跡	redirect: "follow"（デフォルト）
-X METHOD	method: "METHOD"
-H "Key: Value"	headers: { "Key": "Value" }
-d 'body'	body: "string"
-u user:pass	headers: { "Authorization": "Basic " + btoa("user:pass") }
Cookie処理	credentials: "include"
タイムアウト	AbortSignal.timeout(ms)

中断とタイムアウト

const response = await fetch("https://api.example.com/data", {
  signal: AbortSignal.timeout(5000),
});

FetchはクリーンなPromiseベースのAPIを提供し、最新のasync/await JavaScriptパターンと自然に統合できます。