O hirunewani blog

Frontend Weekly 2025-03-07

Created at

Interop 2025, Chrome 134, TypeScript 5.8, Next.js 15.2, Lynxなど

Interop 2025

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

https://web.dev/blog/interop-2025

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

  • Anchor positioning
  • backdrop-filter
  • Core Web Vitals
  • <details> element
  • Layout
  • Modules
  • Navigation API
  • Pointer and mouse events
  • Remove mutation events
  • @scope
  • scrollend event
  • Storage Access API
  • text-decoration
  • URLPattern
  • View Transition API
  • WebAssembly
  • Web compat
  • WebRTC
  • Writing modes

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

  • Accessibility testing
  • Gamepad API testing
  • Mobile testing
  • Privacy testing
  • WebVTT

Chrome 134

Chrome 134がリリース。

https://developer.chrome.com/release-notes/134?hl=ja

https://developer.chrome.com/blog/new-in-chrome-134?hl=ja

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

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

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

  • サードパーティCookieの制限をテストする機能の追加
  • :openなど複数の疑似グラス/要素の切り替えをサポート
  • 全てのコンソールメッセージをコピーする機能の追加

https://developer.chrome.com/blog/new-in-devtools-134?hl=ja

TypeScript 5.8

TypeScript 5.8がリリース。

https://devblogs.microsoft.com/typescript/announcing-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

Next.js 15.2がリリース。

https://nextjs.org/blog/next-15-2

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

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

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

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

Lynx

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

https://lynxjs.org/blog/lynx-unlock-native-for-more.html

https://github.com/lynx-family/lynx

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

https://lynxjs.org/api/react/index.html#react-apis

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

https://lynxjs.org/guide/scripting-runtime/index.html

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