-
Notifications
You must be signed in to change notification settings - Fork 183
Translate "React Compiler RC" blog post #841
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
smikitky
wants to merge
1
commit into
main
Choose a base branch
from
tr/compiler-rc
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ | |
title: "React Compiler RC" | ||
author: Lauren Tan and Mofei Zhang | ||
date: 2025/04/21 | ||
description: We are releasing the compiler's first Release Candidate (RC) today. | ||
description: 本日、コンパイラの最初のリリース候補 (RC) を公開します。 | ||
|
||
--- | ||
|
||
|
@@ -12,22 +12,22 @@ April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https: | |
|
||
<Intro> | ||
|
||
The React team is excited to share new updates: | ||
React チームより新しいお知らせがあります。 | ||
|
||
</Intro> | ||
|
||
1. We're publishing React Compiler RC today, in preparation of the compiler's stable release. | ||
2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`. | ||
3. We've added support for swc and are working with oxc to support Babel-free builds. | ||
1. 安定版リリースに向け、本日 React Compiler RC を公開します。 | ||
2. `eslint-plugin-react-compiler` を `eslint-plugin-react-hooks` に統合します。 | ||
3. Babel を使わずビルドできるよう swc のサポートを追加しました。oxc とも協力して作業中です。 | ||
|
||
--- | ||
|
||
[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release. | ||
[React Compiler](https://react.dev/learn/react-compiler) は、ビルド時の自動メモ化によって React アプリを最適化するツールです。昨年、React Compiler の[最初のベータ版](https://react.dev/blog/2024/10/21/react-compiler-beta-release)を公開し、多くの素晴らしいフィードバックと貢献を受けることができました。コンパイラを採用した人々からの成功事例([Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) や [Wakelet](https://github.com/reactwg/react-compiler/discussions/52) のケーススタディを参照)を嬉しく思っており、安定版リリースに向けて作業を進めています。 | ||
|
||
We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production. | ||
本日、コンパイラの最初のリリース候補 (RC) を公開します。RC はコンパイラの安定したほぼ最終版となるものであり、本番環境で安全に試用することが可能です。 | ||
|
||
## Use React Compiler RC today {/*use-react-compiler-rc-today*/} | ||
To install the RC: | ||
## React Compiler RC を今日から使い始める {/*use-react-compiler-rc-today*/} | ||
RC をインストールするには以下のようにします。 | ||
|
||
npm | ||
<TerminalBlock> | ||
|
@@ -44,22 +44,22 @@ yarn | |
{`yarn add --dev --exact babel-plugin-react-compiler@rc`} | ||
</TerminalBlock> | ||
|
||
As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs. | ||
RC の一環として、React Compiler をプロジェクトに追加しやすくする作業を行い、またコンパイラがメモ化を行う際の最適化を加えました。React Compiler は、オプショナルチェーン式とインデックス付きの配列を依存値としてサポートするようになりました。さらに、等価性チェックや文字列補間 (string interpolation) など、さらに多様な依存値を推測する方法を模索しています。これらの改善により、再レンダーが減少し、より応答性の高い UI が実現します。 | ||
|
||
We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release. | ||
また、コミュニティから、レンダー中の ref バリデーションが時々誤作動を起こすという声を聞いています。一般的な方針として、コンパイラのエラーメッセージやヒントは完全に信頼できるようにしたいと考えているため、現時点ではデフォルトでオフにしています。このバリデーション周りの改善を続け、次回以降のリリースで再度有効にする予定です。 | ||
|
||
You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler). | ||
コンパイラの利用法に関する詳細は[ドキュメント](https://react.dev/learn/react-compiler)で確認できます。 | ||
|
||
## Feedback {/*feedback*/} | ||
During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions). | ||
## フィードバック {/*feedback*/} | ||
RC 期間中、すべての React ユーザにコンパイラを試していただき、フィードバックを React リポジトリに寄せていただくことをお願いします。バグや予期しない動作に遭遇した場合は、[issue をオープンして](https://github.com/facebook/react/issues)ください。一般的な質問や提案がある場合は、[React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions) に投稿してください。 | ||
|
||
## Backwards Compatibility {/*backwards-compatibility*/} | ||
As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use 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](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). | ||
## 後方互換性 {/*backwards-compatibility*/} | ||
ベータ版の発表でお知らせしたように、React Compiler は React 17 以降と互換性があります。まだ React 19 を使用していない場合は、コンパイラ設定で最小ターゲットを指定し、`react-compiler-runtime` を依存ライブラリとして追加することで React Compiler を使用できます。詳細は[こちら](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18)で確認できます。 | ||
|
||
## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} | ||
If you have already installed eslint-plugin-react-compiler, you can now remove it and use `[email protected]`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! | ||
## eslint-plugin-react-compiler から eslint-plugin-react-hooks への移行 {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} | ||
すでに eslint-plugin-react-compiler をインストールしている場合は、これを削除し、`[email protected]` を使用してください。この改善に貢献していただいた [@michaelfaith](https://bsky.app/profile/michael.faith) に感謝します! | ||
|
||
To install: | ||
インストールは以下のように行います。 | ||
|
||
npm | ||
<TerminalBlock> | ||
|
@@ -89,40 +89,40 @@ export default [ | |
]; | ||
``` | ||
|
||
To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration. | ||
React Compiler のルールを有効にするには、ESLint 設定に `'react-hooks/react-compiler': 'error'` を追加してください。 | ||
|
||
The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today. | ||
リンタはコンパイラをインストールせずとも動作しますので、eslint-plugin-react-hooks をアップグレードすることによるリスクはありません。すべての方に今すぐアップグレードをお勧めします。 | ||
|
||
## swc support (experimental) {/*swc-support-experimental*/} | ||
React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild. | ||
## swc サポート (実験的) {/*swc-support-experimental*/} | ||
React Compiler は、Babel、Vite、Rsbuild など[いくつかのビルドツール](/learn/react-compiler#installation)でインストールできます。 | ||
|
||
In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler). | ||
これらのツールに加えて、[swc](https://swc.rs/) チームの Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) と協力して、React Compiler を swc プラグインとして追加サポートする作業を進めています。この作業はまだ完了していませんが、[Next.js アプリで React Compiler を有効にする](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler)と、Next.js のビルドパフォーマンスはかなり向上しているはずです。 | ||
|
||
We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance. | ||
最良のビルドパフォーマンスを得るために、Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) 以降を使用することをお勧めします。 | ||
|
||
Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate. | ||
Vite ユーザは、[vite-plugin-react](https://github.com/vitejs/vite-plugin-react) の利用を継続しつつ、コンパイラを [Babel プラグイン](https://react.dev/learn/react-compiler#usage-with-vite)として有効化してください。現在 [oxc](https://oxc.rs/) チームとも協力して[コンパイラのサポート](https://github.com/oxc-project/oxc/issues/10048)の追加作業を行っています。[rolldown](https://github.com/rolldown/rolldown) が正式にリリースされて Vite でサポートされるようになり、かつ oxc が React Compiler をサポートするようになった時点で、ドキュメントを更新して移行方法に関する情報をお知らせします。 | ||
|
||
## Upgrading React Compiler {/*upgrading-react-compiler*/} | ||
React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise. | ||
## React Compiler のアップグレード {/*upgrading-react-compiler*/} | ||
React Compiler が最も効果的に動作するのは、自動メモ化が厳密にパフォーマンス目的だけに使われる場合です。コンパイラの将来のバージョンではメモ化の適用方法が変化して、例えばより細かく正確なメモ化を行うようになるかもしれません。 | ||
|
||
However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing. | ||
しかし、製品コードはしばしば [React のルール](https://react.dev/reference/rules)に違反していることがありますし、JavaScript ではそれらを常に静的に検出できるわけではないため、メモ化の挙動が変わることで予期しない結果を招くことがあります。たとえば、メモ化済みの値が、コンポーネントツリーのどこかで useEffect の依存値として使用されることがあります。この値のメモ化の有無や挙動が変わることにより、対応する useEffect の発火が過剰あるいは過少になる可能性があるのです。[useEffect は同期のためだけに使用する](https://react.dev/learn/synchronizing-with-effects)ことを推奨していますが、特定の値の変更にのみ反応する必要があるエフェクトなど、他のユースケースのための useEffect がコードベースには含まれているかもしれません。 | ||
|
||
In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues. | ||
言い換えれば、メモ化の挙動が変われば、まれな状況においては予期しない動作を引き起こす可能性があるということです。このため、React のルールに従い、アプリのエンドツーエンドテストを継続的に行うことをお勧めします。これにより、コンパイラを自信を持ってアップグレードし、問題を引き起こす可能性のある React のルール違反を特定できます。 | ||
|
||
If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected. | ||
十分なテストカバレッジがない場合は、コンパイラを特定のバージョン(例:`19.1.0`)に固定し、SemVer の範囲指定(例:`^19.1.0`)を用いないことをお勧めします。これを行うには、コンパイラをアップグレードする際に `--save-exact` (npm/pnpm) または `--exact` フラグ (yarn) を渡します。その後のコンパイラのアップグレードは、アプリが期待通りに動作することを確認しながら、手動で行うようにしてください。 | ||
|
||
## Roadmap to Stable {/*roadmap-to-stable*/} | ||
*This is not a final roadmap, and is subject to change.* | ||
## 安定版へのロードマップ {/*roadmap-to-stable*/} | ||
*これは最終的なロードマップではなく、変更される可能性があります。* | ||
|
||
After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler. | ||
RC に対するコミュニティからの最終的なフィードバック期間の後、コンパイラの安定版リリースを計画しています。 | ||
|
||
* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers. | ||
* ✅ Public Beta: Available today, for feedback from library authors. | ||
* ✅ 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. | ||
* ✅ 実験的バージョン:React Conf 2024 でリリース済み。主にアプリケーション開発者からのフィードバックを得るため。 | ||
* ✅ 公開ベータ:リリース済み。ライブラリ作成者からのフィードバックを得るため。 | ||
* ✅ リリース候補 (RC):React Compiler がルールに従うアプリやライブラリの大部分で問題なく動作する状態。 | ||
* 一般提供:コミュニティからの最終的なフィードバック期間の後。 | ||
|
||
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. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns. | ||
安定版リリース後も、さらなるコンパイラの最適化と改善を追加する予定です。これには、自動メモ化の継続的な改善と、全く新しいタイプの最適化の両方が含まれますが、製品コードの変更は最小限または不要となる予定です。各アップグレードにおいて、継続してパフォーマンスの向上を行い、多様な JavaScript および React パターンに対する処理を改善していきます。 | ||
|
||
--- | ||
|
||
Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post. | ||
この投稿をレビューおよび編集していただいた [Joe Savona](https://x.com/en_JS)、[Jason Bonta](https://x.com/someextent)、[Jimmy Lai](https://x.com/feedthejim)、および [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) に感謝します。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ref-in-render validation
が何のことなのか分からず訳してしまいました…なんとなくif (someFlagRef.current) return <>...</> else return <>...</>
的な、refがレンダー結果に染み出す使い方のことなんだろうとは思っていますが