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

Cloudflare WorkersでURLPatternを利用したい場合、「Pico」というフレームワークを使用することができます。Node.jsではURLPatternがサポートされていないため、Polyfillを使って補完する必要があります。Picoを使用することでURLPatternを利用することができ、Cloudflare WorkersでもOKです。ただし、URLPattern APIはまだ実験的な段階で、安定版ではないようです。プロジェクトによっては使用することができそうです。

広告ここから
広告ここまで

目次

    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でしかサポートしていない様子です。

    https://developer.mozilla.org/en-US/docs/Web/API/URLPattern#browser_compatibility

    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とか)に使えそうかなと思ったのですが、継続して面倒を見続けるつもりのプロジェクトや壊れても大きな問題にならないものに絞って使うくらいがよさそうです。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark