React Tokyo トレンドレポート : <ViewTransition> Component

こんにちは！cordeliaです。

React TokyoのDiscordには情報・質問部屋というフォーラム形式のチャンネルがあります。これは各々が気になったトピックを立て、関連コンテンツ（記事・issue・Pull Request・動画・SNS投稿、なんでも）を共有するナレッジ蓄積型のチャンネルです。旬なものからマニアックなものまで、様々な情報が日々蓄積されております。コミュニティの皆様いつもありがとうございます。

そこで！特に盛り上がったチャンネルに共有されたコンテンツをピックアップして皆様にお届けしようじゃないか、という試みがこのReact Tokyo トレンドレポートです🎉

そして記念すべき第1回目のトピックは、Reactの<ViewTransition> Componentです。

Web APIのView Transition APIがReactで使えるようになるかも？というお話ですね。まだ実験的な機能なので将来変更される可能性はあると思いますが、stableになったらUI表現の幅が広がりますね！

という訳で、今回共有されたものをご紹介します。

issue, Pull Request, Discussion

まずはこちら。<ViewTransition> ComponentがReactに追加されるかも？
https://github.com/facebook/react/pull/31975

React Nativteでの動作も目指しているようです。
https://github.com/facebook/react/pull/31975#issuecomment-2571704678

Navigation APIと一緒に動作するように。
https://github.com/facebook/react/pull/32028

フォントのチラつきにも対応。
https://github.com/facebook/react/pull/32031

View Transitionの擬似要素にアニメーションを付けられる。
https://github.com/facebook/react/pull/32038

<ViewTransition> ComponentにEventを追加。
https://github.com/facebook/react/pull/32041

<ViewTransition> Componentにpropsを追加。
https://github.com/facebook/react/pull/32050

Transitionの種類を指定できるように。
https://github.com/facebook/react/pull/32105

以前、このようなDiscussionもありました。
https://github.com/vercel/next.js/discussions/46300

記事

こちらとても参考になります🙇
https://azukiazusa.dev/blog/declarative-page-transition-animation-with-react-viewtransition-component/#適用するアニメーションをカスタマイズする

その他

Next.js App RouterでView Transition APIが使えるライブラリもあります。
https://www.npmjs.com/package/next-view-transitions/v/0.1.0

Dan Abramov氏がplaygroundを公開。
https://bsky.app/profile/danabra.mov/post/3lfdwkfzprk2a

終わりに

毎日進歩する技術情報を自分の力だけで集めるのは大変なことです。ですがそこに誰かの力が加わった時、量も質も何倍にもなるはずです。（真面目過ぎでしょうか☺️）

React Tokyoではこのようなコンテンツが日々共有されています。冒頭でもお伝えしましたが、旬なものからマニアックなものまで自分では思いもよらぬ情報に出会えるかもしれません。興味を持っていただいた方はぜひ、React Tokyoを覗いてみてください。

というわけで、第1回React Tokyo トレンドレポート楽しんでいただけましたでしょうか？今後も不定期でお届けいたします。

最後までお読みいただき、ありがとうございました。

https://react-tokyo.vercel.app/