9月9日、JavaScriptライブラリ「React 19.3」が正式リリースされた。
今回のアップデートでは、これまで実験的機能として提供されていたAPI「View Transitions」と「Fragment Refs」が安定リリースとなった。
<ViewTransition>コンポーネントを使用すると、ブラウザのビュー遷移APIを使用して、要素の出現、退出、移動、サイズ変更時にアニメーション効果を適用できる。UIの一部にアニメーションを適用するには、その部分を <ViewTransition> で囲む。
デフォルトでは<ViewTransition> は滑らかなクロスフェードアニメーションで遷移するが、View Transition Classを渡してCSSでアニメーションを定義することでカスタマイズ可能。現在、<ViewTransition>はDOMでのみ動作し、React Nativeやその他のプラットフォームへの対応を進めているという。
また、新しいFragment Refs（フラグメント参照）は、<Fragment> にrefを直接渡すことで、直下のDOM要素群をまとめたオブジェクト（FragmentInstance）を取得し、DOM構造を変えずに操作できる機能だ。
これによって、レンダリングされた単一の親を持たない要素のグループを、1つの単位としてまとめて扱えるほか、サードパーティ製ライブラリなどref非対応のコンポーネントに対しても、外部からスクロール検知やフォーカス移動などの動作を付加できる。
その他、browser APIによるコンポーネントでのサーバーサイドレンダリングを柔軟にコントロールできるようになるなど、多様なアップデートがなされている。変更点の詳細は、公式ブログから確認できる。
- 関連リンク
この記事は参考になりましたか？
- この記事の著者
-
CodeZine編集部（コードジンヘンシュウブ）
CodeZineは、株式会社翔泳社が運営する開発者のための情報メディアです。日々の開発に取り組むエンジニアやテクノロジーを学びたい方に向けて、プログラミングやAI活用、開発ツール、エンジニアの学びとキャリアに関する記事をお届けしています。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
