§

URL

§

URL パーツ

完全な URL (href)
プロトコル
ユーザー名
パスワード
ホスト
ホスト名
ポート
パス名
検索文字列(生)
ハッシュ(フラグメント)
オリジン
§

クエリパラメータ

キー 値(生) デコードされた値

この URL にはクエリパラメータがありません

個人情報保護委員会(PPC)が公表した APPI 対応ガイドラインでは、Cookie やトラッキングパラメータの取り扱い状況の定期的な確認が求められます。NISC が監修する JPCERT/CC のフィッシング報告書では不審 URL のクエリ文字列検査が標準手順に含まれており、デジタル庁の e-Gov ポータルも go.jp ドメインのクエリ文字列規約に準拠した URL 設計を推奨しています。本ツールはブラウザ内で完結するため、機密を含む URL を外部サービスに送信せずに安全に分解・検査できます。

URL 解析の仕組み

パーサーは WHATWG URL 標準に基づいて動作します。これはブラウザが href を処理する際に使用するアルゴリズムと同じです。ネイティブの URL コンストラクタに文字列を渡し、各コンポーネントをプロパティとして読み取ります。

  1. 入力を検証する. 空の文字列は空入力の通知を表示します。それ以外の場合は new URL(text) にテキストを渡し、TypeError は文字列が有効な絶対 URL ではないことを意味します。
  2. 構造コンポーネントを読み取る. URL オブジェクトから protocolusernamepasswordhosthostnameportpathnamesearchhashorigin を読み取ります。それぞれが独自の行に表示され、個別にコピーできます。
  3. クエリ文字列を走査する. url.searchParams.entries() を反復し、キーごとに 1 行のテーブル行を表示します。生の値の横に decodeURIComponent(value) が並び、パーセントエンコードされたペイロード(スペース、プラス記号、Unicode)が読みやすい形で表示されます。
  4. 必要に応じて再構築する. 任意のセルを編集し、行を削除するか新しいパラメータを追加して「URL を構築」をクリックします。ツールは編集内容から新しい URL オブジェクトを再構築し、結果を入力ボックスに書き戻します。
  5. ライブモード. ライブモードをオンにすると、キーストロークごとに 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 開発者が毎週行う小さな作業のひとつです。本番コードが使うのと同じアルゴリズムを使ってブラウザ内で行うことで、作業を速くしデータをマシン上に留められます。