web.devが10月29日に公開した月例のまとめでは、10月に安定版になったChrome 155と156、Firefox 158と159、Safari 27.1と27.2の新機能が紹介されています。見た目に関わるCSSの話題が目立ちがちですが、今回はその陰で、JavaScriptの部品やモジュールの扱い、計測、安全なHTMLの差し込みといった裏方の部分にも手が入っていました。ここでは、制作の現場で覚えておくと後で効いてきそうなものを順に拾ってみます。

その1 部品ごとに名前の登録先を分けられる

Web Componentsで作った部品(カスタム要素)は、これまでページ全体でひとつの登録先 window.customElements にまとめて登録する決まりでした。そのため、別々のライブラリやチームが作った部品を同じページに入れると、同じ名前がぶつかる問題が起きえました。

Firefox 159がスコープ付きのカスタム要素レジストリ(scoped custom element registries)に対応し、ChromeとSafariを合わせて主要ブラウザすべてで使える状態、いわゆるBaseline Newly availableになりました。CustomElementRegistry() で独立した登録先を作り、特定のShadow DOMの中だけで定義を有効にできます。外部の予約ウィジェットや地図の部品を、自前の部品と一緒に置くような案件では、名前の付け方で悩む場面が減りそうです。

その2 テキストをそのままモジュールとして読み込める

Chrome 155が、import ... with { type: "text" } という書き方でファイルの中身を文字列として読み込む機能に対応しました。Firefoxはすでに対応しており、Safariはまだです。HTMLのひな形やSVGの断片を文字列として扱いたいとき、これまでは fetch() で取りに行くか、ビルドの仕組みに頼るのが一般的でした。

ただ、Safariが未対応のうちは、そのまま本番のサイトで頼るのは早いと考えています。社内の管理画面や、対応ブラウザを限定できる場面から試すのが無難です。

その3 読み込みに失敗したモジュールを読み直せる

地味ですが効きそうなのがこちらです。Chrome 156から、読み込みに失敗したモジュールが失敗したまま記憶されなくなりました。一時的に回線が途切れて import() が失敗しても、もう一度呼べば読み直せます。

これまでは一度失敗すると同じページの中では取り戻せず、ページを読み直してもらうしかないことがありました。移動中のスマートフォンなど回線が不安定な利用者が多いサイトでは、「再試行」のボタンを用意するといった作りが現実的になります。

その4 キャッシュから届いたかを計測で見分けられる

Firefox 158が PerformanceResourceTiming.deliveryType に対応しました。読み込んだファイルがキャッシュから返されたときに "cache" と示してくれるプロパティで、ChromeとSafariはすでに対応しています。

表示速度を調べるとき、速かったのはキャッシュのおかげなのか、配信そのものが速かったのかを分けて見られると、改善の手を打つ場所がはっきりします。自前で計測の仕組みを入れているサイトなら、記録する項目に加えておく価値はありそうです。

その5 HTMLを安全に差し込む仕組みの細かな手直し

FirefoxではHTML Sanitizer APIにも手が入りました。Firefox 158では、Element.setHTMLUnsafe() のような安全確認を省く差し込み方を使うときに、javascript: で始まるURLを含む属性を取り除くかどうかを設定できるようになっています。Firefox 159では、Element.setHTML() などの安全な差し込み方が、DOMを組み立てた後ではなく、解析の途中で不要な要素や属性を取り除くように改められました。

対応しているのは今のところFirefoxが中心です。それでも、利用者の入力を画面に出す処理をどう安全にするかは、問い合わせフォームや口コミ欄を持つ中小企業のサイトでも無関係ではありません。各ブラウザの足並みがそろうまで、動きを追っておきたい分野です。

その6 見た目側ではスクロール連動のアニメーションがそろった

裏方の話が続いたので、最後に見た目側からひとつだけ。Firefox 159でスクロール連動のアニメーション(scroll-driven animations)が既定で有効になり、主要ブラウザすべてで使える状態になりました。スクロール量や要素の見え具合にアニメーションの進み具合を結びつける仕組みで、これまでJavaScriptで書いていた演出の一部をCSSで置き換えられます。

Baseline Newly availableは、主要ブラウザの最新版がそろって対応したという段階で、古い版を使う利用者がまだ残っている時期でもあります。部品の登録先やモジュールの読み直しのように、使えない環境で壊れると困る機能は、対応していない場合の動きを確かめたうえで取り入れていくのがよさそうです。