URL 解析の仕組み
パーサーは WHATWG URL 標準に基づいて動作します。これはブラウザが href を処理する際に使用するアルゴリズムと同じです。ネイティブの URL コンストラクタに文字列を渡し、各コンポーネントをプロパティとして読み取ります。
- 入力を検証する. 空の文字列は空入力の通知を表示します。それ以外の場合は
new URL(text)にテキストを渡し、TypeError は文字列が有効な絶対 URL ではないことを意味します。 - 構造コンポーネントを読み取る. URL オブジェクトから
protocol、username、password、host、hostname、port、pathname、search、hash、originを読み取ります。それぞれが独自の行に表示され、個別にコピーできます。 - クエリ文字列を走査する.
url.searchParams.entries()を反復し、キーごとに 1 行のテーブル行を表示します。生の値の横にdecodeURIComponent(value)が並び、パーセントエンコードされたペイロード(スペース、プラス記号、Unicode)が読みやすい形で表示されます。 - 必要に応じて再構築する. 任意のセルを編集し、行を削除するか新しいパラメータを追加して「URL を構築」をクリックします。ツールは編集内容から新しい URL オブジェクトを再構築し、結果を入力ボックスに書き戻します。
- ライブモード. ライブモードをオンにすると、キーストロークごとに 150 ms のデバウンスで URL が再解析されます。ログからフラグメントを貼り付けて即座にフィードバックを得たい場合に便利です。
ブラウザで URL を解析する理由
- タブから何も外に出ない. URL にはトークン、セッション ID、OAuth ステート、署名付きクエリパラメータが含まれており、サードパーティサービスに渡したくないものです。このパーサーはブラウザがすでにローカルで実行している URL アルゴリズムを使用しています — アップロードも、ネットワーク呼び出しもありません。
- コードが見るものと一致する. Node.js、Deno、モダンブラウザ、Cloudflare Workers はすべて WHATWG URL 実装を採用しています。ここで URL を検査することで、本番環境での
new URL(input)呼び出しと同じコンポーネント分割が得られます。 - 人間が読めるようにクエリ文字列を表示する. 生の値とデコードされた値が並んで表示されるため、
q=hello%20worldのペアはワイヤーバイトと読みやすいhello worldの両方が一目でわかります。頭の中で URL デコードする必要はありません。 - 往復編集. トラッキングパラメータを削除したり、パスのタイプミスを修正したり、ポートを変更したりして URL を再構築できます。出力は URL コンストラクタを通過するため、無効なものはコピーする前に表示されます。
一般的な用途
URL 解析は、URL が単なるリンク以上の意味を持つ場合、開発者・セキュリティ・分析の日常業務に登場します。
- API エンドポイントのデバッグ:curl や Postman リクエストを送信する前に、ベース URL、パス、クエリパラメータを確認する。
- トラッキングパラメータの監査:ランディングページ URL にある UTM、gclid、fbclid、またはキャンペーンキーをすべてリストアップし、どれを保持するか決める。
- アフィリエイトおよびパートナーリンクの検証:ディープリンクを貼り付け、公開前に宛先ホストと埋め込まれたリダイレクトターゲットを確認する。
実践的な例
入力に https://example.com/search?q=hello%20world&lang=en を貼り付けます。プロトコルは https:、ホスト名は example.com、パス名は /search、検索文字列は ?q=hello%20world&lang=en と表示されます。クエリテーブルには 2 行が表示されます:q の生の値が hello%20world、デコードされた値が hello world、次に lang の生の値とデコードされた値がともに en です。lang 行の「削除」をクリックし、「URL を構築」をクリックすると、入力が https://example.com/search?q=hello%20world に更新されます。
FAQ
URL パーサーとは何ですか?
URL パーサーは URL 文字列を名前付きコンポーネントに分解します:プロトコル(https)、ユーザー情報(ユーザー名、パスワード)、ホスト(ホスト名とオプションのポート)、パス、クエリ文字列、フラグメントです。また、各クエリパラメータをデコードして、パーセントエンコードされた値(スペースの %20 など)が読めるようになります。このパーサーは WHATWG URL 標準を使用しており、ブラウザがページを読み込む際に使用するものと同じです。
ホストとホスト名の違いは何ですか?
ホスト名はドメイン(または IP アドレス)のみです — example.com:8080 の場合、ホスト名は example.com です。ホストはデフォルト以外のポートが存在する場合にホスト名とポートを合わせたものなので、同じ URL のホストは example.com:8080 になります。デフォルトポート(https の場合 443、http の場合 80)の URL では、ホストとホスト名は同一です。
デコードは自動的に行われますか?
構造コンポーネント(プロトコル、ホスト名、ポート、パス名)は URL オブジェクトから追加のデコードなしに直接読み取られます — URL コンストラクタがすでに正規化しています。クエリの値は 2 回表示されます:search に現れる生のパーセントエンコード文字列と、decodeURIComponent が生成したデコードされた値です。これにより、下流ツールが期待するどちらの形式でもコピーできます。
URL を編集して再構築できますか?
はい。すべてのパーツセルとすべてのクエリパラメータセルは編集可能です。「追加」と「削除」ボタンでクエリ行を追加または削除し、「パーツから URL を構築」をクリックします。ツールは編集内容を URL コンストラクタに通して結果を入力に書き戻します — 編集内容が無効な URL を生成する場合は、自分のコードで new URL() から得るのと同じエラーメッセージが表示されます。
URL 解析はあらゆる Web 開発者が毎週行う小さな作業のひとつです。本番コードが使うのと同じアルゴリズムを使ってブラウザ内で行うことで、作業を速くしデータをマシン上に留められます。