diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index f5a870b22..033b16b7e 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -1,8 +1,8 @@ --- -title: "React Compiler Beta Release" +title: "React Compiler Beta リリース" author: Lauren Tan date: 2024/10/21 -description: At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. In this post, we want to share what's next for open source, and our progress on the compiler. +description: React Conf 2024 で、React Compiler の実験的リリースを発表しました。これは、ビルド時に自動メモ化を通じて React アプリを最適化するツールです。この投稿では、オープンソースの次のステップとコンパイラの進捗状況を共有したいと思います。 --- @@ -12,115 +12,115 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes). -The React team is excited to share new updates: +React チームより新しいアップデートを共有できることを嬉しく思います。 -1. We're publishing React Compiler Beta today, so that early adopters and library maintainers can try it and provide feedback. -2. We're officially supporting React Compiler for apps on React 17+, through an optional `react-compiler-runtime` package. -3. We're opening up public membership of the [React Compiler Working Group](https://github.com/reactwg/react-compiler) to prepare the community for gradual adoption of the compiler. +1. React Compiler ベータ版を本日公開し、アーリーアダプタやライブラリのメンテナが試用し、フィードバックを行えるようになります。 +2. React 17+ のアプリに対して、オプションの `react-compiler-runtime` パッケージを通じて React Compiler を公式にサポートします。 +3. コンパイラの段階的な採用に備えて、[React Compiler Working Group](https://github.com/reactwg/react-compiler) の公開メンバーシップを開放します。 --- -At [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap), we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. [You can find an introduction to React Compiler here](/learn/react-compiler). +[React Conf 2024](/blog/2024/05/22/react-conf-2024-recap) にて、React Compiler の実験的リリースを発表しました。これは、ビルド時の自動的なメモ化を通じて React アプリを最適化するツールです。[React Compiler の紹介はこちらでご覧いただけます](/learn/react-compiler)。 -Since the first release, we've fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions[^1] to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta. +最初のリリース以来、React コミュニティから報告された多数のバグを修正し、コンパイラに対する貴重なバグ修正や貢献[^1]をいくつか頂き、多様な JavaScript パターンに対してコンパイラをより堅牢にする作業を行い、Meta 社内でコンパイラの展開を続けてきました。 -In this post, we want to share what's next for React Compiler. +この投稿では、React Compiler の次のステップを共有したいと思います。 -## Try React Compiler Beta today {/*try-react-compiler-beta-today*/} +## React Compiler Beta をすぐに試す {/*try-react-compiler-beta-today*/} -At [React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg), we shared an update on React Compiler. Today, we are excited to announce a new Beta release of React Compiler and ESLint plugin. New betas are published to npm using the `@beta` tag. +[React India 2024](https://www.youtube.com/watch?v=qd5yk2gxbtg) で、React Compiler のアップデートを共有しました。本日、React Compiler と ESLint プラグインの新しいベータ版のリリースを発表できることを嬉しく思います。新しいベータ版は `@beta` タグ付きで npm に公開されています。 -To install React Compiler Beta: +React Compiler ベータ版をインストールするには以下のようにします。 npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -Or, if you're using Yarn: +または、Yarn を使用している場合は以下のようにします。 yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta -You can watch [Sathya Gunasekaran's](https://twitter.com/_gsathya) talk at React India here: +[Sathya Gunasekaran](https://twitter.com/_gsathya) による React India での講演はこちらでご覧いただけます。 -## We recommend everyone use the React Compiler linter today {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} +## React Compiler リンタを今日から使い始める {/*we-recommend-everyone-use-the-react-compiler-linter-today*/} -React Compiler’s ESLint plugin helps developers proactively identify and correct [Rules of React](/reference/rules) violations. **We strongly recommend everyone use the linter today**. The linter does not require that you have the compiler installed, so you can use it independently, even if you are not ready to try out the compiler. +React Compiler の ESLint プラグインは、開発者が [React のルール](/reference/rules) に対する違反を事前に特定して修正するのに役立ちます。**リンタを今日から使い始めることを強くお勧めします**。リンタはコンパイラのインストールを必要としないため、コンパイラを試す準備ができていなくても独立して使用できます。 -To install the linter only: +リンタのみをインストールするには以下のようにします。 npm install -D eslint-plugin-react-compiler@beta -Or, if you're using Yarn: +または、Yarn を使用している場合は以下のようにします。 yarn add -D eslint-plugin-react-compiler@beta -After installation you can enable the linter by [adding it to your ESLint config](/learn/react-compiler#installing-eslint-plugin-react-compiler). Using the linter helps identify Rules of React breakages, making it easier to adopt the compiler when it's fully released. +インストール後、[ESLint の設定ファイルに記載を追加することでリンタを有効にできます](/learn/react-compiler#installing-eslint-plugin-react-compiler)。リンタを使用することで、React のルールに対する違反を特定でき、コンパイラが完全にリリースされる際の導入が容易になります。 -## Backwards Compatibility {/*backwards-compatibility*/} +## 後方互換性 {/*backwards-compatibility*/} -React Compiler produces code that depends on runtime APIs added in React 19, but we've since added support for the compiler to also work with React 17 and 18. If you are not on React 19 yet, in the Beta release you can now try out React Compiler by specifying a minimum `target` in your compiler config, and adding `react-compiler-runtime` as a dependency. [You can find docs on this here](/learn/react-compiler#using-react-compiler-with-react-17-or-18). +React Compiler は React 19 に追加されたランタイム API に依存するコードを生成しますが、React 17 および 18 でもコンパイラが動作するようにサポートを追加しました。ベータ版では、まだ React 19 に移行していない場合でも、コンパイラ設定で小さな `target` を指定し、`react-compiler-runtime` を依存ライブラリとして追加することで、React Compiler を試すことができます。[これに関するドキュメントはこちらでご覧いただけます](/learn/react-compiler#using-react-compiler-with-react-17-or-18)。 -## Using React Compiler in libraries {/*using-react-compiler-in-libraries*/} +## ライブラリでの React Compiler の使用 {/*using-react-compiler-in-libraries*/} -Our initial release was focused on identifying major issues with using the compiler in applications. We've gotten great feedback and have substantially improved the compiler since then. We're now ready for broad feedback from the community, and for library authors to try out the compiler to improve performance and the developer experience of maintaining your library. +初期のリリースでは、アプリケーションでコンパイラを使用する際の主要な問題を特定することに焦点を当てていました。その後素晴らしいフィードバックをいただき、コンパイラを大幅に改善してきました。コミュニティからの幅広いフィードバックを受ける準備が整い、ライブラリの作者がコンパイラを試用し、ライブラリのパフォーマンスと開発者体験を向上させることができるようになりました。 -React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm. +React Compiler はライブラリのコンパイルにも使用できます。React Compiler はコード変換前のオリジナルのソースコードで動作する必要があるため、アプリケーションのビルドパイプライン中で、アプリが使用するライブラリをコンパイルすることは不可能です。そのため、ライブラリのメンテナが個別にライブラリをコンパイルし、テストし、コンパイル済みのコードを npm で配布することをお勧めします。 -Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum `target` and add `react-compiler-runtime` as a direct dependency. The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary. +ライブラリのコードが事前にコンパイルされていれば、ライブラリのユーザはコンパイラを有効にしなくても、ライブラリに適用された自動メモ化の恩恵を受けることができます。ライブラリがまだ React 19 に移行していないアプリを対象としている場合、最小の `target` を指定し、`react-compiler-runtime` を dependency として直接追加してください。ランタイムパッケージはアプリケーションのバージョンに応じて正しい API の実装を使用し、必要に応じて欠けている API をポリフィルします。 -[You can find more docs on this here.](/learn/react-compiler#using-the-compiler-on-libraries) +[これに関するドキュメントはこちら](/learn/react-compiler#using-the-compiler-on-libraries)。 -## Opening up React Compiler Working Group to everyone {/*opening-up-react-compiler-working-group-to-everyone*/} +## React Compiler Working Group を全員に開放 {/*opening-up-react-compiler-working-group-to-everyone*/} -We previously announced the invite-only [React Compiler Working Group](https://github.com/reactwg/react-compiler) at React Conf to provide feedback, ask questions, and collaborate on the compiler's experimental release. +以前 React Conf にて、招待制の [React Compiler Working Group](https://github.com/reactwg/react-compiler) を発表し、コンパイラの実験的リリースに対するフィードバックを提供し、質問をし、貢献を行える場として利用してきました。 -From today, together with the Beta release of React Compiler, we are opening up Working Group membership to everyone. The goal of the React Compiler Working Group is to prepare the ecosystem for a smooth, gradual adoption of React Compiler by existing applications and libraries. Please continue to file bug reports in the [React repo](https://github.com/facebook/react), but please leave feedback, ask questions, or share ideas in the [Working Group discussion forum](https://github.com/reactwg/react-compiler/discussions). +本日より、React Compiler Beta のリリースに合わせ、Working Group のメンバーシップを全員に開放します。React Compiler Working Group の目標は、エコシステム全体で、既存のアプリケーションやライブラリによる React Compiler のスムーズかつ段階的な採用準備を整えることです。今後もバグ報告は [React リポジトリ](https://github.com/facebook/react)に行っていただく一方で、フィードバックや質問、アイディアの共有は、[Working Group のディスカッションフォーラム](https://github.com/reactwg/react-compiler/discussions)を利用してください。 -The core team will also use the discussions repo to share our research findings. As the Stable Release gets closer, any important information will also be posted on this forum. +コアチームも研究結果を共有にディスカッションリポジトリを使用します。安定版リリースが近づくにつれ、重要な情報もこのフォーラムに投稿されます。 -## React Compiler at Meta {/*react-compiler-at-meta*/} +## Meta における React Compiler の利用 {/*react-compiler-at-meta*/} -At [React Conf](/blog/2024/05/22/react-conf-2024-recap), we shared that our rollout of the compiler on Quest Store and Instagram were successful. Since then, we've deployed React Compiler across several more major web apps at Meta, including [Facebook](https://www.facebook.com) and [Threads](https://www.threads.net). That means if you've used any of these apps recently, you may have had your experience powered by the compiler. We were able to onboard these apps onto the compiler with few code changes required, in a monorepo with more than 100,000 React components. +[React Conf](/blog/2024/05/22/react-conf-2024-recap) では、Quest Store と Instagram におけるコンパイラの本番投入が成功したことを発表しました。それ以来、[Facebook](https://www.facebook.com) や [Threads](https://www.threads.net) を含む Meta 社の複数の主要ウェブアプリにおいて、React Compiler の展開を行ってきました。つまり最近これらのアプリを使用していたなら、その体験をコンパイラが支えていたということです。これらのアプリをコンパイラに乗せるために必要なコード変更はほとんどなく、10 万以上の React コンポーネントを含むモノレポで移行に成功しました。 -We've seen notable performance improvements across all of these apps. As we've rolled out, we're continuing to see results on the order of [the wins we shared previously at ReactConf](https://youtu.be/lyEKhv8-3n0?t=3223). These apps have already been heavily hand tuned and optimized by Meta engineers and React experts over the years, so even improvements on the order of a few percent are a huge win for us. +これらのアプリ全体で、顕著なパフォーマンス向上が見られました。展開を進める中で、[以前 React Conf で発表したもの](https://youtu.be/lyEKhv8-3n0?t=3223)と同程度の成果が、引き続き確認されています。これらのアプリは長らく Meta のエンジニアや React の専門家により手作業で調整され最適化されてきたものですから、数パーセントの改善でも大きな成果と言えるでしょう。 -We also expected developer productivity wins from React Compiler. To measure this, we collaborated with our data science partners at Meta[^2] to conduct a thorough statistical analysis of the impact of manual memoization on productivity. Before rolling out the compiler at Meta, we discovered that only about 8% of React pull requests used manual memoization and that these pull requests took 31-46% longer to author[^3]. This confirmed our intuition that manual memoization introduces cognitive overhead, and we anticipate that React Compiler will lead to more efficient code authoring and review. Notably, React Compiler also ensures that *all* code is memoized by default, not just the (in our case) 8% where developers explicitly apply memoization. +また、React Compiler による開発者の生産性向上も期待される効果でした。これを測定するために、Meta のデータサイエンスパートナー[^2]と協力して、手動メモ化が生産性に与える影響について広範な統計分析を行いました。Meta でコンパイラを投入する以前は、React に関するプルリクエストの約 8% でしか手動メモ化が利用されておらず、そのようなプルリクエストは作成に 31-46% 長くかかっていました[^3]。この結果は、手動メモ化が認知的負担を引き起こすという我々の直感に合致するものであり、React Compiler により効率的なコード作成とレビューが実現できる可能性を示唆するものです。特に、React Compiler は、開発者が明示的にメモ化を適用してくれる一部の（私たちの場合 8%）コードだけではなく、すべてのコードがデフォルトでメモ化されることを保証してくれるのです。 -## Roadmap to Stable {/*roadmap-to-stable*/} +## 安定版に向けてのロードマップ {/*roadmap-to-stable*/} -*This is not a final roadmap, and is subject to change.* +*これは最終的なロードマップではなく、変更される可能性があります*。 -We intend to ship a Release Candidate of the compiler in the near future following the Beta release, when the majority of apps and libraries that follow the Rules of React have been proven to work well with the compiler. After a period of final feedback from the community, we plan on a Stable Release for the compiler. The Stable Release will mark the beginning of a new foundation for React, and all apps and libraries will be strongly recommended to use the compiler and ESLint plugin. +ベータ版リリースに続いて、React のルールに従うアプリやライブラリの大部分がコンパイラで問題なく動作することが証明された後で、近い将来にコンパイラのリリース候補をリリースする予定です。その後コミュニティからの最終的なフィードバックを受け付ける期間を経て、コンパイラの安定版リリースを予定しています。安定版リリースは React の新しい基盤の始まりとなるものであり、すべてのアプリとライブラリに対し、コンパイラと ESLint プラグインの使用が強く推奨されるようになります。 -* ✅ Experimental: Released at React Conf 2024, primarily for feedback from early adopters. -* ✅ Public Beta: Available today, for feedback from the wider community. -* 🚧 Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue. -* 🚧 General Availability: After final feedback period from the community. +* ✅ Experimental：React Conf 2024 でリリース。主にアーリーアダプタからのフィードバックを得るため。 +* ✅ Public Beta：本日リリース。より広いコミュニティからのフィードバックを得るため。 +* 🚧 リリース候補 (RC)：ルールに従うアプリやライブラリの大部分で React Compiler 問題なく動作するようになったら。 +* 🚧 一般提供：コミュニティからの最終的なフィードバック期間の後。 -These releases also include the compiler's ESLint plugin, which surfaces diagnostics statically analyzed by the compiler. We plan to combine the existing eslint-plugin-react-hooks plugin with the compiler's ESLint plugin, so only one plugin needs to be installed. +これらのリリースには、コンパイラ用の ESLint プラグインも含まれており、コンパイラによって静的に分析された診断結果を表示できます。既存の eslint-plugin-react-hooks プラグインをコンパイラ用の ESLint プラグインと統合し、1 つのプラグインだけをインストールすればよくなるよう計画しています。 -Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Upgrading to each new release of the compiler is aimed to be straightforward, and each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. +安定版リリース後には、コンパイラによる最適化と改善をさらに追加する予定です。これには、自動的なメモ化の継続的な改善と、全く新しい最適化の両方が含まれ、製品コードの変更は最小限または不要になる予定です。コンパイラの新しいリリースへのアップグレードは簡単に行えることを目指しています。各アップグレードはパフォーマンスを向上させ、多様な JavaScript と React パターンに対し、より良い処理が行えるようになります。 -Throughout this process, we also plan to prototype an IDE extension for React. It is still very early in research, so we expect to be able to share more of our findings with you in a future React Labs blog post. +このプロセス全体を通じて、React 用の IDE 拡張機能のプロトタイプを作成する計画もあります。まだ研究の初期段階なので、将来の React Labs ブログ投稿で、より多くの知見を共有できることを期待しています。 --- -Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Alex Taylor](https://github.com/alexmckenley), [Jason Bonta](https://twitter.com/someextent), and [Eli White](https://twitter.com/Eli_White) for reviewing and editing this post. +この投稿のレビュー・編集に協力していただいた [Sathya Gunasekaran](https://twitter.com/_gsathya)、[Joe Savona](https://twitter.com/en_JS)、[Ricky Hanlon](https://twitter.com/rickhanlonii)、[Alex Taylor](https://github.com/alexmckenley)、[Jason Bonta](https://twitter.com/someextent)、[Eli White](https://twitter.com/Eli_White) に感謝します。 --- -[^1]: Thanks [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee), [@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen), [@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi), and several others for their contributions to the compiler. +[^1]: コンパイラの貢献に協力いただいた [@nikeee](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Anikeee)、[@henryqdineen](https://github.com/facebook/react/pulls?q=is%3Apr+author%3Ahenryqdineen)、[@TrickyPi](https://github.com/facebook/react/pulls?q=is%3Apr+author%3ATrickyPi) に感謝します。 -[^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. +[^2]: Meta での React コンパイラに関する本研究を主導し、この投稿をレビューしていただいた [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) に感謝します。 -[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. \ No newline at end of file +[^3]: 作者の在職期間、差分の長さ・複雑さなど、潜在的な交絡因子を調整済み。 \ No newline at end of file diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 4bd48a44b..f4b1523da 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -14,17 +14,13 @@ React チームからの公式な更新のお知らせはこのブログに掲
-<<<<<<< HEAD - -======= - + -We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ... +以前 React Conf 2024 で React Compiler の実験的リリースを行いました。それ以降も多くの進展がありましたので、この投稿では React Compiler の次の展開についてお伝えしたいと思います。 - ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 + 先週、ネバダ州ヘンダーソンで 700 人以上の参加者が集まり、最新の UI エンジニアリングについて議論する 2 日間のカンファレンス、React Conf 2024 を開催しました。対面でのカンファレンスは 2019 年以来であり、コミュニティが再び一堂に会することができたことを大変に嬉しく思いました。 diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index f12dd4aa3..89ea9c3d8 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -12,20 +12,15 @@ "skipBreadcrumb": true, "routes": [ { -<<<<<<< HEAD - "title": "React Conf 2024 振り返り", - "titleForHomepage": "React Conf 2024 振り返り", -======= - "title": "React Compiler Beta Release and Roadmap", - "titleForHomepage": "React Compiler Beta Release and Roadmap", + "title": "React Compiler Beta リリースとロードマップ", + "titleForHomepage": "React Compiler Beta リリースとロードマップ", "icon": "blog", "date": "October 21, 2024", "path": "/blog/2024/10/21/react-compiler-beta-release" }, { - "title": "React Conf 2024 Recap", - "titleForHomepage": "React Conf 2024 Recap", ->>>>>>> eb174dd932613fb0784a78ee2d9360554538cc08 + "title": "React Conf 2024 振り返り", + "titleForHomepage": "React Conf 2024 振り返り", "icon": "blog", "date": "May 22, 2024", "path": "/blog/2024/05/22/react-conf-2024-recap"