Frontend Weekly 2025-05-02

RegExp.escape がベースライン入り#

RegExp.escape静的メソッドが全ブラウザで利用可能に。正規表現用のエスケープ処理が簡単にできる。渡された文字列を正規表現で利用するようなケースでは、そのまま RegExp などに渡すと危険なため対処が必要だったが、これによりモダンな環境では Web 標準の API のみで対処が可能になった。

1
const unsafe = "a+b*c?";
2
const safe = RegExp.escape(unsafe);
3
const regex = new RegExp(safe); // /a\+b\*c\?/

リンク履歴のパーティショニング#

:visited疑似クラスの履歴がサイト・フレーム単位で分離され、サイドチャネル攻撃による履歴漏洩が防止される。Chrome 136 以降、:visited履歴はグローバルなリストではなく、リンク URL・トップレベルサイト・フレームオリジンごとに分割管理される。これにより、他サイトやサードパーティ iframe からの履歴推測が不可能になった。

同一サイト内のサブページへのリンク（セルフリンク）は:visitedとして表示されるため、通常のナビゲーション体験は維持される。

1
a:visited {
2
  color: purple;
3
}

参考：Chrome の のプライバシー保護を強化

パスワード認証情報のパスキーアップグレード#

WebAuthn の条件付き作成リクエストで、既存のパスワード認証情報をパスキーにアップグレード可能。ユーザーの同意があればモーダルなしで自動作成できる。

1
const registration = await navigator.credentials.create({
2
  mediation: 'conditional',
3
  publicKey: {
4
    challenge: /*...*/,
5
    user: /*...*/,
6
    rp: /*...*/,
7
  }
8
});

出展：Explainer Conditional Create - w3c/webauthn

HDR 最大輝度の制限#

dynamic-range-limit プロパティで HDR コンテンツの最大輝度を制限可能。

1
/* HDR最大輝度の制限 */
2
body {
3
  dynamic-range-limit: 1000;
4
}

VSCode の Baseline 表示#

VSCode Insiders が Baseline CSS/HTML 機能のツールチップ表示に対応。CSS や HTML の構文にホバーすると Baseline 対応状況が即座に分かる。

Baseline に基づいた Stylelint によるチェック#

ESLint の use-baseline ルールと同等ルールを追加するstylelint-plugin-use-baselineが公開。Baseline ステータスに基づいて CSS 機能の使用状況をチェック可能。

ESLint use-baseline ルールの年指定などのサポート#

ESLint use-baseline ルールが更新。

• 「newly」と「widely」だけでなく年指定が可能に
• リント対象としてセレクタをサポート
• color-mix や conic-gradient など多くの CSS 関数もサポート
• ESLint の recommended config で warn に設定

Browserslist クエリを発行できる browserslist-config-baseline#

Baseline ターゲット（Widely/Newly/年指定）を Browserslist クエリに変換できる browserslist-config-baseline がリリース。PostCSS や Babel などのツールチェーンで Baseline 基準のターゲット指定が可能になる。

deno compile の強化#

FFI（Foreign Function Interface）や Node ネイティブアドオンに対応。これにより、ネイティブライブラリや Node プラグインを含むバイナリの生成が可能になった。不要なファイルを除外してバイナリサイズを削減できるオプションも追加。

1
deno compile --allow-ffi --allow-env main.ts
2
# 不要ファイルを除外
3
# deno compile --include folder --exclude folder/sub_folder main.ts

ローカル npm パッケージ対応#

deno.jsonのpatchフィールドでローカルの npm パッケージを指定可能。npm レジストリに存在するパッケージ名であれば、ローカルのnode_modulesを参照して開発・テストができる。

1
{
2
  "patch": ["../path/to/local_npm_package"]
3
}

deno fmt の新機能#

埋め込み CSS、HTML、SQL のタグ付きテンプレートリテラルも整形対象に。14 個の新しいフォーマットオプションが追加され、deno.jsonで細かく整形ルールを指定できる。

1
{
2
  "fmt": {
3
    "quoteProps": "asNeeded",
4
    "useBraces": "always",
5
    "trailingCommas": "always"
6
  }
7
}

deno add のレジストリ指定#

deno addコマンドで--npmや--jsrフラグを使い、npm や JSR レジストリからパッケージを明示的に追加できるようになった。複数レジストリの同時指定も可能。

1
deno add --npm chalk react
2
# JSRパッケージの追加
3
deno add --jsr @std/fs
4
# 複数レジストリを同時指定
5
deno add --npm chalk react jsr:@std/fs