いよいよ React 18 のリリースが近づいてきています。
いい機会なので今更ながら React Conf 2021 の内容をざっくりとまとめて紹介しようと思います。
この記事では、具体的な内容は書かないので詳細は動画を御覧ください。
早速、各セッションのまとめをざっくり記載していこうと思います。
セッション
React 18 Keynote
React がどのように活用されているかと React Conf のセッションの紹介。Suspense や新しい API での取り組みについての説明もされています。Suspense など React 18 の機能は、Native アプリ開発 のインスピレーションを得たことについても説明されています。
React 18 for app developers
React 18 の新機能の説明・アップグレードについての説明です。新機能では、自動バッチ処理・Suspense・その他新 API の仕組みについて話しています。最後にはアップデートの仕方と実際にデモを行って紹介をしています。
Streaming Server Rendering with Suspense
SSR をするときに、Suspense を使うことでレンダリングが最適化される話。一般的にハイドレートが完了しないとユーザーの操作を受け付けないが、Suspense を使うことで作業分割や非同期表示を行うことができる。ユーザー操作によるハイドレートの順序の最適化についても話をしている。
The first React Working Group
ワーキンググループがどんな動きをしているかを API の名前の変更の経緯などと合わせて紹介しています。併せて、useSyncExternalStore, useId, useInsertionEffect に関しての変更経緯の話もしています。
React Developer Tooling
React の Developer Tools の最新更新情報とロードマップの話。hooks 部分のソースマップから変数名を解析して表示させたり、コンポーネントのプロファイルやタイムラインの解析を紹介しています。 将来的にプロファイルの改善、React Native のデバッグ改善、SSR のデバッグなどを考えていることを話していました。
React without memo
自動メモ化コンパイラの製品化を目指している話。現状は可読性とパフォーマンスがトレードオフになっています。しかし、それらをいいとこ取りする「React Forget」というプロジェクトがあります。まだ複雑なケースには対応できていないようです。
React Docs Keynote
React のドキュメントの beta 版の紹介。 ( https://beta.reactjs.org/ )
Hooks のカリキュラムを求める声が多くあったことから行ったアプローチを解説しています。
Things I learnt from the new React docs
新しい React のドキュメントのわかりやすさを紹介。新しいドキュメントを表示しながら、children、 context、 hooks などがどのような挙動なのかわかりやすく解説されていることを説明しています。
Learning in the Browser
ブラウザだけで React を学んだ経験の話。scrimba を利用してターミナルもシェルもコンソールもない状態ですぐに React アプリを書いた体験を話していました。また、最終的に Astro という静的サイトジェネレーターでブログを作って OSS への貢献をした話をしていました。
The ROI of Designing with React
デザイナーが React を学ぶことによる ROI の話。figma や framer などで props などの概念を理解することでエンジニアとデザイナーの対話がかんたんになる。また、"ノーコード(アートボード上の component や variants)"、"デザインからコードを活用"、"React内でプロトタイプを構築"のいずれであってもエンジニアとのシームレスな連携などの利益を得ることができるという話。
Interactive Playgrounds with React
静的ページにユーザーのインタラクティブが必要な要素を追加するときは mdx がおすすめという話。React Docs beta でも利用されています。Docusaurus、 Nextra、 next/mdx、 next-mdx-remote、 mdx-bundler などを利用して使うことができる。
Re-introducing Relay
Relay の紹介。GraphQL のデータを利用するアプリを構築するためのフレームワーク。コンパイルを挟むことによってクエリを最適化した状態にする。動画後半ではSuspenseとの連携などの説明を行っています。
React Native Desktop
Messenger Desktop React Native Migration
Electron で Messenger Desktop に拡張現実の機能を追加した際に React Native を採用した話。 WebRTC の制限に遭遇したときに "Electronのフォーク"、"WebGL"、"Qt"、"React Native" を検討したが、"労力"、"パフォーマンス"、"スキルセットのアンマッチ" から React Native を採用した。結果としてパフォーマンスと信頼性が大幅に向上した。
React Native at Microsoft
Microsoft が React Native への投資を行っている理由の話。クロスプラットフォームのため、 Windows や MacOS で自然に利用することができる。React のコミュニティの力を活かしてプラットフォーム構築を考えている。
On-device Machine Learning for React Native
React Native で機械学習できるフレームワーク PyTorch Live を紹介する話。カメラで撮ったキャラクターを文字で表示するデモを披露しています。
React 18 for External Store Libraries
useSyncExternalStore についての話。並列描画を行う際に、外部 store の更新が描画中に行われて、整合性が取れなくなる場合があります。React 17 から 18 へ移行する前に、 use-sync-external-store というパッケージを利用して不整合が起きないようにしておきましょうという話でした。
Building accessible components with React 18
ariakit を利用してかんたんに accesible なものを作ることができる話。Suspense でローディング表示を行ったり、 useDeferredValue で古い状態を維持するデモで紹介しています。
Accessible Japanese Form Components with React
行政手続きの煩雑さと多様性を解決するための UI Kit である "SmartHR UI" の紹介。和暦があることによる手間や、エラーの表示の順序によるアクセシビリティの低下などを例に紹介されています。
UI Tools for artists
Netflix Studio で利用している React ベースの Hawkins というデザインシステムの話。アーティストの制作時間を最大化するために他の作業を最小化する必要があるため、画像アップロードをコピー&ペーストでかんたんにアップロードすることができるようになったようです。
Hydrogen + React 18
Hydrogen という、 React 18 ベースで shopify のカスタムストアを構築するための framework の話。一般的な SPA と比べて初期ロードされる bundle のサイズが小さいため、高速な FCP (First Contentful Paint) を実現しているようです。まだデベロッパープレビュー版ですが、オープンソース化しているので気軽なコミュニティへの参加を募っています。
さいごに
拙いまとめで解釈が違ったりするかもしれませんが、少しでも動画を見る判断材料になればと思います。