Frontend Weekly 2025-03-07

Interop 2025#

ウェブの相互運用性を向上させるためにブラウザベンダーが協力して取り組み Interop プロジェクトの 2025 年版、Interop 2025 が発表された。

Focus areas として次の項目を挙げている。

また調査対象として、次の項目を挙げている。

Chrome 134 がリリース。

次の変更などが含まれる。

dialog要素の閉じ方を制御する closedby 属性の追加
- none: ユーザーの操作の閉じない
- closerequest: ESC などユーザーの操作で閉じる
- any: 外側のクリック、ESC などユーザーの操作で閉じる
CSS ハイライトの継承
- 従来は::selectionや::highlightなどのスタイルが継承されず、子要素が入るとハイライトのスタイルがリセットされていた。
カスタマイズ可能な<select>要素
- https://developer.chrome.com/blog/rfc-customizable-select?hl=ja
- appearance: base-selectを指定することで、<select>要素を完全に制御できる
Shared Storage に Web Locks API が統合
- サイト間で同じデータにアクセスできる Shared Storage では、データ競合の発生する可能性がある。
- Web Locks API によって、排他制御やバッチ処理が可能になった。
PaintCanvas に imageSmoothingQuality 属性が追加
- canvas に表示された画像を拡大縮小する際の品質を制御できる。

また DevTools には次の変更などが含まれる。

TypeScript 5.8 がリリース。

次の変更などが含まれる。

require(esm)のサポート
- Node.js v22 でサポートされた require(esm)を、--module nodenextでサポートした。
erasableSyntaxOnlyフラグの追加
- Node.js v22 では TypeScript をそのまま実行できるexperimental-strip-typesフラグが追加され、Node.js v23 ではフラグなしで実行できるようになっている。
- erasableSyntaxOnlyフラグを利用すると、単純な型注釈では削除できないenumやnamaespaceなどの構文をエラーとして扱うことが出来る。
libReplacementフラグの追加
- TypeScript には標準の型定義を差し替える仕組みがあり、このために常に node_modules を監視している。
- libReplacementフラグを利用することで、この挙動を無効化し負荷を軽減できる。
- 今後デフォルトが false になる可能性があるため、利用している場合は明示的に設定することが推奨されている。

Next.js 15.2 がリリース。

次の変更などが含まれる。

エラー UI とスタックトレースの刷新
メタデータのストリーミング
- 非同期なページ遷移を行った際に動的なメタタグを埋め込む API generateMetadataによってブロッキングが発生していた。
- この API がストリーミングされるようになったためパフォーマンスの改善が見込まれる。

また実験的な機能として次も含まれる。

React View Transitions API の追加
- React に実験的に追加された<ViewTransition>コンポーネントを利用できるようになる。
- <ViewTransition>はページ遷移時のアニメーションを制御する View Transition API をラップしたもの。
Node.js Middleware の追加
- 今までは Edge runtime のみのサポート。Node.js でも動かすことは出来たが機能は限定されていた。

ByteDance が React/CSS を使って iOS/Android/Web アプリを開発できるツールキット Lynx を公開。

Lynx の React 実装は、React v17 及び Preact と互換性があるとのこと。

また Lynx は、QuickJS をベースにした独自のPrimJSという JavaScript エンジンをランタイムとして使用している。*

*iOS の場合、バックグラウンドスレッドでは JavaScriptCore をデフォルトでは使用する。