diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index 1883125a6..80a39914e 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -1,60 +1,60 @@ --- -title: Debugging and Troubleshooting +title: デバッグとトラブルシューティング --- -This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues. +このガイドでは、React Compiler を使用する際に発生する問題を特定し、修正する方法を説明します。コンパイル問題のデバッグ方法と一般的な問題の解決方法を学びましょう。 -* The difference between compiler errors and runtime issues -* Common patterns that break compilation -* Step-by-step debugging workflow +* コンパイラエラーとランタイムエラーの違い +* コンパイルが失敗する一般的なパターン +* デバッグ手順 -## Understanding Compiler Behavior {/*understanding-compiler-behavior*/} +## コンパイラの動作を理解する {/*understanding-compiler-behavior*/} -React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior. +React Compiler は [React のルール](/reference/rules)に従うコードを処理するように設計されています。ルールに違反している可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すのではなく、最適化を安全にスキップします。 -### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/} +### コンパイラエラーとランタイムエラー {/*compiler-errors-vs-runtime-issues*/} -**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail. +**コンパイラエラー** はビルド時に発生し、コードのコンパイルができなくなってしまうものです。コンパイラは問題のあるコードをエラーを発生させずにスキップするように設計されているため、このようなエラーが発生することは稀です。 -**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped. +**ランタイムエラー** は、コンパイル後のコードが想定と異なる動作をした場合に発生します。React Compiler で問題に遭遇した場合、ほとんどの場合はランタイムエラーです。これは通常、コードがコンパイラが検出できない微妙な形で React のルールに違反し、コンパイラがスキップすべきコンポーネントを誤ってコンパイルした場合に発生します。 -When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur. +ランタイムエラーのデバッグにおいては、影響を受けているコンポーネント内にある、ESLint では検出されない React のルール違反の特定に注力してください。コンパイラはコードがこれらのルールに従うことを前提としています。ランタイムエラーが発生するのは、検出できない方法でルール違反が起きている場合なのです。 -## Common Breaking Patterns {/*common-breaking-patterns*/} +## 一般的な違反パターン {/*common-breaking-patterns*/} -One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates. +React Compiler がアプリケーションの不具合を引き起こす代表的なパターンの 1 つは、コードの正しさがメモ化の存在に依存している場合です。つまり、アプリケーションが正常に動作するために、特定の値がメモ化されることに依存している状態です。コンパイラは、あなたの手動のアプローチとは異なる方法でメモ化を行う可能性があるため、エフェクトの過剰な実行や無限ループ、更新の欠落といった予期せぬ動作を引き起こす可能性があります。 -Common scenarios where this occurs: +これが発生する一般的なシナリオは以下のようなものです。 -- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders -- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops -- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization +- **参照同一性に依存したエフェクト** - エフェクトが、複数のレンダー間でオブジェクトや配列が同じ参照を保つことに依存している場合 +- **参照の同一性を仮定した依存配列** - 依存値が不安定で、エフェクトの過剰発火や無限ループを引き起こしている場合 +- **参照同一性のチェックを条件にしたロジック** - キャッシュや最適化のために参照同一性のチェックを行っている場合 -## Debugging Workflow {/*debugging-workflow*/} +## デバッグ手順 {/*debugging-workflow*/} -Follow these steps when you encounter issues: +問題に遭遇した場合は、以下の手順に従ってください。 -### Compiler Build Errors {/*compiler-build-errors*/} +### ビルド時のコンパイラエラー {/*compiler-build-errors*/} -If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with: -- The error message -- The code that caused the error -- Your React and compiler versions +コンパイラエラーでビルドが予期せず失敗した場合、これはコンパイラのバグである可能性が高いです。以下の情報を添えて [facebook/react](https://github.com/facebook/react/issues) リポジトリに報告してください。 +- エラーメッセージ +- エラーを引き起こしたコード +- React とコンパイラのバージョン -### Runtime Issues {/*runtime-issues*/} +### ランタイムエラー {/*runtime-issues*/} -For runtime behavior issues: +ランタイム動作の問題については以下の手順に従ってください。 -### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/} +### 1. コンパイルを一時的に無効化 {/*temporarily-disable-compilation*/} -Use `"use no memo"` to isolate whether an issue is compiler-related: +問題がコンパイラによるものかを切り分けるために `"use no memo"` を使用します。 ```js function ProblematicComponent() { @@ -63,31 +63,31 @@ function ProblematicComponent() { } ``` -If the issue disappears, it's likely related to a Rules of React violation. +これで問題が解決する場合は、React のルール違反が原因である可能性が高いです。 -You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed. +問題のあるコンポーネントから手動のメモ化(useMemo、useCallback、memo)を削除し、メモ化なしでアプリケーションが正しく動作することを確認することもできます。メモ化をすべて外しても不具合が残る場合は、React のルール違反の修正が必要です。 -### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/} +### 2. 段階的な問題の修正 {/*fix-issues-step-by-step*/} -1. Identify the root cause (often memoization-for-correctness) -2. Test after each fix -3. Remove `"use no memo"` once fixed -4. Verify the component shows the ✨ badge in React DevTools +1. 根本原因を特定する(大抵は動作がメモ化の存在に依存していることが原因) +2. 修正のたびにテストを実施する +3. 修正したら `"use no memo"` を削除する +4. React DevTools でコンポーネントに ✨ バッジが表示されることを確認する -## Reporting Compiler Bugs {/*reporting-compiler-bugs*/} +## コンパイラバグの報告 {/*reporting-compiler-bugs*/} -If you believe you've found a compiler bug: +コンパイラバグを発見したと思われる場合は以下のようにしてください。 -1. **Verify it's not a Rules of React violation** - Check with ESLint -2. **Create a minimal reproduction** - Isolate the issue in a small example -3. **Test without the compiler** - Confirm the issue only occurs with compilation -4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**: - - React and compiler versions - - Minimal reproduction code - - Expected vs actual behavior - - Any error messages +1. **React のルール違反ではないことを確認する** - ESLint でチェックする +2. **最小限の再現方法を特定する** - 小さな例で問題を切り分ける +3. **コンパイラを無効化した状態でテストする** - 問題がコンパイル時にのみ発生するかを確認する +4. **[issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml) を提出する**: + - React とコンパイラのバージョン + - 最小限の再現コード + - 期待される動作と実際の動作 + - エラーメッセージ -## Next Steps {/*next-steps*/} +## 次のステップ {/*next-steps*/} -- Review the [Rules of React](/reference/rules) to prevent issues -- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies \ No newline at end of file +- 問題を防ぐために [React のルール](/reference/rules)を確認する +- 段階的な展開戦略については[段階的導入ガイド](/learn/react-compiler/incremental-adoption)を確認する \ No newline at end of file diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md index 56d932034..9d864662a 100644 --- a/src/content/learn/react-compiler/incremental-adoption.md +++ b/src/content/learn/react-compiler/incremental-adoption.md @@ -1,49 +1,49 @@ --- -title: Incremental Adoption +title: 段階的な導入 --- -React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects. +React Compiler は段階的に導入でき、まずコードベースの特定の箇所で試すことができます。このガイドでは、既存のプロジェクトでコンパイラを徐々に展開する方法を説明します。 -* Why incremental adoption is recommended -* Using Babel overrides for directory-based adoption -* Using the "use memo" directive for opt-in compilation -* Using the "use no memo" directive to exclude components -* Runtime feature flags with gating -* Monitoring your adoption progress +* 段階的な導入が推奨される理由 +* ディレクトリ単位で導入するための Babel の overrides の使い方 +* 明示的にコンパイルを有効化する "use memo" ディレクティブの使い方 +* コンポーネントを除外する "use no memo" ディレクティブの使い方 +* ランタイムのゲーティングによる機能フラグの運用 +* 導入状況のモニタリング方法 -## Why Incremental Adoption? {/*why-incremental-adoption*/} +## なぜ段階的な導入が推奨されるのか? {/*why-incremental-adoption*/} -React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest. +React Compiler はコードベース全体を自動的に最適化するように設計されていますが、一度にすべてを導入する必要はありません。段階的な導入により、展開プロセスをコントロールでき、アプリの一部でコンパイラをテストしてから残りの部分に拡大できます。 -Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical. +小さく始めることで、コンパイラの最適化に対する信頼を築けます。コンパイルされたコードでアプリが正しく動作することを確認し、パフォーマンスの改善を測定しつつ、コードベースに特有のエッジケースを特定できます。このアプローチは、安定性が重要な本番アプリケーションで特に価値があります。 -Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs. +段階的な導入により、コンパイラが見つける可能性のある React のルール違反に対処することも容易になります。コードベース全体の違反を一度に修正するのではなく、コンパイラのカバレッジを拡張しながら体系的に対処できます。これにより、移行作業が管理しやすくなり、バグが混入するリスクを減らします。 -By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team. +コードのどの部分がコンパイルされるかをコントロールすることで、コンパイラの最適化の実際の影響を測定する A/B テストを実行することもできます。このデータは、コンパイラを全体へ適用するか否かを意思決定したり、コンパイラの価値をチームに示したりするための情報として役立ちます。 -## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/} +## 段階的な導入のアプローチ {/*approaches-to-incremental-adoption*/} -There are three main approaches to adopt React Compiler incrementally: +React Compiler を段階的に導入する主なアプローチは 3 つあります。 -1. **Babel overrides** - Apply the compiler to specific directories -2. **Opt-in with "use memo"** - Only compile components that explicitly opt in -3. **Runtime gating** - Control compilation with feature flags +1. **Babel overrides** - 特定のディレクトリにコンパイラを適用 +2. **"use memo" によるオプトイン** - 明示的にオプトインしたコンポーネントのみをコンパイル +3. **ランタイムゲーティング** - フィーチャーフラグでコンパイルをコントロール -All approaches allow you to test the compiler on specific parts of your application before full rollout. +どのアプローチを使っても、全体への展開前にアプリケーションの特定の部分のみでコンパイラのテストが可能です。 -## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/} +## Babel Overrides によるディレクトリベースの導入 {/*directory-based-adoption*/} -Babel's `overrides` option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory. +Babel の `overrides` オプションにより、コードベースの異なる部分に異なるプラグインを適用できます。これは、ディレクトリごとに React Compiler を徐々に導入するのに理想的な方法です。 -### Basic Configuration {/*basic-configuration*/} +### 基本的な設定 {/*basic-configuration*/} -Start by applying the compiler to a specific directory: +特定のディレクトリにコンパイラを適用することから始めます。 ```js // babel.config.js @@ -62,9 +62,9 @@ module.exports = { }; ``` -### Expanding Coverage {/*expanding-coverage*/} +### カバレッジの拡張 {/*expanding-coverage*/} -As you gain confidence, add more directories: +自信が出てきたら、より多くのディレクトリを追加します。 ```js // babel.config.js @@ -89,9 +89,9 @@ module.exports = { }; ``` -### With Compiler Options {/*with-compiler-options*/} +### コンパイラオプション {/*with-compiler-options*/} -You can also configure compiler options per override: +オーバーライドごとにコンパイラオプションを設定することもできます。 ```js // babel.config.js @@ -119,15 +119,15 @@ module.exports = { ``` -## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/} +## "use memo" によるオプトインモード {/*opt-in-mode-with-use-memo*/} -For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive. +より厳格な制御を行うため、`compilationMode: 'annotation'` を使用して、`"use memo"` ディレクティブで明示的にオプトインしたコンポーネントとフックのみをコンパイルできます。 -This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories. +このアプローチにより、個々のコンポーネントとフックに対する細かいコントロールが可能になります。ディレクトリ全体に影響を与えることなく、特定のコンポーネントでコンパイラをテストしたい場合に有用です。 -### Annotation Mode Configuration {/*annotation-mode-configuration*/} +### アノテーションモードの設定 {/*annotation-mode-configuration*/} ```js // babel.config.js @@ -140,9 +140,9 @@ module.exports = { }; ``` -### Using the Directive {/*using-the-directive*/} +### ディレクティブの使用 {/*using-the-directive*/} -Add `"use memo"` at the beginning of functions you want to compile: +コンパイルしたい関数の先頭に `"use memo"` を追加します。 ```js function TodoList({ todos }) { @@ -166,22 +166,22 @@ function useSortedData(data) { } ``` -With `compilationMode: 'annotation'`, you must: -- Add `"use memo"` to every component you want optimized -- Add `"use memo"` to every custom hook -- Remember to add it to new components +`compilationMode: 'annotation'` を指定する際は、以下を行う必要があります。 +- 最適化したいすべてのコンポーネントに `"use memo"` を追加 +- すべてのカスタムフックに `"use memo"` を追加 +- 新しいコンポーネントに追加することを忘れない -This gives you precise control over which components are compiled while you evaluate the compiler's impact. +これにより、コンパイラの影響を評価しながら、どのコンポーネントをコンパイルするかを正確にコントロールできます。 -## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/} +## ゲーティング機能によるフィーチャーフラグ制御 {/*runtime-feature-flags-with-gating*/} -The `gating` option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments. +`gating` オプションにより、フィーチャーフラグを使用してランタイムでコンパイルをコントロールできます。これは A/B テストを実行したり、ユーザセグメントに基づいてコンパイラを徐々に展開したりするのに有用です。 -### How Gating Works {/*how-gating-works*/} +### ゲーティングの仕組み {/*how-gating-works*/} -The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs. +コンパイラは最適化されたコードをランタイムチェックでラップします。ゲートが `true` を返す場合、最適化されたバージョンが実行されます。そうでなければ、元のコードが実行されます。 -### Gating Configuration {/*gating-configuration*/} +### ゲーティングの設定 {/*gating-configuration*/} ```js // babel.config.js @@ -197,9 +197,9 @@ module.exports = { }; ``` -### Implementing the Feature Flag {/*implementing-the-feature-flag*/} +### フィーチャーフラグの実装 {/*implementing-the-feature-flag*/} -Create a module that exports your gating function: +ゲーティング関数をエクスポートするモジュールを作成します。 ```js // ReactCompilerFeatureFlags.js @@ -209,17 +209,17 @@ export function isCompilerEnabled() { } ``` -## Troubleshooting Adoption {/*troubleshooting-adoption*/} +## 導入時のトラブルシューティング {/*troubleshooting-adoption*/} -If you encounter issues during adoption: +導入中に問題が発生した場合は、以下のようにしてください。 -1. Use `"use no memo"` to temporarily exclude problematic components -2. Check the [debugging guide](/learn/react-compiler/debugging) for common issues -3. Fix Rules of React violations identified by the ESLint plugin -4. Consider using `compilationMode: 'annotation'` for more gradual adoption +1. `"use no memo"` を使用して問題のあるコンポーネントを一時的に除外 +2. 一般的な問題については[デバッグガイド](/learn/react-compiler/debugging)を確認 +3. ESLint プラグインによって特定された React のルール違反を修正 +4. より段階的な導入のために `compilationMode: 'annotation'` の使用を検討 -## Next Steps {/*next-steps*/} +## 次のステップ {/*next-steps*/} -- Read the [configuration guide](/reference/react-compiler/configuration) for more options -- Learn about [debugging techniques](/learn/react-compiler/debugging) -- Check the [API reference](/reference/react-compiler/configuration) for all compiler options \ No newline at end of file +- さまざまなオプションについて[設定ガイド](/reference/react-compiler/configuration)を確認する +- [デバッグテクニック](/learn/react-compiler/debugging)について学ぶ +- すべてのコンパイラオプションについては [API リファレンス](/reference/react-compiler/configuration)を確認する \ No newline at end of file diff --git a/src/content/learn/react-compiler/index.md b/src/content/learn/react-compiler/index.md index 480187ed5..c94835e3c 100644 --- a/src/content/learn/react-compiler/index.md +++ b/src/content/learn/react-compiler/index.md @@ -2,32 +2,32 @@ title: React Compiler --- -## Introduction {/*introduction*/} +## はじめに {/*introduction*/} -Learn [what React Compiler does](/learn/react-compiler/introduction) and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`. +[React Compiler の機能](/learn/react-compiler/introduction)について知り、React アプリケーションを自動的に最適化して `useMemo`、`useCallback`、`React.memo` による手動メモ化を不要にしてくれる仕組みについて理解しましょう。 -## Installation {/*installation*/} +## インストール {/*installation*/} -Get started with [installing React Compiler](/learn/react-compiler/installation) and learn how to configure it with your build tools. +[React Compiler のインストール](/learn/react-compiler/installation)を行い、ビルドツールと組み合わせるための設定方法を学びましょう。 -## Incremental Adoption {/*incremental-adoption*/} +## 段階的な導入 {/*incremental-adoption*/} -Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet. +全面的に有効にする準備がまだできていない場合に、既存のコードベースで [React Compiler を段階的に導入する戦略](/learn/react-compiler/incremental-adoption)を学びましょう。 -## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/} +## デバッグとトラブルシューティング {/*debugging-and-troubleshooting*/} -When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow. +期待通りに動作しない場合は[デバッグガイド](/learn/react-compiler/debugging)を参考に、コンパイラエラーとランタイムエラーの違いやよくある失敗パターンを理解しつつ、体系的なデバッグ作業を行いましょう。 -## Configuration and Reference {/*configuration-and-reference*/} +## 設定とリファレンス {/*configuration-and-reference*/} -For detailed configuration options and API reference: +詳細な設定オプションと API リファレンスについては以下をご覧ください: -- [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility -- [Directives](/reference/react-compiler/directives) - Function-level compilation control -- [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries +- [設定オプション](/reference/react-compiler/configuration) - React バージョンの互換性を含むすべてのコンパイラ設定オプション +- [ディレクティブ](/reference/react-compiler/directives) - 関数レベルのコンパイル制御 +- [ライブラリのコンパイル](/reference/react-compiler/compiling-libraries) - 事前コンパイルされたライブラリの配布 -## Additional resources {/*additional-resources*/} +## 追加情報 {/*additional-resources*/} -In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. +これらのドキュメントに加えて、コンパイラに関する追加情報や議論については [React Compiler Working Group](https://github.com/reactwg/react-compiler) を確認することをお勧めします。 diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 92cf0b74e..343fdbee3 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -1,56 +1,56 @@ --- -title: Installation +title: インストール --- -This guide will help you install and configure React Compiler in your React application. +このガイドでは、React アプリケーションに React Compiler をインストールし、設定する方法を説明します。 -* How to install React Compiler -* Basic configuration for different build tools -* How to verify your setup is working +* React Compiler のインストール方法 +* さまざまなビルドツールでの基本的な設定 +* セットアップが正常に動作しているかの確認方法 -## Prerequisites {/*prerequisites*/} +## 前提条件 {/*prerequisites*/} -React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target). +React Compiler は React 19 で最適に動作するよう設計されていますが、React 17 および 18 もサポートしています。詳細については [React バージョン互換性](/reference/react-compiler/target)をご覧ください。 -## Installation {/*installation*/} +## インストール {/*installation*/} -Install React Compiler as a `devDependency`: +React Compiler を `devDependency` としてインストールします。 npm install -D babel-plugin-react-compiler@latest -Or with Yarn: +Yarn を使用する場合: yarn add -D babel-plugin-react-compiler@latest -Or with pnpm: +pnpm を使用する場合: pnpm install -D babel-plugin-react-compiler@latest -## Basic Setup {/*basic-setup*/} +## 基本的なセットアップ {/*basic-setup*/} -React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration). +React Compiler は、デフォルトで設定なしで動作するように設計されています。ただし、特別な状況で設定が必要な場合(例えば、React 19 未満のバージョンを対象とする場合)は、[コンパイラオプションリファレンス](/reference/react-compiler/configuration)を参照してください。 -The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline. +セットアッププロセスは使用するビルドツールによって異なります。React Compiler には、ビルドパイプラインと統合して動作する Babel プラグインが含まれています。 -React Compiler must run **first** in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations. +React Compiler は Babel プラグインパイプライン内で**最初に**実行される必要があります。コンパイラが適切な解析を行うためにはオリジナルのソース情報が必要なため、他の変換より前に処理する必要があるのです。 ### Babel {/*babel*/} -Create or update your `babel.config.js`: +`babel.config.js` を作成または更新します。 ```js {3} module.exports = { @@ -64,7 +64,7 @@ module.exports = { ### Vite {/*vite*/} -If you use Vite, you can add the plugin to vite-plugin-react: +Vite を使用している場合は、プラグインを vite-plugin-react に追加できます。 ```js {3,9} // vite.config.js @@ -82,7 +82,7 @@ export default defineConfig({ }); ``` -Alternatively, if you prefer a separate Babel plugin for Vite: +または、Vite 用の Babel プラグインを別に使用したい場合は以下のようにします。 npm install -D vite-plugin-babel @@ -108,10 +108,10 @@ export default defineConfig({ ### Next.js {/*usage-with-nextjs*/} -Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information. +詳細については [Next.js ドキュメント](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler)を参照してください。 ### React Router {/*usage-with-react-router*/} -Install `vite-plugin-babel`, and add the compiler's Babel plugin to it: +`vite-plugin-babel` をインストールし、コンパイラの Babel プラグインを追加します。 {`npm install vite-plugin-babel`} @@ -143,63 +143,63 @@ export default defineConfig({ ### Webpack {/*usage-with-webpack*/} -A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack). +コミュニティ製の webpack ローダーが[こちら](https://github.com/SukkaW/react-compiler-webpack)で利用できます。 ### Expo {/*usage-with-expo*/} -Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/) to enable and use the React Compiler in Expo apps. +Expo アプリで React Compiler を有効にして使用する方法については、[Expo のドキュメント](https://docs.expo.dev/guides/react-compiler/)を参照してください。 ### Metro (React Native) {/*usage-with-react-native-metro*/} -React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel) section for installation instructions. +React Native は Metro 経由で Babel を使用するため、インストール手順については [Babel での使用](#babel)セクションを参照してください。 ### Rspack {/*usage-with-rspack*/} -Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler) to enable and use the React Compiler in Rspack apps. +Rspack アプリで React Compiler を有効にして使用する方法については、[Rspack のドキュメント](https://rspack.dev/guide/tech/react#react-compiler)を参照してください。 ### Rsbuild {/*usage-with-rsbuild*/} -Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler) to enable and use the React Compiler in Rsbuild apps. +Rsbuild アプリで React Compiler を有効にして使用する方法については、[Rsbuild のドキュメント](https://rsbuild.dev/guide/framework/react#react-compiler)を参照してください。 -## ESLint Integration {/*eslint-integration*/} +## ESLint 統合 {/*eslint-integration*/} -React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components. +React Compiler には、最適化できないコードを特定するのに役立つ ESLint ルールが含まれています。ESLint ルールがエラーを報告する場合、コンパイラによるそのコンポーネントやフックの最適化がスキップされるという意味です。これは安全です。コンパイラはコードベースの他の部分の最適化を続けるので、すべての違反をすぐに修正する必要はありません。自分のペースで対処し、最適化されるコンポーネントの数を徐々に増やしていってください。 -Install the ESLint plugin: +ESLint プラグインをインストールします。 npm install -D eslint-plugin-react-hooks@latest -If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset. +`eslint-plugin-react-hooks` をまだ設定していない場合は、[readme のインストール手順](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation)に従ってください。コンパイラのルールは `recommended-latest` プリセットで利用できます。 -The ESLint rule will: -- Identify violations of the [Rules of React](/reference/rules) -- Show which components can't be optimized -- Provide helpful error messages for fixing issues +ESLint ルールは以下を行います。 +- [React のルール](/reference/rules)の違反の特定 +- 最適化できないコンポーネントの表示 +- 問題の修正に役立つエラーメッセージの提供 -## Verify Your Setup {/*verify-your-setup*/} +## セットアップの確認 {/*verify-your-setup*/} -After installation, verify that React Compiler is working correctly. +インストール後、React Compiler が正常に動作していることを確認します。 -### Check React DevTools {/*check-react-devtools*/} +### React DevTools による確認 {/*check-react-devtools*/} -Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools: +React Compiler によって最適化されたコンポーネントは、React DevTools で "Memo ✨" バッジが表示されます。 -1. Install the [React Developer Tools](/learn/react-developer-tools) browser extension -2. Open your app in development mode -3. Open React DevTools -4. Look for the ✨ emoji next to component names +1. [React Developer Tools](/learn/react-developer-tools) ブラウザ拡張機能をインストール +2. 開発モードでアプリを開く +3. React DevTools を開く +4. コンポーネント名の横にある ✨ 絵文字を探す -If the compiler is working: -- Components will show a "Memo ✨" badge in React DevTools -- Expensive calculations will be automatically memoized -- No manual `useMemo` is required +コンパイラが動作している場合 +- コンポーネントは React DevTools で "Memo ✨" バッジを表示 +- 高コストな計算が自動的にメモ化される +- 手動の `useMemo` は不要 -### Check Build Output {/*check-build-output*/} +### ビルド出力の確認 {/*check-build-output*/} -You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically. +また、ビルド出力を確認することでもコンパイラが動作していることを確認できます。コンパイルされたコードには、コンパイラが自動的に追加する自動メモ化ロジックが含まれています。 ```js import { c as _c } from "react/compiler-runtime"; @@ -217,11 +217,11 @@ export default function MyApp() { ``` -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### Opting out specific components {/*opting-out-specific-components*/} +### 特定のコンポーネントの除外 {/*opting-out-specific-components*/} -If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive: +コンポーネントがコンパイル後に問題を引き起こしている場合、`"use no memo"` ディレクティブを使用して一時的に除外できます。 ```js function ProblematicComponent() { @@ -230,16 +230,16 @@ function ProblematicComponent() { } ``` -This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved. +これにより、コンパイラはこの特定のコンポーネントの最適化をスキップします。根本的な問題を修正し、解決したらディレクティブを削除してください。 -For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging). +トラブルシューティングの詳細については、[デバッグガイド](/learn/react-compiler/debugging)を参照してください。 -## Next Steps {/*next-steps*/} +## 次のステップ {/*next-steps*/} -Now that you have React Compiler installed, learn more about: +React Compiler がインストールされたので、以下について詳しく学びましょう。 -- [React version compatibility](/reference/react-compiler/target) for React 17 and 18 -- [Configuration options](/reference/react-compiler/configuration) to customize the compiler -- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases -- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues -- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library +- React 17 と 18 の [React バージョン互換性](/reference/react-compiler/target) +- コンパイラをカスタマイズする[設定オプション](/reference/react-compiler/configuration) +- 既存のコードベースでの[段階的な導入戦略](/learn/react-compiler/incremental-adoption) +- 問題のトラブルシューティングのための[デバッグテクニック](/learn/react-compiler/debugging) +- React ライブラリをコンパイルするための[ライブラリコンパイルガイド](/reference/react-compiler/compiling-libraries) \ No newline at end of file diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index ff5d6eae4..8baaef74a 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -1,28 +1,28 @@ --- -title: Introduction +title: はじめに --- -React Compiler is a new build-time tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. +React Compiler は、React アプリを自動的に最適化する新しいビルド時ツールです。プレーンな JavaScript で動作し、[React のルール](/reference/rules)を理解しているため、コードを書き直すことなく使用できます。 -* What React Compiler does -* Getting started with the compiler -* Incremental adoption strategies -* Debugging and troubleshooting when things go wrong -* Using the compiler on your React library +* React Compiler の機能 +* React Compiler の導入方法 +* 段階的な導入戦略 +* 問題が発生した際のデバッグとトラブルシューティング +* React ライブラリでのコンパイラの使用方法 -## What does React Compiler do? {/*what-does-react-compiler-do*/} +## React Compiler の機能 {/*what-does-react-compiler-do*/} -React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features. +React Compiler は、ビルド時に React アプリケーションを自動的に最適化します。React は最適化なしでも大抵は十分に高速ですが、アプリの応答性を保つために、コンポーネントや値を手動でメモ化する必要がある場合があります。このようなメモ化は面倒で、間違いやすく、メンテナンスすべきコード量を増加させます。React Compiler はこの最適化を自動的に行って認知負荷を軽減することで、開発者が機能開発に集中できるようにしてくれます。 -### Before React Compiler {/*before-react-compiler*/} +### React Compiler を使用しない場合 {/*before-react-compiler*/} -Without the compiler, you need to manually memoize components and values to optimize re-renders: +コンパイラを使用しない場合、再レンダーを最適化するためにコンポーネントや値を手作業でメモ化する必要があります。 ```js import { useMemo, useCallback, memo } from 'react'; @@ -49,21 +49,21 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { -This manual memoization has a subtle bug that breaks memoization: +この手動でのメモ化には、メモ化を破壊してしまう気づきづらいバグがあります。 ```js [[2, 1, "() => handleClick(item)"]] handleClick(item)} /> ``` -Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization. +`handleClick` は `useCallback` でラップされていますが、アロー関数 `() => handleClick(item)` はコンポーネントがレンダーされるたびに新しい関数を作成します。つまり `Item` は常に新しい `onClick` プロパティを受け取っていることになり、メモ化が動作しなくなります。 -React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes. +React Compiler は、アロー関数の使用の有無にかかわらず、これを正しく最適化でき、`props.onClick` が変更されたときにのみ `Item` が再レンダーされることを保証します。 -### After React Compiler {/*after-react-compiler*/} +### React Compiler を使用する場合 {/*after-react-compiler*/} -With React Compiler, you write the same code without manual memoization: +React Compiler を使うことで、手動によるメモ化なしで同じコードを書くことができます。 ```js function ExpensiveComponent({ data, onClick }) { @@ -83,23 +83,23 @@ function ExpensiveComponent({ data, onClick }) { } ``` -_[See this example in the React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)_ +*[React Compiler Playground でこの例を確認](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)* -React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary. +React Compiler は最適なメモ化を自動で適用し、アプリが必要なときだけ再レンダーされるようにします。 -#### What kind of memoization does React Compiler add? {/*what-kind-of-memoization-does-react-compiler-add*/} +#### React Compiler はどのようなメモ化を行うのか? {/*what-kind-of-memoization-does-react-compiler-add*/} -React Compiler's automatic memoization is primarily focused on **improving update performance** (re-rendering existing components), so it focuses on these two use cases: +React Compiler の自動メモ化は主に**更新パフォーマンスの向上**(既存コンポーネントの再レンダー)に焦点を当てており、主に以下の 2 つのユースケースに重点を置いています。 -1. **Skipping cascading re-rendering of components** - * Re-rendering `` causes many components in its component tree to re-render, even though only `` has changed -1. **Skipping expensive calculations from outside of React** - * For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data +1. **コンポーネントの連鎖的な再レンダーのスキップ** + * `` の再レンダーにより、`` のみが変更されたにも関わらず、そのコンポーネントツリー内の多くのコンポーネントが再レンダーされる +1. **React の外で行われる高コストな計算のスキップ** + * 例えば、コンポーネントやフック内で `expensivelyProcessAReallyLargeArrayOfObjects()` を呼び出す場合 -#### Optimizing Re-renders {/*optimizing-re-renders*/} +#### 再レンダーの最適化 {/*optimizing-re-renders*/} -React lets you express your UI as a function of their current state (more concretely: their props, state, and context). In its current implementation, when a component's state changes, React will re-render that component _and all of its children_ — unless you have applied some form of manual memoization with `useMemo()`, `useCallback()`, or `React.memo()`. For example, in the following example, `` will re-render whenever ``'s state changes: +React では、UI を現在の状態(具体的には props、state、context)の関数として表現できます。現在の実装では、コンポーネントの状態が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネントに加えて*そのすべての子要素*を再レンダーします。例えば、以下の例では、`` の状態が変更されるたびに `` が再レンダーされます。 ```javascript function FriendList({ friends }) { @@ -118,13 +118,13 @@ function FriendList({ friends }) { ); } ``` -[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA) +[*React Compiler Playground でこの例を確認*](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA) -React Compiler automatically applies the equivalent of manual memoization, ensuring that only the relevant parts of an app re-render as state changes, which is sometimes referred to as "fine-grained reactivity". In the above example, React Compiler determines that the return value of `` can be reused even as `friends` changes, and can avoid recreating this JSX _and_ avoid re-rendering `` as the count changes. +React Compiler はメモ化と同等の処理を自動的に適用し、状態が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ (fine-grained reactivity) と呼ばれることもあります。上記の例では、React Compiler は `friends` が変更されても個々の `` の返り値を再利用できると判断し、この JSX の再作成 *と* カウントの変更による `` の再レンダーを回避できます。 -#### Expensive calculations also get memoized {/*expensive-calculations-also-get-memoized*/} +#### 高コストな計算もメモ化される {/*expensive-calculations-also-get-memoized*/} -React Compiler can also automatically memoize expensive calculations used during rendering: +React Compiler は、レンダー中に使用される高コストな計算も自動的にメモ化できます。 ```js // **Not** memoized by React Compiler, since this is not a component or hook @@ -137,55 +137,54 @@ function TableContainer({ items }) { // ... } ``` -[_See this example in the React Compiler Playground_](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA) +[*React Compiler Playground でこの例を確認*](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgFTYHIQAuumAtgqRAJYBeCAJpgEYCemASggIZyGYDCEUgAcqAGwQwANJjBUAdokyEAFlTCZ1meUUxdMcIcIjyE8vhBiYVECAGsAOvIBmURYSonMCAB7CzcgBuCGIsAAowEIhgYACCnFxioQAyXDAA5gixMDBcLADyzvlMAFYIvGAAFACUmMCYaNiYAHStOFgAvk5OGJgAshTUdIysHNy8AkbikrIKSqpaWvqGIiZmhE6u7p7ymAAqXEwSguZcCpKV9VSEFBodtcBOmAYmYHz0XIT6ALzefgFUYKhCJRBAxeLcJIsVIZLI5PKFYplCqVa63aoAbm6u0wMAQhFguwAPPRAQA+YAfL4dIloUmBMlODogDpAA) -However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive function, you may want to consider implementing its own memoization outside of React, because: +ただし、`expensivelyProcessAReallyLargeArrayOfObjects` が本当に高コストな関数である場合は、React 外で独自のメモ化を実装することを検討することをお勧めします。理由は以下の通りです。 -- React Compiler only memoizes React components and hooks, not every function -- React Compiler's memoization is not shared across multiple components or hooks +- React Compiler は React コンポーネントとフックのみをメモ化し、すべての関数をメモ化するわけではない +- React Compiler のメモ化は複数のコンポーネントやフック間で共有されない -So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated. +そのため、`expensivelyProcessAReallyLargeArrayOfObjects` が多くの異なるコンポーネントで使用される場合、まったく同じ入力が渡されたとしても、その高コストな計算が繰り返し実行されてしまいます。コードをより複雑にする前に、[プロファイリング](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)を行って、本当にそれほど高コストかどうかを確認することをお勧めします。 -## Should I try out the compiler? {/*should-i-try-out-the-compiler*/} +## コンパイラを試すべきか? {/*should-i-try-out-the-compiler*/} -We encourage everyone to start using React Compiler. While the compiler is still an optional addition to React today, in the future some features may require the compiler in order to fully work. +すべての方に React Compiler の使用を開始することをお勧めします。コンパイラは現在は React の任意機能ですが、将来的には一部の機能を完全に動作させるためにコンパイラが必要になる可能性があります。 -### Is it safe to use? {/*is-it-safe-to-use*/} +### 安全に使用できるか? {/*is-it-safe-to-use*/} -React Compiler is now stable and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules). +React Compiler は現在安定板であり、本番環境で広範囲にテストされています。Meta などの企業で本番環境で使用されていますが、あなたのアプリケーションでコンパイラを導入できるかどうかは、コードベースの健全性と [React のルール](/reference/rules)をどの程度遵守しているかに依存します。 -## What build tools are supported? {/*what-build-tools-are-supported*/} +## どのビルドツールがサポートされているか? {/*what-build-tools-are-supported*/} -React Compiler can be installed across [several build tools](/learn/react-compiler/installation) such as Babel, Vite, Metro, and Rsbuild. +React Compiler は[複数のビルドツール](/learn/react-compiler/installation)で利用できます。具体的には Babel、Vite、Metro、Rsbuild などが含まれます。 -React Compiler is primarily a light Babel plugin wrapper around the core compiler, which was designed to be decoupled from Babel itself. While the initial stable version of the compiler will remain primarily a Babel plugin, we are working with the swc and [oxc](https://github.com/oxc-project/oxc/issues/10048) teams to build first class support for React Compiler so you won't have to add Babel back to your build pipelines in the future. +React Compiler は本質的に、コアコンパイラを軽量な Babel プラグインでラップしたものです。コアコンパイラは Babel 自体から分離して設計されています。コンパイラの最初の安定版は主に Babel プラグインとなりますが、swc と [oxc](https://github.com/oxc-project/oxc/issues/10048) チームと協力して、React Compiler のファーストクラスサポートを構築しており、将来的にはビルドパイプラインに Babel を再追加する必要がなくなる予定です。 -Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) and up. +Next.js を使用しているユーザは、[v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) 以降のバージョンを利用することで、SWC 経由での React Compiler の利用を有効化できます。 -## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} +## useMemo、useCallback、React.memo をどう扱うべきか? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} -By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written. +デフォルトでは、React Compiler はコードの分析結果とヒューリスティックに基づいてコードをメモ化します。ほとんどの場合このメモ化は、あなたが書くであろうものと同等か、それ以上に正確です。 -However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change. +ただし、場合によっては開発者がメモ化をより細かく制御する必要があるかもしれません。`useMemo` と `useCallback` フックは、React Compiler と併用して、どの値をメモ化するかを制御するための避難ハッチ (escape hatch) として使用し続けることができます。一般的なユースケースは、メモ化された値がエフェクトの依存値として使用される場合で、依存値が実質的に変化しないならエフェクトが繰り返し発火しないようにする、というものです。 -For new code, we recommend relying on the compiler for memoization and using `useMemo`/`useCallback` where needed to achieve precise control. +新しいコードにおいては、メモ化をコンパイラに任せ、詳細な制御が必要な場合に `useMemo`/`useCallback` を使用することをお勧めします。 -For existing code, we recommend either leaving existing memoization in place (removing it can change compilation output) or carefully testing before removing the memoization. +既存のコードの場合は、既存のメモ化をそのまま残すか(削除するとコンパイル出力が変わる可能性があります)、メモ化を削除する前に慎重にテストすることをお勧めします。 -## Try React Compiler {/*try-react-compiler*/} +## React Compiler を試す {/*try-react-compiler*/} -This section will help you get started with React Compiler and understand how to use it effectively in your projects. +このセクションでは、React Compiler の始め方と、プロジェクトで効果的に使用するための情報を提供します。 -* **[Installation](/learn/react-compiler/installation)** - Install React Compiler and configure it for your build tools -* **[React Version Compatibility](/reference/react-compiler/target)** - Support for React 17, 18, and 19 -* **[Configuration](/reference/react-compiler/configuration)** - Customize the compiler for your specific needs -* **[Incremental Adoption](/learn/react-compiler/incremental-adoption)** - Strategies for gradually rolling out the compiler in existing codebases -* **[Debugging and Troubleshooting](/learn/react-compiler/debugging)** - Identify and fix issues when using the compiler -* **[Compiling Libraries](/reference/react-compiler/compiling-libraries)** - Best practices for shipping compiled code -* **[API Reference](/reference/react-compiler/configuration)** - Detailed documentation of all configuration options +* **[インストール](/learn/react-compiler/installation)** - React Compiler をインストールし、ビルドツール用に設定する +* **[React バージョン互換性](/reference/react-compiler/target)** - React 17、18、19 のサポート +* **[設定](/reference/react-compiler/configuration)** - 特定のニーズに合わせてコンパイラをカスタマイズする +* **[段階的な導入](/learn/react-compiler/incremental-adoption)** - 既存のコードベースでコンパイラを段階的に展開する戦略 +* **[デバッグとトラブルシューティング](/learn/react-compiler/debugging)** - コンパイラ使用時の問題の特定と修正 +* **[ライブラリのコンパイル](/reference/react-compiler/compiling-libraries)** - コンパイルされたコードを配布するためのベストプラクティス +* **[API リファレンス](/reference/react-compiler/configuration)** - すべての設定オプションの詳細ドキュメント -## Additional resources {/*additional-resources*/} - -In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler. +## 追加情報 {/*additional-resources*/} +これらのドキュメントに加えて、コンパイラに関する追加情報や議論については [React Compiler Working Group](https://github.com/reactwg/react-compiler) を確認することをお勧めします。 diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index fd03480a3..37627ad4d 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -62,19 +62,19 @@ "canary": true, "routes": [ { - "title": "Introduction", + "title": "はじめに", "path": "/learn/react-compiler/introduction" }, { - "title": "Installation", + "title": "インストール", "path": "/learn/react-compiler/installation" }, { - "title": "Incremental Adoption", + "title": "段階的な導入", "path": "/learn/react-compiler/incremental-adoption" }, { - "title": "Debugging and Troubleshooting", + "title": "デバッグとトラブルシューティング", "path": "/learn/react-compiler/debugging" } ]