URLPattern API: モダンな方法でURLをマッチングする

URLパスからユーザーIDを抽出するために正規表現を書いたことがあれば、その苦労をご存知でしょう。パターンはシンプルに始まりますが、やがてエスケープ文字とキャプチャグループの読めない塊へと成長します。要件が変更されると、機能開発ではなく正規表現のデバッグに時間を費やすことになります。

URLPattern APIは、より良いアプローチを提供します。これはモダンなURLマッチングのためのWHATWG標準であり、ブラウザでネイティブに動作し、暗号のような正規表現の代わりに読みやすいパターンでURLをマッチングおよび解析できます。この記事では、URLPatternが解決する問題、その核となる概念、そしてフロントエンド開発者がいつこれを使うべきかをカバーします。

URLPatternはどんな問題を解決するのか?

URLPattern以前、開発者にはWeb URLを解析するための2つの主な選択肢がありました:カスタム正規表現を書くか、ルーティングライブラリを導入するかです。

正規表現は機能しますが、メンテナンスの頭痛の種を生み出します。/^\/users\/([a-zA-Z0-9]+)\/?$/のようなパターンは、見直すたびに頭の中で解析する必要があります。キャプチャグループは位置ベースで匿名です。新しいセグメントを追加すると、既存のコードが壊れます。

ルーティングライブラリは可読性の問題を解決しますが、バンドルサイズが増加し、フレームワーク固有の構文を導入します。URLマッチングロジックが特定のツールに依存することになります。

URLPatternは標準化された中間的な解決策を提供します。人気のあるルーティング規約から借用した直感的な構文を使用します:

const pattern = new URLPattern({ pathname: '/users/:id' })

:idセグメントは名前付きグループです。エスケープ文字は不要です。番号付きキャプチャグループもありません。パターンはマッチするURL構造のように読めます。

URLPattern APIの核となる概念

パターンは完全なURLまたは個別のコンポーネントに対応

URLPatternは完全なURLまたは特定のコンポーネントに対してマッチングできます。URLは8つの部分に分解されます:プロトコル、ユーザー名、パスワード、ホスト名、ポート、パス名、検索、ハッシュです。

任意の組み合わせでパターンを定義できます:

const pattern = new URLPattern({
  hostname: '*.example.com',
  pathname: '/api/:version/*'
})

これはexample.comの任意のサブドメインとAPIパスをマッチングします。指定しないコンポーネントはワイルドカードにデフォルト設定され、すべてにマッチします。

テストと構造化グループの抽出

URLPatternは異なる目的を持つ2つの主要なメソッドを提供します。

test()メソッドはブール値を返します。このURLはパターンにマッチするか?

pattern.test('https://api.example.com/api/v2/users') // true

exec()メソッドはキャプチャされたグループを含む詳細なマッチ結果を返します:

const result = pattern.exec('https://api.example.com/api/v2/users')
console.log(result.pathname.groups.version) // 'v2'

名前付きグループはオブジェクトのプロパティになります。もうresult[1]にアクセスしてインデックスが正しいことを願う必要はありません。

ブラウザのURLPatternサポート

URLPatternは2025年後半にBaseline Newly Availableステータスに達しました。Chrome、Edge、Firefox、Safariのすべてがサポートしています。これはもはや実験的機能やChrome専用APIではありません。本番環境で使用できる安定したWeb標準です。

サーバーサイドJavaScriptについては、状況が異なります。最近のNode.js 23+リリースにはURLPatternが含まれていますが、公式ドキュメントによると実装は実験的なままです。両方の環境で動作するコードを書いている場合は、ブラウザの期待値とは別にNode.jsの動作を確認してください。

URLPatternを使うべき場面

URLPatternは完全なルーティングソリューションではなく、低レベルのプリミティブとして輝きます。以下の場合に検討してください:

Service Workerでリクエストをインターセプトし、URLパターンに基づいて異なるキャッシング戦略を適用する必要がある場合。

SPAルーティングロジックでカスタムナビゲーション処理を構築している場合や、フレームワークのルーター外でURLマッチングが必要な場合。

URL駆動のUI状態でコンポーネントが現在のURLを解析してパラメータを抽出する必要がある場合。

URLPatternはReact RouterやVue Routerを置き換えるものではありません。これらのフレームワークはナビゲーションガード、遅延ロード、コンポーネントライフサイクルとの統合を提供します。URLPatternは1つのことをうまく処理します:パターンに対してURLをマッチングし、データを抽出することです。

実践的な比較

/products/electronics/123からカテゴリとIDを抽出することを考えてみましょう。

正規表現の場合:

const match = /^\/products\/([^/]+)\/(\d+)$/.exec(pathname)
const category = match?.[1]
const id = match?.[2]

URLPatternの場合:

const pattern = new URLPattern({ pathname: '/products/:category/:id' })
const result = pattern.exec({ pathname })
const { category, id } = result?.pathname.groups ?? {}

URLPatternバージョンは長くなりますが、自己文書化されています。6ヶ月後でも、正規表現をデコードすることなく何をしているのか理解できます。

まとめ

URLPatternは、クリーンで読みやすい構文でブラウザ間のURLマッチングを標準化します。正規表現の複雑さなしに名前付きパラメータを抽出し、パス名、ホスト名、完全なURLのいずれをマッチングする場合でも一貫して動作します。

SPA、Service Worker、またはURL駆動の機能を構築しているフロントエンド開発者にとって、URLPatternは将来性のある基盤を提供します。完全な構文リファレンスについてはMDNのURLPatternドキュメントを確認し、正規表現パターンを保守可能なものに置き換え始めましょう。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.