Frontend Weekly 2025-05-02
Chrome 136のRegExp.escapeや:visited履歴パーティショニング、GSAPの無料化、GitHub PAT失効API、Deno 2.3の新機能について。
- # Chrome 136リリース
- # RegExp.escapeがベースライン入り
- # :visitedリンク履歴のパーティショニング
- # パスワード認証情報のパスキーアップグレード
- # HDR最大輝度の制限
- # GSAPが完全無料化、Webflowによる買収
- # GitHub Credential Revocation APIが一般公開
- # Baseline 2025年4月アップデート
- # VSCodeのBaseline表示
- # Baselineに基づいたStylelintによるチェック
- # ESLint use-baselineルールの年指定などのサポート
- # Browserslistクエリを発行できるbrowserslist-config-baseline
- # Deno 2.3リリース
- # deno compileの強化
- # ローカルnpmパッケージ対応
- # deno fmtの新機能
- # deno addのレジストリ指定
Chrome 136リリース
日付:2025年4月29日
Chrome 136がリリース。RegExp.escape
静的メソッドのベースライン入りや:visited
リンク履歴のパーティショニングなど。
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日
WebflowがGSAPを買収し、全機能・全プラグインを完全無料化。これまで有料だった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 Newly
- Baseline Widely
- grid-template-columns/rowsのアニメーション
- CSS ic unit:描画される「水」(CJK water ideograph, U+6C34)の文字の送り幅を基準にした単位
また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.json
のpatch
フィールドでローカルの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