ブログ

Reactコンパイラー ベータ版リリース

2024年10月21日 Lauren Tan著

Reactチームから、新しいアップデートをお知らせします。

  1. 本日、Reactコンパイラー ベータ版を公開し、早期導入者やライブラリメンテナーが試してフィードバックを提供できるようにしました。
  2. オプションのreact-compiler-runtimeパッケージを通じて、React 17+上のアプリに対してReactコンパイラーを公式にサポートします。
  3. コンパイラーの段階的な採用に向けてコミュニティを準備するために、Reactコンパイラーワーキンググループの公開メンバーシップを開始します。

React Conf 2024では、自動メモ化を通じてReactアプリを最適化するビルド時ツールであるReactコンパイラーの実験的リリースを発表しました。Reactコンパイラーの概要はこちらをご覧ください。

最初のリリース以降、Reactコミュニティから報告された多数のバグを修正し、コンパイラーへのいくつかの高品質なバグ修正と貢献1を受け、JavaScriptパターンの幅広い多様性に対してコンパイラーの耐性を高め、Metaでコンパイラーをより広く展開し続けています。

この投稿では、Reactコンパイラーの今後の展開について共有したいと思います。

Reactコンパイラー ベータ版を今すぐ試す

React India 2024で、Reactコンパイラーの最新情報をお伝えしました。本日、ReactコンパイラーとESLintプラグインの新しいベータ版をリリースすることをお知らせします。新しいベータ版は、@betaタグを使用してnpmに公開されています。

Reactコンパイラー ベータ版をインストールするには

ターミナル
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コンパイラーのリンターを使用することをお勧めします

ReactコンパイラーのESLintプラグインは、開発者がReactのルール違反を事前に特定して修正するのに役立ちます。今日は、誰もがリンターを使用することを強くお勧めします。リンターは、コンパイラーがインストールされている必要はないため、コンパイラーを試す準備ができていない場合でも、個別に使用できます。

リンターのみをインストールするには

ターミナル
npm install -D eslint-plugin-react-compiler@beta

または、Yarnを使用している場合は

ターミナル
yarn add -D eslint-plugin-react-compiler@beta

インストール後、ESLint設定に追加することでリンターを有効にできます。リンターを使用すると、Reactのルールの破損を特定できるため、完全にリリースされたときにコンパイラーを簡単に採用できます。

後方互換性

Reactコンパイラーは、React 19で追加されたランタイムAPIに依存するコードを生成しますが、コンパイラーがReact 17と18でも動作するようにサポートを追加しました。まだReact 19を使用していない場合は、ベータ版では、コンパイラー設定で最小のtargetを指定し、react-compiler-runtimeを依存関係として追加することで、Reactコンパイラーを試すことができます。詳細については、こちらをご覧ください。

ライブラリでのReactコンパイラーの使用

最初のリリースでは、アプリケーションでのコンパイラーの使用に関する主要な問題の特定に重点を置いていました。素晴らしいフィードバックが得られ、それ以降、コンパイラーが大幅に改善されました。現在、コミュニティからの幅広いフィードバックや、ライブラリの作者がコンパイラーを試してパフォーマンスを向上させ、ライブラリを維持する開発者エクスペリエンスを向上させる準備ができています。

React Compiler はライブラリのコンパイルにも使用できます。React Compiler は、コード変換前の元のソースコード上で実行する必要があるため、アプリケーションのビルドパイプラインで、使用するライブラリをコンパイルすることはできません。したがって、ライブラリのメンテナーが個別にコンパイラでライブラリをコンパイルおよびテストし、コンパイル済みのコードを npm に公開することをお勧めします。

コードがプリコンパイルされているため、ライブラリのユーザーは、ライブラリに適用された自動メモ化の恩恵を受けるためにコンパイラを有効にする必要はありません。ライブラリがまだ React 19 を使用していないアプリをターゲットとする場合は、最小限の target を指定し、react-compiler-runtime を直接の依存関係として追加してください。ランタイムパッケージは、アプリケーションのバージョンに応じて API の正しい実装を使用し、必要に応じて不足している API をポリフィルします。

