Frontend Weekly 2025-04-25

View Transitions によるアニメーション制御#

ブラウザの View Transitions API を活用した新しい<ViewTransition>コンポーネントを導入。UI トランジションのアニメーション実装を簡素化する。

主な特徴：

• <ViewTransition>コンポーネントでアニメーション対象要素をラップ
• startTransition、useDeferredValue、Suspenseでトリガー可能
• CSS でアニメーションをカスタマイズ可能
• 共有要素トランジションのサポート

Activity による条件付き UI 表示の簡素化#

新しい<Activity>コンポーネントを導入。UI の一部を表示・非表示を宣言的に制御できる。

1
<Activity when={isOpen}>
2
  <div>表示・非表示を切り替えるUI</div>
3
</Activity>

主な特徴：

• whenプロパティで表示条件を制御
• 非表示時は DOM から完全に削除
• トランジションと組み合わせて使用可能
• コンポーネントのマウント・アンマウントを簡潔に記述

Effect 依存配列の自動化#

React Compiler を使用して Effect 依存配列を自動で挿入する機能を開発中。これにより：

• 依存配列の手動管理が不要に
• Effect の理解がより直感的に
• コンパイラが IDE と連携し、デバッグ時に挿入された依存配列を表示

その他の開発中機能#

• Fragment Refs：複数の DOM 要素をグループ化して参照可能に
• Concurrent Stores：外部ストアの並行レンダリングを完全サポート
• ジェスチャーアニメーション：View Transitions の拡張機能として検討中

JSR パッケージのサポート#

JSR パッケージを直接インストールできるようになった：

1
pnpm add jsr:<pkg_name>
2
pnpm add jsr:<pkg_name>@<range>

package.jsonには以下のように記録される：

1
{
2
  "dependencies": {
3
    "@foo/bar": "jsr:^0.1.2"
4
  }
5
}

pnpm publish時には、npm、Yarn、古いバージョンの pnpm と互換性のある形式に変換される。

依存関係のスクリプトを自動実行する dangerouslyAllowAllBuilds 設定#

dangerouslyAllowAllBuilds設定が追加され、依存関係のスクリプトを自動的に実行できるようになった：

1
pnpm config set dangerouslyAllowAllBuilds true
2
pnpm install --dangerously-allow-all-builds

クラス検証と ARIA スナップショットの強化#

要素のクラス名を検証する新メソッドtoContainClass()を追加：

1
await expect(page.getByRole("listitem", { name: "Ship v1.52" })).toContainClass(
2
  "done"
3
);

ARIA スナップショットに/childrenと/urlプロパティを追加：

1
await expect(locator).toMatchAriaSnapshot(`
2
  - list
3
    - /children: equal
4
    - listitem: Feature A
5
    - listitem:
6
      - link "Feature B":
7
        - /url: "https://playwright.dev"
8
`);

ワーカー数の設定、フレーキーテストを失敗にするオプションなどの追加#

• testProject.workers：テストプロジェクト毎のワーカー数設定が可能に
• testConfig.failOnFlakyTests：フレーキーテストの検出時にテスト実行を失敗させる設定を追加
• !@my-tag、!my-file.spec.ts：HTML レポーターでの否定フィルタリングをサポート

破壊的変更：URL パターンと Cookie ヘッダー仕様の変更、macOS 13 のサポート終了#

• URL パターンのグロブ記法から?ワイルドカードと[]範囲指定を削除
  • 正規表現の使用を推奨
• route.continue()での Cookie ヘッダー上書きを廃止
  • browserContext.addCookies()の使用を推奨
• macOS 13 での WebKit サポートを終了
  • より新しい macOS へのアップグレードを推奨