Node.jsで`URLPattern`を使ったコードを書いてみる

Cloudflare Workersまわりなどを調べている際に、「Pico」というフレームワークを見つけました。

このライブラリが、RouterにURLPatternを利用しているらしく、仕組みに興味が湧いたので触ってみました。

そもそもNode.jsではURLPatternがサポートされていない（？）

さっそく動かそうとして、見事にエラーを踏み抜きます。

$ node index.js 
/Users/sandbox/javascript/index.js:1
const pattern = new URLPattern({ pathname: "/entry/:id" });
                ^

ReferenceError: URLPattern is not defined

記事や関連リンクを読み返すと、そもそも一部のブラウザやWeb Workersでしかサポートしていない様子です。

Web Workersで動くので、Cloudflare WorkersはOKということですね。

Polyfilを入れて動かす

この手のAPIはだいたいPolyfilを誰かが作っています。

ということで、さっそく見つけたライブラリを追加しましょう。

% npm i urlpattern-polyfill

これで動きました。

const { URLPattern } = require("urlpattern-polyfill");
const pattern = new URLPattern({ pathname: "/entry/:id" });
const match = pattern.exec("http://localhost/entry/123?page=2");
console.log(match);

実行結果はこちら。

$ node index.js 
{
  inputs: [ 'http://localhost/entry/123?page=2' ],
  protocol: { input: 'http', groups: { '0': 'http' } },
  username: { input: '', groups: { '0': '' } },
  password: { input: '', groups: { '0': '' } },
  hostname: { input: 'localhost', groups: { '0': 'localhost' } },
  port: { input: '', groups: { '0': '' } },
  pathname: { input: '/entry/123', groups: { id: '123' } },
  search: { input: 'page=2', groups: { '0': 'page=2' } },
  hash: { input: '', groups: { '0': '' } }
}

URLPattern APIは”Experimental”

MDNの記事やPicoの紹介ページにもNoticeされていますが、2023年4月現在まだまだ安定版ではない様子です。

This is an experimental technology

独自でFrameworkを作りたくなった時（AWS LambdaとかFirebase Functionsとか）に使えそうかなと思ったのですが、継続して面倒を見続けるつもりのプロジェクトや壊れても大きな問題にならないものに絞って使うくらいがよさそうです。