URL Pattern API
URL Pattern API - Web APIs | MDN
URLPattern は、ウェブ プラットフォームにルーティングをもたらします | Web Platform | Chrome for Developers
https://zenn.dev/mryhryki/articles/2025-03-26-url-pattern-api
https://blog.cloudflare.com/improving-web-standards-urlpattern/
code:ts
const pattern = new URLPattern({
pathname: '/blog/:year/:month/:slug'
});
if (pattern.test('https://example.com/blog/2025/03/urlpattern-launch')) {
console.log('Match found!');
}
const result = pattern.exec('https://example.com/blog/2025/03/urlpattern-launch');
console.log(result.pathname.groups.year); // "2025"
console.log(result.pathname.groups.month); // "03"
console.log(result.pathname.groups.slug); // "urlpattern-launch"
fp-ts-routingやんmrsekut.icon
GPT-4.icon
✅ URL Pattern API とは?
URLPattern クラスを使って、特定の URL またはその一部(pathname, hostname, など)に対するマッチングパターンを作成・実行できるAPIです。
例:
/books/:id → /books/123 にマッチし、id = 123 を抽出できる
特徴
pathname だけでなく、protocol, hostname, search, hash など URL の構成要素ごとにマッチ可能
Express.js の path-to-regexp に似た記法
Web Workerでも使える
実験的機能(要ブラウザ対応確認)
---
🧩 パターン構文の基本
1. 固定文字列
code:js
new URLPattern({ pathname: "/books" });
2. 名前付きグループ
code:js
new URLPattern({ pathname: "/books/:id" });
// /books/123 => { id: "123" }
3. ワイルドカード
code:js
new URLPattern({ pathname: "/books/*" });
// /books/123 や /books/abc/def にマッチ
4. 正規表現グループ
code:js
new URLPattern("/books/:id(\\d+)", "https://example.com");
// 数字のみにマッチ
---
🔄 グループの修飾子
table:table
修飾子 意味 例
--- ----------- ----------------------------
? 0回または1回(任意) :id? → /books OK
+ 1回以上の繰り返し :id+ → /books/123/456 OK
* 0回以上の繰り返し :id* → /books も OK
---
🧱 グループ区切り {} の使い方
グループや文字列のオプション化や繰り返しに使う
code:js
// sがあってもなくてもOK
new URLPattern("/book{s}?", "https://example.com");
code:js
// 任意のsubdomain
new URLPattern({ hostname: "{:subdomain.}*example.com" });
// foo.bar.example.com → subdomain = "foo.bar"
---
🧪 .test() / .exec() の使い方
code:js
const pattern = new URLPattern("/books/:id(\\d+)", "https://example.com");
pattern.test("https://example.com/books/123"); // true
const result = pattern.exec("https://example.com/books/123");
console.log(result.pathname.groups.id); // '123'
---
🧭 パターンのマッチ範囲(構成要素)
URLPattern の各プロパティに対して個別にパターンを指定できます。
code:js
new URLPattern({
protocol: "http{s}?",
hostname: "example.com",
pathname: "/books/:id",
});
---
⚠️ 正規表現の制限
^, $ は使える場所が限られる(protocol や hash 部分のみ有効)
(?=...), (?<=...) などのlookahead/lookbehind はサポートされない
[] 中の () などはエスケープが必要
---
🎨 ケース感度
デフォルトでは大文字小文字は区別される。
code:js
const pattern = new URLPattern("https://example.com/Foo");
pattern.test("https://example.com/foo"); // false
// 無視させたいとき
const ciPattern = new URLPattern("https://example.com/Foo", { ignoreCase: true });
---
🧠 よくある使い方の例
サブドメイン付きCDNマッチ
code:js
new URLPattern("https://cdn-*.example.com/*.jpg");
名前付きグループを複数使う
code:js
new URLPattern({ pathname: "/:product/:user/:action" });
// /store/wanderview/view => { product: "store", user: "wanderview", action: "view" }