先週、第 6 回の React Conf を開催しました。これまでの年度において、我々は React Conf のステージ上で、React Native や React Hooks といった業界を変えるような発表をお届けしてきました。本年度は、React 18 のリリースと並行レンダリング機能の段階的な採用から始まる我々のマルチプラットフォーム戦略についての話題を共有しました。

React Conf がオンラインで開催されたのは今回が初めてですが、イベントは 8 つの言語に翻訳され、無料でストリーミング配信されました。世界中の参加者が、カンファレンスの Discord や、すべてのタイムゾーンの方がアクセスしやすいように行われたリプレイイベントに参加しました。登録者数は 50,000 人以上に達し、19 の演題は 60,000 回以上閲覧され、両イベントを通じて Discord には 5,000 人の参加者が集まりました。

すべての発表はオンラインストリーミングで閲覧可能です。

以下が、ステージ上で共有された内容のおさらいとなります。

React 18 と並行レンダリング機能

キーノートでは、React 18 から始まる React の将来のビジョンについて共有しました。

React 18 には、長らく待望されてきた並行レンダラと、サスペンスへの機能追加が、大きな破壊的変更なしに入ります。アプリは、他のメジャーリリースのときと変わらない程度の労力で React 18 にアップグレードして、並行レンダリングの機能を段階的に採用していくことが可能です。

これはつまり、並行モードというものがなくなった、ということです。並列レンダリング機能のみが存在します。

キーノートではさらに、サスペンス、サーバコンポーネント、新たな React ワーキンググループ、そして React Native の長期的な多プラットフォーム戦略についてお話ししました。

Andrew Clark、Juan Tejada、Lauren Tan、Rick Hanlon によるキーノートの全編は以下でご覧ください：

アプリ開発者にとっての React 18

キーノートでは、React 18 RC が評価のために今すぐ利用可能であることを発表しました。さらなるフィードバックを待ちつつも、これが来年初頭に我々が安定版として公開する予定の React のバージョンそのものとなります。

React 18 RC を試すには、dependencies をアップグレードしてください：

npm install react@rc react-dom@rc

そして新しい createRoot API を使うように切り替えます：

// before
const container = document.getElementById('root');
ReactDOM.render(<App />, container);

// after
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App/>);

React 18 へのアップグレードのデモについては、Shruti Kapoor による以下の発表をご覧ください：

サスペンスを使ったストリーミングサーバレンダリング

React 18 にはサスペンスを使ったサーバサイドレンダリングのパフォーマンス改善が含まれています。

ストリーミングサーバレンダリングによって、サーバ側で React コンポーネントから HTML を作成し、それをユーザにストリームで送ることができます。React 18 では、Suspense を使ってアプリを小さな単位に分割し、それぞれがアプリの他の部分をブロックせずに独立してストリーミング処理できるようになります。これによりユーザはより早くコンテンツを見ることができ、素早くインタラクションができるようになる、ということです。

詳しくは、Shaundai Person による以下の発表をご覧ください：

React ワーキンググループの立ち上げ

React 18 では、エキスパートや開発者、ライブラリメンテナ、教育者のグループと協力して作業するため、初めてワーキンググループを立ち上げました。彼らとともに、段階的な採用戦略を作成し、useId、useSyncExternalStore, useInsertionEffect といった API の改善を行ってきました。

この試みの概要については、Aakansha’ Doshi による発表をご覧ください：

React の開発者向けツーリング

このリリースにおける新機能をサポートするため、新たに構成された React DevTools チームと、開発者が React アプリをデバッグしやすくするための新たなタイムラインプロファイラについて発表しました。

新たな DevTools の機能についての詳細およびデモについては、Brian Vaughn による発表をご覧ください：

memo 不要の React

より将来に目を向けた話として、Xuan Huang (黄玄) は、React Labs が行っている自動メモ化コンパイラに関する研究の現状についてお話ししました。この発表とコンパイラのプロタイプについての詳細・デモは以下でご覧ください：

React ドキュメントキーノート

React の学習や React による設計についての一連の発表は Rachel Nabors からスタートしました。その中では React の 新ドキュメント に対する我々の注力についてのキーノートがありました：

