URL

コンポーネント

URLパーサーとは？

URLを貼り付けると、本当に気になる部分 — プロトコル、ホスト、ポート、パス、クエリパラメータ、ハッシュ — に分解されます。出力はJSONなので、テストフィクスチャやデバッグログ、構造化形式でコンポーネントが必要なところにそのままコピーできます。パーサーはWHATWG URL Standardに従っており、これは現代のブラウザがすべて内部で使用しているものです。

なぜパーサーが必要なのか？パーセントエンコードされたクエリパラメータが5つ並び、ハッシュフラグメントまで付いた長いURLを読むのは苦痛だからです。ブラウザはURL APIを通じてすでにこれをこなせますが、貼り付けてすぐ確認できるサーフェスがありません。これがそれです。クエリパラメータもデコードされ — %20はスペース、%5Bは[、繰り返しキーは配列に — URLSearchParamsと同じ動作です。

すべてブラウザ内で動きます。アップロードなし、サーバーなし、ログなし。URLパースは決定的です — AIなし、推測なし、RFC 3986で定義されWHATWG仕様で洗練された同じアルゴリズムを使うだけです。

URLパーサーの使い方

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

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

左パネルにURLを入れます。サンプルをクリックすると、パーセントエンコード、繰り返しクエリキー、ハッシュフラグメント付きの現実的な例が読み込まれます。サンプルURL：

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

URLコンストラクタが受け付けるものなら何でも動きます — <code>file://</code>、<code>mailto:</code>、カスタムスキーム、IPv6ホスト、userinfo（<code>user:pass@host</code>）も含めて。

コンポーネントを読む

右パネルにはパースされたURLがJSONで表示されます：protocol、host、port、pathname、pathSegments（パスを配列に分割したもの）、searchParams（デコード済みのキー値ペア、繰り返しキーは配列）、hash。入力するたびに更新されます。

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

コピーでJSONをクリップボードに送るか、ダウンロードで.jsonファイルとして保存します。圧縮はログ行に必要なときにJSONを1行にコンパクト化します。入力パネルのクリアでやり直せます。

実際に使う場面

リダイレクトとアナリティクスURLのデバッグ

広告トラッキングのリダイレクトから来た12個のクエリパラメータ付きURLは、アドレスバーでは読めたものではありません。ここに貼り付ければ、パラメータが1行ずつデコードされて表示され、宛先のurlパラメータも完全に展開されます。トラッカー除去ができるURL Cleaner（公開予定）と相性がいいです。

WebhookとOAuthコールバックURLの調査

OAuthコールバックやwebhookペイロードはクエリ文字列に状態を詰め込みます。分解すると、stateトークンが欠けているか、codeが切られているか、redirect_uriが二重エンコードされているかが一目瞭然です。RFC 6749はこれらのパラメータを必須としており、このツールは全部を一度に表面化します。

テストフィクスチャを作る

URLに対するテストを書くとき、文字列ではなく構造化オブジェクトとして欲しいことがほとんどです。URLを貼り付け、JSONをコピー、フィクスチャファイルに落とすだけ。今日5回目のprotocol: 'https:'を手で打たずに済みます。

カスタマーサポートチケットの確認

「このリンクをクリックしたら壊れた」 — リンクは400文字で二重エンコードされたスラッシュ付き。パーサーはブラウザが見るとおりを正確に表示します。%252Fがリテラルの%2Fを意味するのか、プロキシを通る途中で二重エンコードされたパス区切りなのかも分かります。

よくある質問

相対URLでも動きますか？

いいえ — URLコンストラクタには絶対URL（https://やfile://のようなプロトコル付き）が必要です。相対URLの場合は、まずhttps://example.comのようなベースを前置し、結果から削除してください。WHATWG仕様には、ブラウザが内部で使う2引数形式（new URL(relative, base)）が記載されています。

繰り返しクエリキーはどう扱われますか？

繰り返しキーは配列に畳み込まれます。?tag=red&tag=blueは出力で"tag": ["red", "blue"]になります。これはほとんどのサーバーフレームワーク（Express、FastAPI、ASP.NET）のクエリ文字列パース方法と一致します。

?items[]=1&items[]=2のような配列ブラケット記法は？

パーサーはブラケットをキーの一部として扱うので、"items[]": ["1", "2"]と表示されます。ワイヤー上のバイトに対して正直です。フレームワーク固有のデコーダー（PHP、Rails、qs.js）が必要なら、パース済みの出力に対して後処理を行ってください。

URLの認証情報（user:pass@host）をここに貼っても安全ですか？

パースは完全にブラウザ内で行われ、URLは端末から出ません。ただし、URLに認証情報を入れるのは一般的に推奨されておらず（RFC 3986 §3.2.1がセキュリティリスクを指摘）、ほとんどのブラウザは黙ってそれを除去します。貼り付けた場合は、usernameとpasswordフィールドが出力に表示されます。

国際化ドメイン名（IDN）も扱えますか？

ブラウザのURLコンストラクタはIDNドメインを扱いますが、出力はUnicode形式ではなくPunycode形式（xn--...）で表示されることがあります。これは実際にワイヤー上で送られる形です。両者を変換する必要があれば、専用のPunycodeツールが間もなくこのセクションに登場します。

なぜ出力が「JSON」ではなく「コンポーネント」と呼ばれているのですか？

JSONではあります — ただ枠組みが大事です。出力はURLのパーツが構造化されたものです。このページを「URL → JSONコンバータ」だと捉えると、要点を逃します：価値は分解にあり、形式にはありません。

その他のURLとJSONツール

パースは1つの操作です。自然に組み合わせられるのはこれら：