React LabsがView Transitions、Activity、その他の実験的機能を発表

日付：2025年4月23日

React Labsが新しい実験的機能と開発中の機能についての最新情報を公開。View TransitionsとActivityの2つの実験的機能が試用可能になり、その他の開発中機能の進捗も報告された。

実験バージョンをインストールすることで試すことが出来る。

pnpm add react@experimental react-dom@experimental

出展：React Labs: View Transitions, Activity, and more

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

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

主な特徴：

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

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

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

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

主な特徴：

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

Effect依存配列の自動化

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

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

その他の開発中機能

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

pnpm 10.9.0リリース

日付：2025年4月21日

パッケージマネージャーpnpmの新バージョンがリリース。JSRパッケージのサポートと新しいビルド設定オプションを導入。

出展：Release v10.9.0 · pnpm/pnpm

JSRパッケージのサポート

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

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

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

{
  "dependencies": {
    "@foo/bar": "jsr:^0.1.2"
  }
}

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

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

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

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

Playwright v1.52.0リリース

日付：2025年4月17日

E2EテストフレームワークのPlaywrightが新バージョンをリリース。クラス検証の新メソッドやARIAスナップショットの機能強化、テストランナーの改善などを含む。

出展：Release v1.52.0 · microsoft/playwright

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

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

await expect(page.getByRole('listitem', { name: 'Ship v1.52' })).toContainClass('done');

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

await expect(locator).toMatchAriaSnapshot(`
  - list
    - /children: equal
    - listitem: Feature A
    - listitem:
      - link "Feature B":
        - /url: "https://playwright.dev"
`);

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

• 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へのアップグレードを推奨