URL

JSON

URL から JSON は何をするツール?

左側に URL を貼り付けると、右側に URL の各部位に名前が付いた JSON オブジェクトが表示されます — protocol、host、pathname、searchParams、hash、すべてです。一度見て終わりにするためのものではありません。設定ファイル、Jest のフィクスチャ、Postman の環境、YAML マニフェスト、テスト用のリクエストモックなど、その JSON が居場所を持つ場所にコピーするためのものです。URL 文字列は書くのは簡単ですがアサートしづらく、構造化オブジェクトはその逆です。

内部的にはあらゆるブラウザが URL API を通して使っているのと同じアルゴリズムで、これは WHATWG URL Standard の実装です。クエリパラメータは途中でデコードされ — %20 はスペースに、%5B は [ に、繰り返しキーは JSON 配列にまとまります — これは URLSearchParams と同じ挙動です。出力はサイト内の他の JSON ツールと同じ JSON.stringify ルールでフォーマットされます。

画面上で URL の中身を眺めたいだけ — リダイレクトのデバッグ、トラッカーの連鎖をざっと確認 — なら URL パーサーのページの方が向いています。両方のページで同じ変換を行いますが、こちらは「JSON 自体が残しておきたい成果物」というケース向けに作られています。すべてブラウザ内で完結し、アップロードもログもありません。変換は構文について RFC 3986、JSON 出力について RFC 8259 に準拠しています。

URL を JSON に変換する手順

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

URL を貼り付けるか、サンプルを読み込む

左パネルに URL を入れます。サンプル をクリックすると、パーセントエンコーディング、繰り返しクエリキー、ハッシュフラグメントを含むリアルな EC サイト風 URL が読み込まれます。サンプル:

https://api.shop.example.com/v1/orders?customer=Ava%20Chen&status=active&total%5Bgte%5D=49.99&page=2#summary

URL コンストラクタが受け付けるものは何でも動きます — <code>http://</code>、<code>https://</code>、<code>file://</code>、<code>mailto:</code>、IPv6 ホスト、ユーザー情報も。

JSON 出力を確認する

右パネルは入力中にリアルタイムで更新されます。protocol、host、port、pathname、pathSegments(パスを配列に分割したもの)、searchParams(デコード済みのキーと値のペア。繰り返しキーは配列)、hash が表示されます。href フィールドは正規化された URL の標準形を保持します — 一方がデフォルトポートや末尾スラッシュを持っていても、2 つの URL が等価かをアサートしたいときに便利です。

フィクスチャ用にコピー、ダウンロード、または圧縮する

コピー をクリックすると JSON がクリップボードに送られ、ダウンロード で url.json として保存、圧縮でログ出力やクエリパラメータ用に 1 行に圧縮できます。入力パネルの クリア で両方のエディタがリセットされます。

実際にこれを使う場面

HTTP リクエストのフィクスチャ作成

テストで URL をアサートするとき、文字列で比較するのは脆い — 大文字小文字、デフォルトポート、末尾スラッシュ、パラメータの順番が全部噛みつきます。URL を JSON に変換し、オブジェクトをフィクスチャに入れて、フィールド単位でアサートしましょう。Mock Service Worker や Nock のような URL の形でマッチするライブラリと相性が良いです。

設定ファイルでの API クライアント初期化

ベース URL を 1 本の文字列で保存している YAML や JSON の設定は、利用側に毎回パースを強制します。事前に分解した形(host、port、basePath、defaultParams)で保存すれば、設定が自己説明的になり、「末尾スラッシュ忘れた?」系のバグの一群が消えます。SDK ジェネレータや OpenAPI ツール周りで便利です。

OAuth と Webhook コールバックのドキュメント

「コールバック URL はこんな形になります」と説明するドキュメントを書くとき、生の URL の隣に JSON での内訳を出してあげると、読み手にずっと優しいです。RFC 6749 のような標準は特定のクエリパラメータを要求します。構造化された形なら「ここに state が見えるはずです」が一目で分かります。

Postman / Bruno / HTTPie の環境エクスポート

ほとんどの API クライアントは内部で URL を分解されたオブジェクトとして保持しています。古い URL を新しいコレクションに取り込むとき — 例えば、エンドポイントを素の文字列で並べているドキュメントサイトから移行するとき — 先に JSON へ変換しておけば、200 件のエンドポイントを手作業でクリックする代わりに、インポートをスクリプト化できます。

よくある質問

URL パーサーのページとは何が違うの?

同じエンジン、見せ方が違うだけです。URL パーサーは調査用 — 長い URL を貼り付け、各部位を眺め、何が悪いか判断して、タブを閉じる。URL から JSON は、結果を持ち出してどこかで使うため — フィクスチャファイル、設定、Postman の環境です。JSON 出力は同一で、ページの文言とユースケースが「これをファイルに残したい」というワークフロー向けに調整されています。

なぜ出力が YAML や JS オブジェクトリテラルではなく JSON なの?

JSON は最大公約数です — どの言語、どの設定システム、どのテストフレームワークも読めます。YAML が必要なら、JSON を JSON から YAML ツールに通してください。JS のオブジェクトリテラルが欲しいなら、JSON はすでに有効な JS なので、そのまま .ts ファイルに貼ればいいだけです。変換は RFC 8259 に準拠しているので、JSON が受け入れられる場所ならどこでも動きます。

繰り返しのクエリキーはどう表現される?

繰り返しキーは配列にまとまります。?tag=red&tag=blue は "tag": ["red", "blue"] になります。これは Express、FastAPI、ASP.NET、Spring、ほとんどのフレームワークがクエリ文字列をパースする方法と一致し、URLSearchParams.getAll() が返すものと同じです。

では ?items[]=1&items[]=2 のような角括弧記法の配列は?

角括弧はキーの一部として保持されます — 出力には "items[]": ["1", "2"] が表示されます。これがネットワーク上のバイトの忠実な表現です。フレームワーク側(PHP、Rails、qs.js)で角括弧を取り除いたりネストしたオブジェクトに展開したりする必要があれば、JSON への後処理ステップで行ってください。

URL に user:pass@host が含まれていたら、JSON にパスワードが入る?

はい — URL に含まれていれば username と password フィールドが出力に表示されます。変換は完全にブラウザ内で実行されるため、認証情報がマシンの外に出ることはありません。とはいえ、URL に認証情報を入れること自体一般的に悪手とされており(RFC 3986 §3.2.1 参照)、JSON をリポジトリにコミットする前にほぼ間違いなく削除しておきたいはずです。

一度に複数の URL を変換できる?

このページではできません — 1 セッションで 1 件の URL を変換します。100 件の URL を処理したいなら、このページの出力構造を小さなスクリプトに貼ってループで回すのが一番手早いです。あるいはバッチを自分でスクリプト化してから、当サイトの JSON フォーマッターを使ってください。バッチ変換を UI 機能として用意するのはロードマップにありますが、まだ提供していません。

その他の URL & JSON ツール

変換は操作の 1 つに過ぎません。自然に組み合わせやすいツールはこちら: