JSON 設定

URL

JSON to URL は何をするツール？

HTTP エンドポイントの各部位 — protocol、host、path、クエリパラメータ、hash — を記述した JSON オブジェクトがあって、それを fetch()、curl、または HTTP クライアントが飲み込める1本の URL 文字列にしたい。左に JSON を貼り付ければ、右に組み立て済み・パーセントエンコード済みの URL が出ます。バックエンドのテストフィクスチャ、OpenAPI のサンプル、設定ファイル — どれも結局この変換を必要とします。

ブラウザネイティブの URL コンストラクタと URLSearchParams を使って組み立てるので、エンコードは WHATWG URL 標準が定義する通り、実際のブラウザが送るのと完全に同じ内容になります。クエリ内のスペースは + に、角括弧は %5B/%5D に、アクセント記号や絵文字は UTF-8 でパーセントエンコードされます。クエリキーの繰り返しは配列で渡します — "tag": ["red", "blue"] は tag=red&tag=blue を出力します。

このページが存在するのは、ほとんどのプロジェクトが URL をどこかしら JSON で持っているからです — 環境ファイル、Postman コレクション、Cypress フィクスチャ、OpenAPI スペック、Helm values。その JSON をスクリプトや一回限りの curl のために実際の URL 文字列にしたい時、手で繋ぎ合わせるとバグの温床になります。変換は URL 構文について RFC 3986 に従い、入力は RFC 8259 準拠の標準 JSON を受け付けます。すべてローカルで実行 — JSON も URL もブラウザの外には出ません。逆方向は URL to JSON にあります。

JSON を URL に変換する方法

3 ステップ。それぞれがこのページのボタンに対応します。

JSON 設定を貼るかサンプルをロード

URL の各部位を記述した JSON オブジェクトを左にドロップします。必須フィールドは protocol と host だけ、それ以外はすべてオプションです。サンプルを押すと、複数のクエリパラメータと hash を持つリアルな EC エンドポイントがロードされます:

{
  "protocol": "https",
  "host": "api.shop.example.com",
  "pathname": "/v1/orders",
  "searchParams": {
    "customer": "Ava Chen",
    "status": "active",
    "total[gte]": "49.99",
    "page": "2"
  },
  "hash": "summary"
}

オプションのフィールド: port、username、password、pathname、searchParams、hash。searchParams 内では文字列は単一の値、配列は繰り返しキーを意味します。JSON 構文は JSON.parse でパースされます — コメントなし、末尾カンマなし。

組み立てられた URL を確認

右パネルは入力に応じてリアルタイムに更新されます。完全な URL — https://api.shop.example.com/v1/orders?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2#summary — が、URL 標準で定義された通りに各部位がパーセントエンコードされた形で表示されます。これをそのまま fetch() 呼び出し、curl コマンド、Postman テスト、または URL 文字列を 1 本期待する設定ファイルに流し込めます。

コピーまたはダウンロード

コピーを押すと URL がクリップボードに送られ、ダウンロードを押すとテキストファイルとして保存できます。新しい設定でやり直すには入力パネルのクリアを使ってください。

こういう時に使います

OpenAPI サンプルを実行可能な curl コマンドに変える

OpenAPI スペックはサーバーを {url, variables} として、操作を parameters 付きの path として記述します。それらから一回限りの curl 用の実際の URL を手で組み立てるのは面倒です — path 変数の代入、クエリパラメータのエンコード、末尾スラッシュの扱い。マージ済みの JSON をここに貼って URL をコピー、curl に貼り付け。マージされた形は OpenAPI の server-object が記述するものと一致します。

環境変数に分割された URL から URL を組み立てる

12-factor のアプリは URL の各部位を別々の環境変数として保存します: API_HOST、API_PORT、API_BASE_PATH、API_TOKEN_PARAM。インシデント対応中の動作確認 curl のために完全な URL を作るには、それらを組み立てる必要があります。JSON の形でこのページに貼って URL を取得、実行。bash でスクリプトを書くより速く、+ を含むトークンのエンコードを忘れるリスクもありません。

URL をオブジェクトで保存している Cypress / Playwright フィクスチャ

テストフィクスチャでは、各部位（orderId path param、page クエリ param など）を個別にアサートできるよう、リクエスト URL を構造化された形で保存することがよくあります。フィクスチャが実 HTTP 呼び出しもする必要がある場合（例: cy.request や page.goto でデータをシード）、構造化された形を文字列に戻す必要があります。JSON to URL は Marco Rivera が保存したフィクスチャオブジェクトを、テストハーネスが叩ける URL に変えます。

テナント別設定から組み立てる Webhook URL

マルチテナントシステムは顧客ごとに webhook 設定を持っています: {host: "hooks.tenant-a.example.com", pathname: "/orders/ORD-1001/notify", searchParams: {token: "..."}}。ディスパッチャーは JSON を読んで POST する URL 文字列が必要です。このページがやっているのと同じ変換を、ランタイムでやっているだけ。コードが生成する URL が顧客の登録した URL と一致するかを、このページで確認できます。

よくある質問

URL Builder ページとの違いは何？

エンジンは同じ、フレーミングが違います。URL Builder は腰を据えてゼロから URL を組み立てる場合 — リクエストを構成している場面向け。JSON to URL は JSON がすでにどこかに存在していて（設定、OpenAPI スペック、フィクスチャ、環境変数の分割など）、それをコードが期待する URL 文字列に変換したい場合向け。やっていることに合うほうを選んでください — 出力は同じです。

うちの JSON は URL を別の形で持っている — どんな形でも使える？

WHATWG URL 標準のパート名が必要です: protocol、host、port、username、password、pathname、searchParams（オブジェクト）、hash。あなたの JSON が別のキー（scheme、baseUrl、query、fragment）を使っているなら、まずリネームしてください。この形は new URL(...) が公開しているもの、URL 仕様が定義しているものを反映していて、fetch や Node が内部で使っている同じモデルに沿うことになります。

同じクエリパラメータを 2 回送るには？（例: ?tag=red&tag=blue）

値として配列を使います: "tag": ["red", "blue"]。コンバーターは指定した順序で tag=red&tag=blue を出力します。これは URLSearchParams が繰り返しキーを扱う方法と一致し、ほとんどのサーバー（Express、Rails、ASP.NET）が配列スタイルのクエリ param に期待する形です。

なぜスペースが %20 ではなく + になる？

クエリ部分のスペースは application/x-www-form-urlencoded のルールに従って + としてエンコードされます — それが URLSearchParams が出力するものです。path のスペースは %20 としてエンコードされます。どちらも RFC 3986 上で有効で、すべてのサーバーは両方をデコードできます。サーバーがクエリで %20 しか受け付けないなら、それはサーバー側のバグです。

認証情報（ユーザー名/パスワード）を URL に含められる？

はい — JSON に "username" と "password" をセットしてください。host の前に user:pass@host として現れます。RFC 3986 §3.2.1 はこれを本番 URL でやらないよう警告しています。ブラウザ履歴、サーバーログ、プロキシキャッシュに残ってしまうからです — ローカルでのちょっとしたテストには OK、共有設定では NG です。

URL がブラウザの外に出ることはある？

ありません。JSON のパースはタブ内の JSON.parse、URL の組み立てはタブ内の new URL(...)、どちらもサーバーを呼びません。アップロードもログ取得もありません。インターネット接続でページを 1 回開いた後、切断してキャッシュから使い続けることもできます。

その他の URL & JSON ツール

JSON to URL は往復のうちの片道です。残りはこちら: