curl を JavaScript に変換
curl2code は、ネイティブの fetch API を使用して curl コマンドを JavaScript コードに変換します。完全なプライバシー保護のため、すべて WebAssembly を介してブラウザ内でローカルに実行されます。サーバーサイドの Node.js コードが必要な場合は、curl to Node.js 変換ツールをお試しください。型安全性については、curl to TypeScript 変換ツールをご確認ください。以下に、一般的な HTTP パターンの実用的な例を示します。
ブラウザから curl をコピーする方法
- 1
デベロッパーツールを開く
F12 キーを押すか、Ctrl+Shift+Iを使用してブラウザのデベロッパーツールを開きます。
- 2
ネットワークタブに移動
ネットワークタブをクリックし、HTTP リクエストをトリガーするアクションを実行します。
- 3
cURL としてコピー
リクエストを右クリック → コピー → cURL としてコピー を選択します。その後、上に貼り付けてください。
よくある質問
Fetch APIとは何ですか？
Fetch APIは、HTTPリクエストを行うためにすべてのブラウザに組み込まれている、モダンなPromiseベースのインターフェースです。従来のXMLHttpRequestを、よりクリーンで強力なAPIに置き換えます。Fetchはストリーミング、リクエスト/レスポンスオブジェクト、CORSをサポートし、async/awaitと自然に統合されます。インストールは不要で、グローバルに利用可能です。curl2codeは、JavaScript変換のデフォルト出力としてFetchを使用します。
Fetch、XMLHttpRequest、jQuery.ajaxのどれを使うべきですか？
Fetchはモダンな標準であり、新しいプロジェクトで使用すべきです。XMLHttpRequestはレガシーですが、依然としてどこでも動作し、ネイティブで進捗イベントをサポートしています。jQuery.ajaxは、プロジェクトですでにjQueryを使用している場合に便利です。サーバーサイドのJavaScriptについては、curl to Node.js コンバーターをご覧ください。型安全性については、curl to TypeScriptをお試しください。
Fetchで認証を処理するにはどうすればよいですか？
Authorizationオプションでheadersヘッダーを渡します：fetch(url, { headers: { "Authorization": "Bearer token" } })。Basic認証の場合は、btoa(user + ':' + pass)で資格情報をエンコードします。curl2codeは-uおよび-H 'Authorization: ...'フラグを自動的に検出します。
Fetchでマルチパートフォームデータを送信するにはどうすればよいですか？
FormDataオブジェクトを作成し、bodyとして渡します：fetch(url, { method: "POST", body: formData })。Content-Typeを手動で設定しないでください。ブラウザが自動的にマルチパートの境界（boundary）を追加します。curl2codeは-FフラグをFormDataに変換します。
Fetchでエラーを処理するにはどうすればよいですか？
Fetchはネットワーク障害の時のみ拒否（reject）され、HTTPエラーでは拒否されません。ボディを読み取る前に、必ずresponse.okまたはresponse.statusを確認してください。try/catchと共にasync/awaitで囲むことで、ネットワークエラーとパースエラーの両方を一箇所で処理できます。
Fetchでasync/awaitを使用するにはどうすればよいですか？
FetchはPromiseを返すため、const response = await fetch(url)に続けてconst data = await response.json()を使用します。エラー処理のためにtry/catchブロックで囲んでください。これは.then()のチェーンよりもクリーンであり、モダンなJavaScriptで推奨されるパターンです。
Fetchリクエストのタイムアウトを設定するにはどうすればよいですか？
AbortControllerを使用します。コントローラーを作成し、fetchに{ signal: controller.signal }を渡し、controller.abort()で遅延させた後にsetTimeoutを呼び出します。モダンなブラウザは、よりシンプルな1行のAbortSignal.timeout(5000)もサポートしています。curlの--max-timeはこのパターンにマッピングされます。
FetchでCORSの問題を処理するにはどうすればよいですか？
CORSはFetch自体ではなく、ブラウザによって強制されます。mode: 'cors'（デフォルト）を設定し、サーバーが適切なAccess-Control-Allow-Originヘッダーを送信していることを確認してください。資格情報（クッキー）については、credentials: 'include'を追加します。CORSはサーバーサイドのコードには適用されません。それについては、curl to Node.js コンバーターをご覧ください。
JavaScriptでJSONボディを含むPOSTリクエストを送信する方法は？
curl2codeを使用して、curl -X POST -H "Content-Type: application/json" -d '{"key":"value"}' URLのようなcurlのPOSTコマンドをJavaScriptに変換します。生成されたコードではfetch(url, { method: 'POST', body: JSON.stringify(data), headers: {'Content-Type': 'application/json'} })を使用します。curl2codeはJSONコンテンツを含む-d/--dataフラグを自動的に検出し、fetchのコードに適切なContent-Typeヘッダーを設定します。
JavaScriptでBearerトークン認証を追加する方法は？
curl -H "Authorization: Bearer YOUR_TOKEN" URLをcurl2codeに渡すと、認証ヘッダーheaders: { 'Authorization': 'Bearer YOUR_TOKEN' }を含むfetchのコードが生成されます。curl2codeは-H "Authorization: Bearer ..."と--oauth2-bearerフラグの両方からBearerトークンを検出します。Basic authの場合は、-u user:passを使用してください。
JavaScriptでContent-Typeヘッダーを設定する方法は？
curl2codeはcurl -H "Content-Type: application/json" URLを、適切なヘッダーheaders: { 'Content-Type': 'application/json' }を含むfetchのコードに変換します。-dデータの場合、curlはデフォルトでapplication/x-www-form-urlencodedを使用し、-Fフォームアップロードの場合はmultipart/form-dataを使用します。curl2codeはそれぞれを正しいfetch APIにマッピングします。