Frontend Weekly 2025-09-05

Chrome 140がリリース、ToggleEventとCSS機能が強化#

日付：2025年9月2日

Chrome 140がリリースされた。ToggleEventの改善、CSSカウンター機能、フォントバリエーション設定などの新機能が追加された。

出展：

ToggleEventのトリガー元要素把握機能#

ToggleEventのsource属性により、イベントをトリガーした要素を特定できるようになった。

1
<button popovertarget="mypopover">開く</button>
2
<div id="mypopover" popover>ポップオーバー内容</div>

1
const popover = document.getElementById('mypopover');
2
popover.addEventListener('toggle', (event) => {
3
  console.log('トリガー元要素:', event.source); // <button>要素
4
});

ポップオーバーやコマンド要素でのイベント追跡が容易になる。

contentプロパティでのカウンター使用#

contentプロパティの代替テキストでcounter()とcounters()が使用可能になり、アクセシビリティが向上。

1
ol {
2
  counter-reset: item-counter;
3
}
4

5
li {
6
  counter-increment: item-counter;
7
}
8

9
li::before {
10
  content: counter(item-counter) ". ";
11
}
12

13
/* スクリーンリーダー向けの代替テキスト */
14
li::before {
15
  content: counter(item-counter, decimal) ". " / "項目 " counter(item-counter);
16
}

番号付きリストのアクセシビリティが向上し、スクリーンリーダーでも意味のある情報が提供される。

@font-faceでのfont-variation-settingsサポート#

@font-faceルールでfont-variation-settings記述子がサポートされ、フォントのバリエーションを直接設定可能。

1
@font-face {
2
  font-family: "OpenTypeFont";
3
  src: url("open_type_font.woff2") format("woff2");
4
  font-variation-settings:
5
    "wght" 400,
6
    "wdth" 300;
7
}
8

9
/* 使用例 */
10
.variable-font {
11
  font-family: "OpenTypeFont";
12
  /* 個別要素での調整も可能 */
13
  font-variation-settings: "wght" 700;
14
}

フォントの太さ、幅、傾斜などの軸を@font-faceレベルで調整できるようになり、より柔軟なタイポグラフィ制御が可能。

ルートからビューポートへのoverscroll-behavior伝播#

CSS ワーキンググループは、<body> からビューポートにプロパティを伝播しないことを決定。代わりに、ビューポートのプロパティはルート（<html>）要素から伝播される。

1
/* ルート要素での設定 */
2
html {
3
  overscroll-behavior: contain;
4
}
5

6
/* これによりbodyやビューポート全体に伝播 */
7
body {
8
  /* overscroll-behaviorは自動的にcontainが適用される */
9
  height: 200vh; /* コンテンツがビューポートを超える */
10
}

Chrome には、ルートではなく<body> から overscroll-behavior を伝播するという長年の問題がありった。この変更によりChromeが仕様に準拠し、他の実装との相互運用が可能になった。

CSS型付き算術の改善#

calc(20% / 0.5em * 1px)やcalc(10em / 1px)といった記述が可能になった。

今まではtan(atan2(length_value, 1px))といったトリックを利用して単位情報を削除して計算を行う必要があった。

ESLint v9.35.0がリリース、preserve-caught-errorの追加#

日付：2025年9月5日

ESLint v9.35.0がリリース。ブロック内で新しいエラーをスローするときにcauseプロパティを強制するpreserve-caught-errorルールが追加された。

1
// ❌ 不正
2
try {
3
    // ...
4
} catch (error) {
5
    throw new Error("Something went wrong");
6
}
7

8
// ✅ 正解
9
try {
10
    // ...
11
} catch (error) {
12
    throw new Error("Something went wrong", { cause: error });
13
}

出展：ESLint v9.35.0 released - ESLint Blog

Fresh 2.0がベータ版に移行、Vite統合を追加#

日付：2025年9月2日

Fresh 2.0がベータ版に移行し、Vite統合が追加。

1
// Vite設定例
2
import { defineConfig } from "vite";
3
import { fresh } from "@fresh/plugin-vite";
4

5
export default defineConfig({
6
  plugins: [fresh()],
7
});

FreshがViteプラグインとして動作可能になり、アイランドコードでのみHot Module Reloadingをサポートするようになった。またプロダクション環境での起動時間が大幅に短縮され、86msから8msへと10倍の高速化を実現した。さらに、react、react-domの自動エイリアシングによりReact互換性が改善され、Fresh 1.xで人気だったHeadコンポーネントも復活した。

出展：Fresh 2.0 Graduates to Beta, Adds Vite Support - Deno Blog

Nuxt 4.1がリリース、ビルド安定性とモジュール開発機能を大幅強化#

日付：2025年9月2日

Nuxt 4.1がリリースされ、ビルド安定性の大幅改善とモジュール開発機能の強化が行われた。

import mapsによるEnhanced Chunk Stabilityにより、単一コンポーネントの変更が全体のハッシュを無効化する問題が解決され、プロダクション環境でのキャッシュ効率が向上した。また、Rolldown統合の実験的サポートにより、Rustベースの高速バンドリングが可能になった。

モジュール開発では、moduleDependenciesによる依存関係管理、onInstallとonUpgradeライフサイクルフック、getLayerDirectoriesユーティリティなどが追加され、より強力なモジュールシステムが構築できるようになった。

出展：Nuxt 4.1 - Nuxt Blog