React Conf 2021 まとめ

2021年12月17日 Jesslyn Tannady と Rick Hanlon により

先週、6回目のReact Confを開催しました。これまでのReact Confでは、React NativeやReact Hooksなど、業界を変える発表をしてきました。今年は、React 18のリリースと、コンカレント機能の段階的導入から始まる、Reactのマルチプラットフォームビジョンを共有しました。

今回のReact Confは初めてオンラインで開催され、8種類の言語に翻訳された無料ストリーミングで行われました。世界中から参加者がカンファレンスのDiscordと、すべてのタイムゾーンのアクセシビリティを考慮したリプレイイベントに参加しました。5万人以上が登録し、19の講演を6万人以上が視聴し、両イベントを通してDiscordには5,000人の参加者がいました。

すべての講演はオンラインでストリーミング視聴できます。

ステージで共有された内容の要約を以下に示します。

React 18とコンカレント機能

基調講演では、React 18から始まるReactの未来へのビジョンを共有しました。

React 18では、待望のコンカレントレンダラーとSuspenseのアップデートが、大きな破壊的変更なしに追加されました。アプリケーションはReact 18にアップグレードし、他のメジャーリリースと同等の労力で、コンカレント機能を段階的に導入し始めることができます。

つまり、コンカレントモードはなく、コンカレント機能のみです。

基調講演では、Suspense、サーバーコンポーネント、新しいReactワーキンググループ、そしてReact Nativeの長期的なマルチプラットフォームビジョンについても共有しました。

Andrew Clark、Juan Tejada、Lauren Tan、そしてRick Hanlonによる基調講演の完全版はこちらをご覧ください。

アプリケーション開発者向けのReact 18

基調講演では、React 18 RCが利用可能になったことも発表されました。今後のフィードバック次第ですが、来年初めに安定版として公開されるのはこのバージョンのReactです。

React 18 RCを試すには、依存関係をアップグレードしてください。

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の講演をご覧ください。

Suspenseを使用したストリーミングサーバーレンダリング

React 18には、Suspenseを使用したサーバーサイドレンダリングのパフォーマンス向上も含まれています。

ストリーミングサーバーレンダリングでは、サーバー上でReactコンポーネントからHTMLを生成し、その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ドキュメント基調講演

Rachel Nabors氏は、Reactによる学習と設計に関する講演のセクションを、Reactの新ドキュメントへの投資に関する基調講演で開始しました（現在react.devとしてリリース済み）。

そしてさらに…

Reactによる学習と設計に関する講演も行われました。

Debbie O’Brien氏：新しいReactドキュメントから学んだこと。
Sarah Rainsberger氏：ブラウザでの学習。
Linton Ye氏：Reactによる設計のROI。
Delba de Oliveira氏：Reactを使ったインタラクティブなプレイグラウンド。

Relay、React Native、PyTorchチームからの講演

Robert Balicki氏：Relayの再紹介。
Eric Rozell氏とSteven Moyes氏：React Native Desktop。
Roman Rädle氏：React Native向けオンデバイス機械学習

アクセシビリティ、ツール、サーバーコンポーネントに関するコミュニティからの講演

加藤大史氏：外部ストアライブラリのためのReact 18。
Diego Haz氏：React 18におけるアクセシブルなコンポーネントの構築。
中崎多武氏：Reactを使ったアクセシブルな日本語フォームコンポーネント。
Lyle Troxell氏：アーティストのためのUIツール。
Helen Lin氏：Hydrogen + React 18。

ありがとうございました

今年は初めて自分たちでカンファレンスの企画・運営を行い、多くの方々に感謝しなければなりません。

まず、講演者の皆様、Aakansha Doshi氏、Andrew Clark氏、Brian Vaughn氏、加藤大史氏、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氏、中崎多武氏、そしてXuan Huang（黄玄）氏に感謝いたします。

講演に関するフィードバックを提供してくださった皆様、特にアンドリュー・クラーク氏、ダン・アブラモフ氏、デイブ・マッケイブ氏、イーライ・ホワイト氏、ジョー・サボナ氏、ローレン・タン氏、レイチェル・ネイバーズ氏、そしてティム・ヤング氏に感謝いたします。

カンファレンスのDiscordの設定とDiscord管理者としての役割を担ってくださったローレン・タン氏に感謝いたします。

全体的な方向性についてのフィードバックと、多様性と包括性に焦点を当てるよう配慮してくださったセス・ウェブスター氏に感謝いたします。

モデレーション活動の先頭に立ってくださったレイチェル・ネイバーズ氏、そしてモデレーションガイドの作成、モデレーションチームの統率、翻訳者とモデレーターのトレーニング、そして両イベントのモデレーションを手伝ってくださったアイシャ・ブレイク氏に感謝いたします。

モデレーターの皆様、ジェスリン・タナディ氏、スージー・グランジ氏、ベッカ・ベイリー氏、ルナ・ウェイ氏、ジョー・プレヴィット氏、ニコラ・コルティ氏、ギース・ウェテリングス氏、クラウディオ・プロチダ氏、ジュリア・ノイマン氏、チェン・メングディ氏、チャン・ジエン氏、リー・リッキー氏、そしてフアン・シュアン（黄玄）氏に感謝いたします。

再放送イベントのモデレーションとコミュニティへのエンゲージメント維持に貢献してくださったマンジュラ・ドゥベ氏、サヒル・マプセカル氏、そしてReact Indiaのヴィハン・パテル氏、ならびにジャスミン・シー氏、リー・チチャン氏、そしてリー・ヤールン氏（React China）に感謝いたします。

カンファレンスのウェブサイト構築に使用されたバーチャルイベントスターターキットを公開してくださったVercel、そしてNext.js Confの運営経験を共有してくださったリー・ロビンソン氏とデルバ・デ・オリベイラ氏に感謝いたします。

カンファレンスの運営経験、RustConfの運営から得られた教訓、そしてカンファレンスの運営に関するアドバイスを記した著書Event Drivenを共有してくださったレア・シルバー氏に感謝いたします。

Women of React Confの運営経験を共有してくださったケビン・ルイス氏とレイチェル・ネイバーズ氏に感謝いたします。

企画を通してアドバイスやアイデアをくださったアーカンシャ・ドシ氏、ローリー・バース氏、マイケル・チャン氏、そしてシャウンダイ・パーソン氏に感謝いたします。

カンファレンスのウェブサイトとチケットのデザインと構築を手伝ってくださったダン・レボウィッツ氏に感謝いたします。

基調講演とMeta社員の講演のビデオ収録を手伝ってくださった、ローラ・ポドラック・ワデル氏、デズモンド・オセイ・アチャムポング氏、マーク・ロッシ氏、ジョシュ・トゥーバーマン氏、およびFacebookビデオ制作チームの皆様に感謝いたします。

カンファレンスの開催、ストリーム内の全ビデオの編集、全講演の翻訳、そして複数言語でのDiscordのモデレーションを手伝ってくださったパートナーのHitPlayに感謝いたします。

最後に、この素晴らしいReact Confを成功に導いてくださった全ての参加者の皆様に感謝いたします！

前へReact 18へのアップグレード方法

次へReact 18の計画