React Compiler Beta リリース
2024年10月21日 by Lauren Tan
注意：React Compilerは現在安定版になりました！詳細については安定版リリースのブログ投稿をご覧ください。
Reactチームは新しいアップデートを共有できることを嬉しく思います：
- 本日React Compiler Betaを公開し、早期採用者やライブラリメンテナーが試用してフィードバックを提供できるようにしました
- オプションのreact-compiler-runtimeパッケージを通じて、React 17+のアプリでReact Compilerを正式にサポートします
- コンパイラの段階的な採用に向けてコミュニティを準備するため、React Compiler Working Groupの公開メンバーシップを開放します
React Conf 2024で、自動メモ化を通じてReactアプリを最適化するビルド時ツールであるReact Compilerの実験的リリースを発表しました。React Compilerの紹介はこちらで確認できます。
最初のリリース以降、Reactコミュニティから報告された多数のバグを修正し、コンパイラへの高品質なバグ修正と貢献を受け取り、JavaScriptパターンの幅広い多様性に対してコンパイラをより堅牢にし、Metaでコンパイラをより広く展開し続けています。
この投稿では、React Compilerの次のステップについて共有したいと思います。
今日からReact Compiler Betaを試してみよう
React India 2024で、React Compilerのアップデートを共有しました。本日、React CompilerとESLintプラグインの新しいBetaリリースを発表できることを嬉しく思います。
新しいベータ版は@betaタグを使用してnpmに公開されています。
React Compiler Betaをインストールするには：
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
または、Yarnを使用している場合：
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
Sathya GunasekaranのReact Indiaでの講演はこちらで視聴できます。
全員にReact Compiler linterの使用を推奨します
React CompilerのESLintプラグインは、開発者がReactのルール違反を積極的に特定し修正するのに役立ちます。全員に今日からlinterを使用することを強く推奨します。linterはコンパイラがインストールされている必要がないため、コンパイラを試す準備ができていなくても独立して使用できます。
linterのみをインストールするには：
npm install -D eslint-plugin-react-compiler@beta
または、Yarnを使用している場合：
yarn add -D eslint-plugin-react-compiler@beta
インストール後、ESLint設定に追加することでlinterを有効にできます。linterを使用することで、Reactのルール違反を特定し、コンパイラが完全にリリースされた際の採用を容易にします。
後方互換性
React CompilerはReact 19で追加されたランタイムAPIに依存するコードを生成しますが、React 17と18でも動作するようにコンパイラのサポートを追加しました。
まだReact 19を使用していない場合、Betaリリースでは、コンパイラ設定で最小ターゲットを指定し、react-compiler-runtimeを依存関係として追加することで、React Compilerを試すことができます。
これに関するドキュメントはこちらで確認できます。
ライブラリでのReact Compilerの使用
初期リリースは、アプリケーションでコンパイラを使用する際の主要な問題を特定することに焦点を当てていました。素晴らしいフィードバックを受け取り、それ以降コンパイラを大幅に改善しました。
現在、コミュニティからの幅広いフィードバックと、ライブラリ作者がパフォーマンスとライブラリメンテナンスの開発者体験を向上させるためにコンパイラを試すことができる準備が整いました。
React Compilerはライブラリのコンパイルにも使用できます。React Compilerはコード変換前の元のソースコードで実行する必要があるため、アプリケーションのビルドパイプラインが使用するライブラリをコンパイルすることはできません。
そのため、ライブラリメンテナーが独立してライブラリをコンパイラでコンパイルしテストし、コンパイル済みコードをnpmに配布することを推奨します。
コードが事前コンパイルされているため、ライブラリのユーザーは、ライブラリに適用された自動メモ化の恩恵を受けるためにコンパイラを有効にする必要がありません。
ライブラリがまだReact 19を使用していないアプリをターゲットにしている場合は、最小ターゲットを指定し、react-compiler-runtimeを直接依存関係として追加してください。ランタイムパッケージは、アプリケーションのバージョンに応じてAPIの正しい実装を使用し、必要に応じて不足しているAPIをポリフィルします。
これに関する詳細なドキュメントはこちらで確認できます。
React Compiler Working Groupを全員に開放
以前、React Confで招待制のReact Compiler Working Groupを発表し、コンパイラの実験的リリースに関するフィードバック提供、質問、協力を行いました。
本日、React Compiler Betaリリースと共に、Working Groupのメンバーシップを全員に開放します。
React Compiler Working Groupの目標は、既存のアプリケーションとライブラリによるReact Compilerのスムーズで段階的な採用に向けてエコシステムを準備することです。
バグレポートは引き続きReactリポジトリに提出してください。フィードバック、質問、アイデアの共有はWorking Groupディスカッションフォーラムで行ってください。
コアチームも研究結果を共有するためにディスカッションリポジトリを使用します。安定版リリースが近づくにつれ、重要な情報もこのフォーラムに投稿されます。
MetaでのReact Compiler
React Confで、Quest StoreとInstagramでのコンパイラの展開が成功したことを共有しました。それ以降、FacebookやThreadsを含む、Metaのいくつかの主要なWebアプリにReact Compilerを展開しました。
つまり、最近これらのアプリを使用した場合、コンパイラによって強化された体験を受けている可能性があります。
100,000を超えるReactコンポーネントを持つモノレポで、これらのアプリをコンパイラに移行する際に必要なコード変更はわずかでした。これらすべてのアプリで顕著なパフォーマンス向上を確認しています。
展開を進める中で、以前ReactConfで共有した成果と同程度の結果を継続して確認しています。これらのアプリは長年にわたってMetaエンジニアとReactエキスパートによって大幅に手動調整され最適化されているため、数パーセントの改善でも私たちにとって大きな勝利です。
React Compilerからの開発者生産性の向上も期待していました。これを測定するため、Metaのデータサイエンスパートナーと協力して、手動メモ化が生産性に与える影響の徹底的な統計分析を実施しました。
Metaでコンパイラを展開する前に、Reactプルリクエストの約8%のみが手動メモ化を使用し、これらのプルリクエストの作成には31-46%長い時間がかかることを発見しました。これは、手動メモ化が認知的オーバーヘッドを導入するという私たちの直感を確認し、React Compilerがより効率的なコード作成とレビューにつながることを期待しています。
注目すべきは、React Compilerが開発者が明示的にメモ化を適用する（私たちの場合）8%だけでなく、すべてのコードがデフォルトでメモ化されることを保証することです。
安定版へのロードマップ
これは最終的なロードマップではなく、変更される可能性があります。Reactのルールに従う大多数のアプリとライブラリがコンパイラで正常に動作することが証明された後、Betaリリースに続いてコンパイラのRelease Candidateを近い将来に出荷する予定です。
コミュニティからの最終フィードバック期間の後、コンパイラの安定版リリースを計画しています。安定版リリースはReactの新しい基盤の始まりを示し、すべてのアプリとライブラリでコンパイラとESLintプラグインの使用が強く推奨されます。
- ✅ 実験的: React Conf 2024でリリース、主に早期採用者からのフィードバック用
- ✅ パブリックベータ: 本日利用可能、より広いコミュニティからのフィードバック用
- 🚧 Release Candidate (RC): ルールに従う大多数のアプリとライブラリでReact Compilerが問題なく動作
- 🚧 一般提供: コミュニティからの最終フィードバック期間後
これらのリリースには、コンパイラによって静的解析された診断を表示するコンパイラのESLintプラグインも含まれます。既存のeslint-plugin-react-hooksプラグインとコンパイラのESLintプラグインを統合し、1つのプラグインのみをインストールすれば済むようにする予定です。
安定版後、より多くのコンパイラ最適化と改善を追加する予定です。これには、自動メモ化の継続的改善と、プロダクトコードの変更を最小限またはゼロに抑えた全く新しい最適化の両方が含まれます。
コンパイラの各新リリースへのアップグレードは簡単になることを目指しており、各アップグレードでパフォーマンスが継続的に向上し、多様なJavaScriptとReactパターンのより良い処理が追加されます。
このプロセス全体を通じて、React用のIDE拡張機能のプロトタイプも計画しています。まだ研究の初期段階なので、将来のReact Labsブログ投稿で調査結果をより多く共有できることを期待しています。
この投稿のレビューと編集をしてくれたSathya Gunasekaran、Joe Savona、Ricky Hanlon、Alex Taylor、Jason Bonta、Eli Whiteに感謝します。
脚注
- @nikeee、@henryqdineen、@TrickyPi、その他数名のコンパイラへの貢献に感謝します。
- MetaでのReact Compilerに関するこの研究を主導し、この投稿をレビューしてくれたVaishali Gargに感謝します。
- 著者の在職期間、差分の長さ/複雑さ、その他の潜在的な交絡因子を制御した後。