O hirunewani blog

Frontend Weekly 2025-05-02

Created at

Chrome 136のRegExp.escapeや:visited履歴パーティショニング、GSAPの無料化、GitHub PAT失効API、Deno 2.3の新機能について。

Chrome 136リリース

日付:2025年4月29日

Chrome 136がリリース。RegExp.escape静的メソッドのベースライン入りや:visitedリンク履歴のパーティショニングなど。

出展:Chrome 136 の新機能

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

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

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

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

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

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

a:visited {
  color: purple;
}

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

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

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

const registration = await navigator.credentials.create({
  mediation: 'conditional',
  publicKey: {
    challenge: /*...*/,
    user: /*...*/,
    rp: /*...*/,
  }
});

出展:Explainer Conditional Create - w3c/webauthn

HDR最大輝度の制限

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

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

GSAPが完全無料化、Webflowによる買収

日付:2025年4月30日

WebflowGSAPを買収し、全機能・全プラグインを完全無料化。これまで有料だったClub GreenSockのプラグインも商用利用含め無償提供される。

GSAP(GreenSock Animation Platform)はWebアニメーション向けのライブラリであり、WebflowはWebサイトを構築するノーコードツール。WebflowにGSAPが統合され、現在はプラグインの有効化やアニメーションのプレビューが可能。

出展:Webflow makes GSAP 100% free — plus more exciting updates

GitHub Credential Revocation APIが一般公開

日付:2025年4月29日

GitHubのPersonal Access Token(PAT)が外部で漏洩した場合、所有者以外でもREST API経由で即時無効化できるCredential Revocation APIが一般公開。認証不要で利用でき、1時間あたり60リクエスト・1リクエスト最大1000トークンまで。失効は監査ログに記録され、所有者にはメール通知される。組織アクセス権も即時剥奪。

出展:Credential revocation API to revoke exposed PATs is now generally available

Baseline 2025年4月アップデート

日付:2025年5月1日

Baselineで次の機能が利用可能に。

またBaselineのエコシステムへの展開も進められている。

出展:Baseline monthly digest April 2025 | web.dev

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 2.3リリース

日付:2025年5月1日

Deno 2.3がリリース。deno compileの強化やローカルnpmパッケージ対応など、多数の改善。

出展:Deno 2.3: Improved deno compile, local npm packages, and more

deno compileの強化

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

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

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

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

// deno.json
{
  "patch": [
    "../path/to/local_npm_package"
  ]
}

deno fmtの新機能

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

// deno.json
{
  "fmt": {
    "quoteProps": "asNeeded",
    "useBraces": "always",
    "trailingCommas": "always"
  }
}

deno addのレジストリ指定

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

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