詳細については、こちらをご覧ください。

React Compiler ワーキンググループをすべての人に公開

以前、React Conf で、フィードバックを提供したり、質問をしたり、コンパイラの実験的リリースについて共同作業を行うために、招待制の React Compiler ワーキンググループを発表しました。

本日より、React Compiler のベータリリースとともに、ワーキンググループのメンバーシップをすべての人に開放します。React Compiler ワーキンググループの目標は、既存のアプリケーションとライブラリによる React Compiler のスムーズで段階的な導入に向けてエコシステムを準備することです。引き続き React リポジトリにバグレポートを提出してください。フィードバック、質問、またはアイデアの共有は、ワーキンググループのディスカッションフォーラムで行ってください。

コアチームも、ディスカッションリポジトリを使用して調査結果を共有します。安定版リリースが近づくにつれて、重要な情報はすべてこのフォーラムに投稿されます。

Meta における React Compiler

React Conf で、Quest Store と Instagram へのコンパイラの展開が成功したことを共有しました。それ以来、Meta のいくつかの主要な Web アプリ ( Facebook や Threads など) に React Compiler を展開しました。つまり、最近これらのアプリのいずれかを使用したことがある場合は、コンパイラによってエクスペリエンスが強化されている可能性があります。100,000 を超える React コンポーネントを含むモノレポで、これらのアプリをほとんどコードを変更せずにコンパイラに組み込むことができました。

これらのアプリすべてで、顕著なパフォーマンスの向上が見られました。展開を進めるにつれて、以前 ReactConf で共有した成果と同等の結果を引き続き確認しています。これらのアプリは、長年にわたって Meta のエンジニアと React の専門家によって徹底的に手動で調整および最適化されてきたため、数パーセント程度の改善でも、私たちにとっては大きな成果です。

また、React Compiler から開発者の生産性の向上も期待していました。これを測定するために、Meta のデータサイエンスパートナーと協力2して、手動によるメモ化が生産性に与える影響について、徹底的な統計分析を実施しました。Meta でコンパイラを展開する前に、React プルリクエストの約 8% のみが手動によるメモ化を使用しており、これらのプルリクエストの作成に 31 ～ 46% 長い時間がかかっている3ことがわかりました。これにより、手動によるメモ化が認知的なオーバーヘッドをもたらすという直感が確認されました。React Compiler により、より効率的なコードの作成とレビューにつながると予想されます。特に、React Compiler は、開発者が明示的にメモ化を適用した (この場合) 8% のコードだけでなく、すべてのコードがデフォルトでメモ化されることを保証します。

安定版へのロードマップ

これは最終的なロードマップではなく、変更される可能性があります。

React のルールに従うほとんどのアプリとライブラリがコンパイラでうまく動作することが証明されたら、ベータリリース後、近い将来にコンパイラのリリース候補をリリースする予定です。コミュニティからの最終的なフィードバック期間の後、コンパイラの安定版リリースを計画しています。安定版リリースは、React の新しい基盤の始まりとなり、すべてのアプリとライブラリでコンパイラと ESLint プラグインを使用することが強く推奨されます。

  • ✅ 実験的: React Conf 2024 でリリース。主に早期導入者からのフィードバックを目的。
  • ✅ パブリックベータ: 本日より利用可能。より幅広いコミュニティからのフィードバックを目的。
  • 🚧 リリース候補 (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 に感謝します。

脚注

  1. コンパイラへの貢献に感謝します @nikeee, @henryqdineen, @TrickyPi, そしてその他多数の方々へ。↩

  2. この投稿をレビューし、MetaでのReact Compilerに関するこの調査を主導してくれたVaishali Gargに感謝します。↩

  3. 著者の在籍期間、差分の長さ/複雑さ、およびその他の潜在的な交絡因子をコントロールした後。↩

前ブログ
次React Conf 2024のまとめ