さらに…

React の学習や React における設計についての以下のような発表がありました：

• Debbie O’Brien: Things I learnt from the new React docs.
• Sarah Rainsberger: Learning in the Browser.
• Linton Ye: The ROI of Designing with React.
• Delba de Oliveira: Interactive playgrounds with React.

Relay、React Native、PyTorch チームからの発表：

• Robert Balicki: Re-introducing Relay.
• Eric Rozell and Steven Moyes: React Native Desktop.
• Roman Rädle: On-device Machine Learning for React Native

アクセシビリティ、ツーリング、サーバコンポーネントについてコミュニティからの発表：

• Daishi Kato: React 18 for External Store Libraries.
• Diego Haz: Building Accessible Components in React 18.
• Tafu Nakazaki: Accessible Japanese Form Components with React.
• Lyle Troxell: UI tools for artists.
• Helen Lin: Hydrogen + React 18.

謝辞

我々自身でカンファレンスを計画したのは今年が初めてでした。多くの方に感謝したいと思います。

まずは発表者の方々に感謝します。Aakansha Doshi、Andrew Clark、Brian Vaughn、Daishi Kato、Debbie O’Brien、Delba de Oliveira、Diego Haz、Eric Rozell、Helen Lin、Juan Tejada、Lauren Tan、Linton Ye、Lyle Troxell、Rachel Nabors、Rick Hanlon、Robert Balicki、Roman Rädle、Sarah Rainsberger、Shaundai Person、Shruti Kapoor、Steven Moyes、Tafu Nakazaki、Xuan Huang (黄玄)。

発表についてのフィードバックを頂いた方々に感謝します。Andrew Clark、Dan Abramov、Dave McCabe、Eli White、Joe Savona、Lauren Tan、Rachel Nabors、Tim Yung。

カンファレンス Discord のセットアップを行い Discord 管理者になっていただいた Lauren Tan に感謝します。

全体の方向性や、多様性とその受け入れについて助言をいただいた Seth Webster に感謝します。

モデレーション関係業務の先頭に立っていただいた Rachel Nabors、そしてモデレーションガイドを作成し、モデレーションチームを率い、翻訳者とモデレータの教育を行い、両イベントのモデレーションに協力していただいた Aisha Blake に感謝します。

モデレータの方々に感謝します。Jesslyn Tannady、Suzie Grange、Becca Bailey、Luna Wei、Joe Previte、Nicola Corti、Gijs Weterings、Claudio Procida、Julia Neumann、Mengdi Chen、Jean Zhang、Ricky Li、Xuan Huang (黄玄).

リプレイイベントのモデレーションやコミュニティへの活動に協力頂いた、React India の Manjula Dube、Sahil Mhapsekar、Vihang Patel、および React China の Jasmine Xie、QiChang Li、YanLun Li に感謝します。

カンファレンスのウェブサイトを構築するのに使った Virtual Event Starter Kit を公開していただいた Vercel、そして Next.js Conf での経験を共有していただいた Lee Robinson と Delba de Oliveira に感謝します。

カンファレンス運営の経験や RustConf 運営からの教訓を共有していただいた Leah Silber に感謝します。彼女の書籍 Event Driven とそこに含まれたカンファレンス運営に関する助言に感謝します。

Women of React Conf の運営経験について共有していただいた Kevin Lewis と Rachel Nabors に感謝します。

企画全体にわたってアドバイスやアイディアをいただいた Aakansha Doshi、Laurie Barth、Michael Chan、Shaundai Person に感謝します。

カンファレンスウェブサイトとチケットのデザイン・構築に協力いただいた Dan Lebowitz に感謝します。

キーノートや Meta 従業員の発表の録画をしていただいた Laura Podolak Waddell、Desmond Osei-Acheampong、Mark Rossi、Josh Toberman および Facebook Video Productions の他の方々に感謝します。

カンファレンスの運営、ストリームされる全ビデオの編集、全発表の翻訳、そして多言語での Discord のモデレーションについて協力いただいたパートナーの HitPlay に感謝します。

最後に、この React Conf を素晴らしいものにしていただいたすべての参加者の皆さんに感謝します！