URL Pattern API
code:ts
const pattern = new URLPattern({
pathname: '/blog/:year/:month/:slug'
});
console.log('Match found!');
}
console.log(result.pathname.groups.year); // "2025"
console.log(result.pathname.groups.month); // "03"
console.log(result.pathname.groups.slug); // "urlpattern-launch"
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
// 数字のみにマッチ
---
🔄 グループの修飾子
table:table
修飾子 意味 例
--- ----------- ----------------------------
? 0回または1回(任意) :id? → /books OK
+ 1回以上の繰り返し :id+ → /books/123/456 OK
* 0回以上の繰り返し :id* → /books も OK
---
🧱 グループ区切り {} の使い方
グループや文字列のオプション化や繰り返しに使う
code:js
// sがあってもなくてもOK
code:js
// 任意のsubdomain
new URLPattern({ hostname: "{:subdomain.}*example.com" });
// foo.bar.example.com → subdomain = "foo.bar"
---
🧪 .test() / .exec() の使い方
code:js
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
// 無視させたいとき
---
🧠 よくある使い方の例
サブドメイン付きCDNマッチ
code:js
名前付きグループを複数使う
code:js
new URLPattern({ pathname: "/:product/:user/:action" });
// /store/wanderview/view => { product: "store", user: "wanderview", action: "view" }