From aad11af92420594ae6aec946b064480a2f5d5ded Mon Sep 17 00:00:00 2001 From: kenji-arata Date: Sat, 18 Oct 2025 12:14:03 +0900 Subject: [PATCH 1/6] translate React Compiler --- src/content/learn/react-compiler/debugging.md | 96 +++++++------- .../react-compiler/incremental-adoption.md | 110 ++++++++-------- src/content/learn/react-compiler/index.md | 30 ++--- .../learn/react-compiler/installation.md | 120 +++++++++--------- .../learn/react-compiler/introduction.md | 111 ++++++++-------- src/sidebarLearn.json | 8 +- 6 files changed, 237 insertions(+), 238 deletions(-) diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index 1883125a6..a7c0ad8c4 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..bd0034663 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..2a79b94c0 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) について学び、`useMemo`、`useCallback`、`React.memo` による手動メモ化が不要になる、React アプリケーションを自動的に最適化する仕組みを理解しましょう。 -## 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 3606c9c6d..0b023a2aa 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -1,60 +1,60 @@ --- -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) をご覧ください。 -React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version. +React Compiler は現在リリース候補 (RC) 段階です。最新のリリース候補バージョンを入手するには、`@rc` タグを使用してインストールしてください。 -## Installation {/*installation*/} +## インストール {/*installation*/} -Install React Compiler as a `devDependency`: +React Compiler を `devDependency` としてインストールします。 npm install -D babel-plugin-react-compiler@rc -Or with Yarn: +Yarn を使用する場合： yarn add -D babel-plugin-react-compiler@rc -Or with pnpm: +pnpm を使用する場合： pnpm install -D babel-plugin-react-compiler@rc -## 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 = { @@ -68,7 +68,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 @@ -86,7 +86,7 @@ export default defineConfig({ }); ``` -Alternatively, if you prefer a separate Babel plugin for Vite: +または、Vite 用の別の Babel プラグインを使用したい場合 npm install -D vite-plugin-babel @@ -112,10 +112,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`} @@ -147,36 +147,36 @@ 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@rc -Then enable the compiler rule in your ESLint configuration: +次に、ESLint 設定でコンパイラルールを有効にします。 ```js {3} // .eslintrc.js @@ -187,32 +187,32 @@ module.exports = { }; ``` -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"; @@ -230,11 +230,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() { @@ -243,16 +243,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 \ No newline at end of file +- 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 440c66ab6..476dd0ee8 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -1,32 +1,32 @@ --- -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 ライブラリでのコンパイラの使用方法 -React Compiler is currently in Release Candidate (RC). We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the `@rc` tag. +React Compiler は現在リリース候補 (RC) の状態です。皆様にコンパイラをお試しいただき、フィードバックを提供いただくことをお勧めします。最新のRCリリースは@rcタグで確認できます。 -## 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'; @@ -50,9 +50,9 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { }); ``` -### After React Compiler {/*after-react-compiler*/} +### React Compiler を使用する場合 {/*after-react-compiler*/} -With React Compiler, you write the same code without manual memoization: +メモ化なしで同じコードを書くことができます。 ```js function ExpensiveComponent({ data, onClick }) { @@ -72,23 +72,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 equivalent optimizations, 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 を現在の state（具体的には props、state、context）の関数として表現できます。現在の実装では、コンポーネントの state が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネント *そのすべての子要素* を再レンダーします。例えば、以下の例では、`` の state が変更されるたびに `` が再レンダーされます： ```javascript function FriendList({ friends }) { @@ -107,13 +107,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 はメモ化と同等の処理を自動的に適用し、state が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ（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 @@ -126,51 +126,50 @@ 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 の使用を開始することをお勧めします。ココンパイラは現在は任意機能ですが、将来的には一部の機能を完全に動作させるためにコンパイラが必要になる可能性があります。 -### Is it safe to use? {/*is-it-safe-to-use*/} +### 安全に使用できるか？ {/*is-it-safe-to-use*/} -React Compiler is now in RC 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 は現在リリース候補 (RC) で、本番環境で広範囲にテストされています。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 経由（swc‑invoked）の 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*/} -If you are using React Compiler, [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo) can be removed. React Compiler adds automatic memoization more precisely and granularly than is possible with these hooks. If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component. +React Compiler を使用している場合、[`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback)、[`React.memo`](/reference/react/memo) は不要になります。React Compiler はこれらのフックよりも正確で細かいメモ化を自動で追加します。手動のメモ化を保持することを選択した場合、React Compiler はそれらを分析し、手動のメモ化が自動的に推論されたメモ化と一致するかどうかを判断します。一致しない場合、コンパイラはそのコンポーネントの最適化を停止します。 -This is done out of caution as a common anti-pattern with manual memoization is using it for correctness. This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected. +これは慎重を期しての措置で、メモ化によって期待する挙動を担保しようとしているケースが、よくあるアンチパターンとして挙げられるからです。つまり、アプリケーションの動作が特定の値のメモ化に依存してしまう状態です。例えば、無限ループを防ぐ目的で、ある値をメモ化して `useEffect` の発火を抑えているケースなどです。これは React のルールに反しますが、コンパイラが手動のメモ化を自動的に取り除くのは危険になり得るため、その場合は最適化を停止します。手動のメモ化は自分で削除し、アプリケーションが期待どおりに動作するか確認してください。 -## 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" } ] From 7e8b5a996e4af457ff6dded3e2c82ad55e67b7c3 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Wed, 22 Oct 2025 17:18:20 +0900 Subject: [PATCH 2/6] Fix space problems --- src/content/learn/react-compiler/debugging.md | 6 ++-- .../react-compiler/incremental-adoption.md | 8 +++--- src/content/learn/react-compiler/index.md | 8 +++--- .../learn/react-compiler/installation.md | 28 +++++++++---------- .../learn/react-compiler/introduction.md | 8 +++--- 5 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index a7c0ad8c4..cf9fb809a 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -16,7 +16,7 @@ title: デバッグとトラブルシューティング ## コンパイラの動作を理解する {/*understanding-compiler-behavior*/} -React Compiler は [React のルール](/reference/rules) に従うコードを処理するように設計されています。これらのルールに違反する可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すよりも、最適化を安全にスキップします。 +React Compiler は [React のルール](/reference/rules)に従うコードを処理するように設計されています。これらのルールに違反する可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すよりも、最適化を安全にスキップします。 ### コンパイラエラーとランタイムエラー {/*compiler-errors-vs-runtime-issues*/} @@ -89,5 +89,5 @@ function ProblematicComponent() { ## 次のステップ {/*next-steps*/} -- 問題を防ぐために [React のルール](/reference/rules) を確認する -- 段階的な展開戦略については [段階的導入ガイド](/learn/react-compiler/incremental-adoption) を確認する \ 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 bd0034663..dde2eb38e 100644 --- a/src/content/learn/react-compiler/incremental-adoption.md +++ b/src/content/learn/react-compiler/incremental-adoption.md @@ -214,12 +214,12 @@ export function isCompilerEnabled() { 導入中に問題が発生した場合 1. `"use no memo"` を使用して問題のあるコンポーネントを一時的に除外 -2. 一般的な問題については [デバッグガイド](/learn/react-compiler/debugging) を確認 +2. 一般的な問題については[デバッグガイド](/learn/react-compiler/debugging)を確認 3. ESLint プラグインによって特定された React のルール違反を修正 4. より段階的な導入のために `compilationMode: 'annotation'` の使用を検討 ## 次のステップ {/*next-steps*/} -- より多くのオプションについては [設定ガイド](/reference/react-compiler/configuration) を確認する -- [デバッグテクニック](/learn/react-compiler/debugging) について学ぶ -- すべてのコンパイラオプションについては [API リファレンス](/reference/react-compiler/configuration) を確認する \ 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 2a79b94c0..d91aff813 100644 --- a/src/content/learn/react-compiler/index.md +++ b/src/content/learn/react-compiler/index.md @@ -4,20 +4,20 @@ title: React Compiler ## はじめに {/*introduction*/} -[React Compiler の機能](/learn/react-compiler/introduction) について学び、`useMemo`、`useCallback`、`React.memo` による手動メモ化が不要になる、React アプリケーションを自動的に最適化する仕組みを理解しましょう。 +[React Compiler の機能](/learn/react-compiler/introduction)について学び、`useMemo`、`useCallback`、`React.memo` による手動メモ化が不要になる、React アプリケーションを自動的に最適化する仕組みを理解しましょう。 ## インストール {/*installation*/} -[React Compiler のインストール](/learn/react-compiler/installation) から、ビルドツールとの設定方法を学びましょう。 +[React Compiler のインストール](/learn/react-compiler/installation)から、ビルドツールとの設定方法を学びましょう。 ## 段階的な導入 {/*incremental-adoption*/} -横断的に有効にする準備がまだできていない場合は、既存のコードベースで [React Compiler を段階的に導入する戦略](/learn/react-compiler/incremental-adoption) を学びましょう。 +横断的に有効にする準備がまだできていない場合は、既存のコードベースで [React Compiler を段階的に導入する戦略](/learn/react-compiler/incremental-adoption)を学びましょう。 ## デバッグとトラブルシューティング {/*debugging-and-troubleshooting*/} -期待通りに動作しない場合は[デバッグガイド](/learn/react-compiler/debugging) を参考に、コンパイラエラーとランタイムエラーの違いやよくある失敗パターンを理解しつつ、体系的なデバッグ作業を行いましょう。 +期待通りに動作しない場合は[デバッグガイド](/learn/react-compiler/debugging)を参考に、コンパイラエラーとランタイムエラーの違いやよくある失敗パターンを理解しつつ、体系的なデバッグ作業を行いましょう。 ## 設定とリファレンス {/*configuration-and-reference*/} diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 4c26d7e2c..d35008d08 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -16,7 +16,7 @@ title: インストール ## 前提条件 {/*prerequisites*/} -React Compiler は React 19 で最適に動作するよう設計されていますが、React 17 および 18 もサポートしています。詳細については [React バージョン互換性](/reference/react-compiler/target) をご覧ください。 +React Compiler は React 19 で最適に動作するよう設計されていますが、React 17 および 18 もサポートしています。詳細については [React バージョン互換性](/reference/react-compiler/target)をご覧ください。 ## インストール {/*installation*/} @@ -40,7 +40,7 @@ pnpm install -D babel-plugin-react-compiler@latest ## 基本的なセットアップ {/*basic-setup*/} -React Compiler は、デフォルトで設定なしで動作するように設計されています。ただし、特別な状況で設定が必要な場合（例えば、React 19 未満のバージョンを対象とする場合）は、[コンパイラオプションリファレンス](/reference/react-compiler/configuration) を参照してください。 +React Compiler は、デフォルトで設定なしで動作するように設計されています。ただし、特別な状況で設定が必要な場合（例えば、React 19 未満のバージョンを対象とする場合）は、[コンパイラオプションリファレンス](/reference/react-compiler/configuration)を参照してください。 セットアッププロセスは使用するビルドツールによって異なります。React Compiler には、ビルドパイプラインと統合する Babel プラグインが含まれています。 @@ -108,7 +108,7 @@ export default defineConfig({ ### Next.js {/*usage-with-nextjs*/} -詳細については [Next.js ドキュメント](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) を参照してください。 +詳細については [Next.js ドキュメント](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler)を参照してください。 ### React Router {/*usage-with-react-router*/} `vite-plugin-babel` をインストールし、コンパイラの Babel プラグインを追加します。 @@ -143,23 +143,23 @@ export default defineConfig({ ### Webpack {/*usage-with-webpack*/} -コミュニティ製の webpack ローダーが [こちら](https://github.com/SukkaW/react-compiler-webpack) で利用できます。 +コミュニティ製の webpack ローダーが[こちら](https://github.com/SukkaW/react-compiler-webpack)で利用できます。 ### Expo {/*usage-with-expo*/} -Expo アプリで React Compiler を有効にして使用する方法については、[Expo のドキュメント](https://docs.expo.dev/guides/react-compiler/) を参照してください。 +Expo アプリで React Compiler を有効にして使用する方法については、[Expo のドキュメント](https://docs.expo.dev/guides/react-compiler/)を参照してください。 ### Metro (React Native) {/*usage-with-react-native-metro*/} -React Native は Metro 経由で Babel を使用するため、インストール手順については [Babel での使用](#babel) セクションを参照してください。 +React Native は Metro 経由で Babel を使用するため、インストール手順については [Babel での使用](#babel)セクションを参照してください。 ### Rspack {/*usage-with-rspack*/} -Rspack アプリで React Compiler を有効にして使用する方法については、[Rspack のドキュメント](https://rspack.dev/guide/tech/react#react-compiler) を参照してください。 +Rspack アプリで React Compiler を有効にして使用する方法については、[Rspack のドキュメント](https://rspack.dev/guide/tech/react#react-compiler)を参照してください。 ### Rsbuild {/*usage-with-rsbuild*/} -Rsbuild アプリで React Compiler を有効にして使用する方法については、[Rsbuild のドキュメント](https://rsbuild.dev/guide/framework/react#react-compiler) を参照してください。 +Rsbuild アプリで React Compiler を有効にして使用する方法については、[Rsbuild のドキュメント](https://rsbuild.dev/guide/framework/react#react-compiler)を参照してください。 ## ESLint 統合 {/*eslint-integration*/} @@ -175,7 +175,7 @@ npm install -D eslint-plugin-react-hooks@latest `eslint-plugin-react-hooks` をまだ設定していない場合は、[readme のインストール手順](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation)に従ってください。コンパイラのルールは `recommended-latest` プリセットで利用できます。 ESLint ルールは以下を行います。 -- [React のルール](/reference/rules) の違反の特定 +- [React のルール](/reference/rules)の違反の特定 - 最適化できないコンポーネントの表示 - 問題の修正に役立つエラーメッセージの提供 @@ -232,14 +232,14 @@ function ProblematicComponent() { これにより、コンパイラはこの特定のコンポーネントの最適化をスキップします。根本的な問題を修正し、解決したらディレクティブを削除してください。 -トラブルシューティングの詳細については、[デバッグガイド](/learn/react-compiler/debugging) を参照してください。 +トラブルシューティングの詳細については、[デバッグガイド](/learn/react-compiler/debugging)を参照してください。 ## 次のステップ {/*next-steps*/} React Compiler がインストールされたので、以下について詳しく学びましょう。 - 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 +- コンパイラをカスタマイズする[設定オプション](/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 7e81b2a0c..9403732de 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -3,7 +3,7 @@ title: はじめに --- -React Compiler は、React アプリを自動的に最適化する新しいビルド時ツールです。プレーンな JavaScript で動作し、[React のルール](/reference/rules) を理解しているため、コードを書き直すことなく使用できます。 +React Compiler は、React アプリを自動的に最適化する新しいビルド時ツールです。プレーンな JavaScript で動作し、[React のルール](/reference/rules)を理解しているため、コードを書き直すことなく使用できます。 @@ -90,7 +90,7 @@ React Compiler は最適なメモ化を自動で適用し、必要なときだ #### React Compiler はどのようなメモ化を行うのか？ {/*what-kind-of-memoization-does-react-compiler-add*/} -React Compiler の自動メモ化は主に **更新パフォーマンスの向上**（既存コンポーネントの再レンダー）に焦点を当てており、主に以下の 2 つのユースケースに重点を置いています： +React Compiler の自動メモ化は主に**更新パフォーマンスの向上**（既存コンポーネントの再レンダー）に焦点を当てており、主に以下の 2 つのユースケースに重点を置いています。 1. **コンポーネントの連鎖的な再レンダーのスキップ** * `` の再レンダーにより、`` のみが変更されたにも関わらず、そのコンポーネントツリー内の多くのコンポーネントが再レンダーされる @@ -99,7 +99,7 @@ React Compiler の自動メモ化は主に **更新パフォーマンスの向 #### 再レンダーの最適化 {/*optimizing-re-renders*/} -React では、UI を現在の state（具体的には props、state、context）の関数として表現できます。現在の実装では、コンポーネントの state が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネント *そのすべての子要素* を再レンダーします。例えば、以下の例では、`` の state が変更されるたびに `` が再レンダーされます： +React では、UI を現在の state（具体的には props、state、context）の関数として表現できます。現在の実装では、コンポーネントの state が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネント *そのすべての子要素* を再レンダーします。例えば、以下の例では、`` の state が変更されるたびに `` が再レンダーされます。 ```javascript function FriendList({ friends }) { @@ -120,7 +120,7 @@ function FriendList({ friends }) { ``` [*React Compiler Playground でこの例を確認*](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA) -React Compiler はメモ化と同等の処理を自動的に適用し、state が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ（fine-grained reactivity）と呼ばれることもあります。上記の例では、React Compiler は `friends` が変更されても `` の返り値を再利用できると判断し、この JSX の再作成 *と* カウントの変更による `` の再レンダーを回避できます。 +React Compiler はメモ化と同等の処理を自動的に適用し、state が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ (fine-grained reactivity) と呼ばれることもあります。上記の例では、React Compiler は `friends` が変更されても `` の返り値を再利用できると判断し、この JSX の再作成 *と* カウントの変更による `` の再レンダーを回避できます。 #### 高コストな計算もメモ化される {/*expensive-calculations-also-get-memoized*/} From dcafb6710c16dd9c7c68097655459a13b2078572 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Wed, 22 Oct 2025 17:21:47 +0900 Subject: [PATCH 3/6] Adjust line pairs --- src/content/learn/react-compiler/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index d35008d08..532496a3b 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -242,4 +242,4 @@ React Compiler がインストールされたので、以下について詳し - コンパイラをカスタマイズする[設定オプション](/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 +- React ライブラリをコンパイルするための[ライブラリコンパイルガイド](/reference/react-compiler/compiling-libraries) From e09d3cbe226f3f1f6d06c281626e088fb1deb2ff Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Wed, 22 Oct 2025 17:23:11 +0900 Subject: [PATCH 4/6] Fix line pairing problem --- src/content/learn/react-compiler/installation.md | 2 +- src/content/learn/react-compiler/introduction.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 532496a3b..d35008d08 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -242,4 +242,4 @@ React Compiler がインストールされたので、以下について詳し - コンパイラをカスタマイズする[設定オプション](/reference/react-compiler/configuration) - 既存のコードベースでの[段階的な導入戦略](/learn/react-compiler/incremental-adoption) - 問題のトラブルシューティングのための[デバッグテクニック](/learn/react-compiler/debugging) -- React ライブラリをコンパイルするための[ライブラリコンパイルガイド](/reference/react-compiler/compiling-libraries) +- 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 9403732de..4e72cd264 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -187,4 +187,4 @@ Next.js を使用しているユーザは、[v15.3.1](https://github.com/vercel/ ## 追加情報 {/*additional-resources*/} -これらのドキュメントに加えて、コンパイラに関する追加情報や議論については [React Compiler Working Group](https://github.com/reactwg/react-compiler) を確認することをお勧めします。 \ No newline at end of file +これらのドキュメントに加えて、コンパイラに関する追加情報や議論については [React Compiler Working Group](https://github.com/reactwg/react-compiler) を確認することをお勧めします。 From 3436f69f6081dc9769cf1ef0c9ebc6f5859afede Mon Sep 17 00:00:00 2001 From: kenji-arata Date: Wed, 22 Oct 2025 19:49:57 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit レビューコメントを踏まえ、 文脈にそぐわない言い回しや日本語として不適切な表現を修正。 --- src/content/learn/react-compiler/debugging.md | 26 +++++++++---------- .../react-compiler/incremental-adoption.md | 18 ++++++------- src/content/learn/react-compiler/index.md | 6 ++--- .../learn/react-compiler/installation.md | 16 ++++++------ .../learn/react-compiler/introduction.md | 24 ++++++++--------- 5 files changed, 45 insertions(+), 45 deletions(-) diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index cf9fb809a..5b8c54e68 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -16,32 +16,32 @@ title: デバッグとトラブルシューティング ## コンパイラの動作を理解する {/*understanding-compiler-behavior*/} -React Compiler は [React のルール](/reference/rules)に従うコードを処理するように設計されています。これらのルールに違反する可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すよりも、最適化を安全にスキップします。 +React Compiler は [React のルール](/reference/rules)に従うコードを処理するように設計されています。ルールに違反している可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すのではなく、最適化を安全にスキップします。 ### コンパイラエラーとランタイムエラー {/*compiler-errors-vs-runtime-issues*/} -**コンパイラエラー** はビルド時に発生し、コードのコンパイルを妨げます。コンパイラは問題のあるコードをスキップするように設計されているため、エラーが発生することは稀です。 +**コンパイラエラー** はビルド時に発生し、コードのコンパイルができなくなってしまうものです。コンパイラは問題のあるコードをエラーを発生させずにスキップするように設計されているため、このようなエラーが発生することは稀です。 **ランタイムエラー** は、コンパイル後のコードが想定と異なる動作をした場合に発生します。React Compiler で問題に遭遇した場合、ほとんどの場合はランタイムエラーです。これは通常、コードがコンパイラが検出できない微妙な形で React のルールに違反し、コンパイラがスキップすべきコンポーネントを誤ってコンパイルした場合に発生します。 -ランタイムエラーの調査では、影響範囲のコンポーネント内にある ESLint では検出されない React のルール違反の特定に注力してください。コンパイラはコードがこれらのルールに従うことを前提としており、検出できない方法でルールに違反した場合にランタイムエラーが発生します。 +ランタイムエラーのデバッグにおいては、影響を受けているコンポーネント内にある、ESLint では検出されない React のルール違反の特定に注力してください。コンパイラはコードがこれらのルールに従うことを前提としています。ランタイムエラーが発生するのは、検出できない方法でルール違反が起きている場合なのです。 -## 一般的な失敗パターン {/*common-breaking-patterns*/} +## 一般的な違反パターン {/*common-breaking-patterns*/} -React Compiler がアプリケーションを失敗させる代表的なパターンの 1 つは、コードが正しく動くことをメモ化に依存して書かれている場合です。つまり、アプリケーションが正常に動作するために、特定の値がメモ化されることに依存している状態です。コンパイラは、手動のアプローチとは異なる方法でメモ化を行う可能性があるため、副作用の過剰な実行や無限ループ、更新の欠落といった予期せぬ動作を引き起こす可能性があります。 +React Compiler がアプリケーションの不具合を引き起こす代表的なパターンの 1 つは、コードの正しさがメモ化の存在に依存している場合です。つまり、アプリケーションが正常に動作するために、特定の値がメモ化されることに依存している状態です。コンパイラは、あなたの手動のアプローチとは異なる方法でメモ化を行う可能性があるため、エフェクトの過剰な実行や無限ループ、更新の欠落といった予期せぬ動作を引き起こす可能性があります。 -これが発生する一般的なシナリオ +これが発生する一般的なシナリオは以下のようなものです。 -- **参照同一性に依存する副作用** - 副作用が、複数回のレンダーでもオブジェクトや配列が同じ参照を保つことを必要とする場合 -- **安定した参照を必要とする依存配列** - 依存が不安定だと、エフェクトが過剰に発火したり無限ループを引き起こす場合 +- **参照同一性に依存したエフェクト** - エフェクトが、複数のレンダー間でオブジェクトや配列が同じ参照を保つことに依存している場合 +- **参照の同一性を仮定した依存配列** - 依存配列が不安定だと、エフェクトの過剰発火や無限ループを引き起こす - **参照同一性のチェックを条件にしたロジック** - キャッシュや最適化のために参照同一性のチェックを行っている場合 ## デバッグ手順 {/*debugging-workflow*/} 問題に遭遇した場合は、以下の手順に従ってください。 -### コンパイラエラー {/*compiler-build-errors*/} +### ビルド時のコンパイラエラー {/*compiler-build-errors*/} コンパイラエラーでビルドが予期せず失敗した場合、これはコンパイラのバグである可能性が高いです。以下の情報を添えて [facebook/react](https://github.com/facebook/react/issues) リポジトリに報告してください。 - エラーメッセージ @@ -54,7 +54,7 @@ React Compiler がアプリケーションを失敗させる代表的なパタ ### 1. コンパイルを一時的に無効化 {/*temporarily-disable-compilation*/} -問題がコンパイラ起因かを切り分けるために `"use no memo"` を使用します： +問題がコンパイラによるものかを切り分けるために `"use no memo"` を使用します。 ```js function ProblematicComponent() { @@ -69,14 +69,14 @@ function ProblematicComponent() { ### 2. 段階的な問題の修正 {/*fix-issues-step-by-step*/} -1. 根本原因を特定する（例：メモ化依存の実装） +1. 根本原因を特定する（大抵は動作がメモ化の存在に依存しているため） 2. 修正のたびにテストを実施する 3. 修正したら `"use no memo"` を削除する -4. React DevTools でコンポーネントに ✨ バッジを表示することを確認する +4. React DevTools でコンポーネントに ✨ バッジが表示されることを確認する ## コンパイラバグの報告 {/*reporting-compiler-bugs*/} -コンパイラバグを発見したと思われる場合 +コンパイラバグを発見したと思われる場合は以下のようにしてください。 1. **React のルール違反ではないことを確認する** - ESLint でチェックする 2. **最小限の再現方法を特定する** - 小さな例で問題を切り分ける diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md index dde2eb38e..9d864662a 100644 --- a/src/content/learn/react-compiler/incremental-adoption.md +++ b/src/content/learn/react-compiler/incremental-adoption.md @@ -10,8 +10,8 @@ React Compiler は段階的に導入でき、まずコードベースの特定 * 段階的な導入が推奨される理由 * ディレクトリ単位で導入するための Babel の overrides の使い方 -* 明示的にコンパイルを有効化する “use memo” ディレクティブの使い方 -* コンポーネントを除外する “use no memo” ディレクティブの使い方 +* 明示的にコンパイルを有効化する "use memo" ディレクティブの使い方 +* コンポーネントを除外する "use no memo" ディレクティブの使い方 * ランタイムのゲーティングによる機能フラグの運用 * 導入状況のモニタリング方法 @@ -25,17 +25,17 @@ React Compiler はコードベース全体を自動的に最適化するよう 段階的な導入により、コンパイラが見つける可能性のある React のルール違反に対処することも容易になります。コードベース全体の違反を一度に修正するのではなく、コンパイラのカバレッジを拡張しながら体系的に対処できます。これにより、移行作業が管理しやすくなり、バグが混入するリスクを減らします。 -コードのどの部分がコンパイルされるかをコントロールすることで、コンパイラの最適化の実際の影響を測定する A/B テストを実行することもできます。このデータは、コンパイラを全体へ適用するか否かを意思決定するための情報として役立ちます。 +コードのどの部分がコンパイルされるかをコントロールすることで、コンパイラの最適化の実際の影響を測定する A/B テストを実行することもできます。このデータは、コンパイラを全体へ適用するか否かを意思決定したり、コンパイラの価値をチームに示したりするための情報として役立ちます。 ## 段階的な導入のアプローチ {/*approaches-to-incremental-adoption*/} -React Compiler を段階的に導入する主なアプローチは 3 つあります： +React Compiler を段階的に導入する主なアプローチは 3 つあります。 1. **Babel overrides** - 特定のディレクトリにコンパイラを適用 2. **"use memo" によるオプトイン** - 明示的にオプトインしたコンポーネントのみをコンパイル 3. **ランタイムゲーティング** - フィーチャーフラグでコンパイルをコントロール -すべてのアプローチにより、全体への展開前にアプリケーションの特定の部分でコンパイラをテストできます。 +どのアプローチを使っても、全体への展開前にアプリケーションの特定の部分のみでコンパイラのテストが可能です。 ## Babel Overrides によるディレクトリベースの導入 {/*directory-based-adoption*/} @@ -64,7 +64,7 @@ module.exports = { ### カバレッジの拡張 {/*expanding-coverage*/} -信頼を築いたら、より多くのディレクトリを追加します。 +自信が出てきたら、より多くのディレクトリを追加します。 ```js // babel.config.js @@ -171,7 +171,7 @@ function useSortedData(data) { - すべてのカスタムフックに `"use memo"` を追加 - 新しいコンポーネントに追加することを忘れない -これにより、コンパイラの影響を評価しながら、どのコンポーネントがコンパイルするかを正確にコントロールできます。 +これにより、コンパイラの影響を評価しながら、どのコンポーネントをコンパイルするかを正確にコントロールできます。 ## ゲーティング機能によるフィーチャーフラグ制御 {/*runtime-feature-flags-with-gating*/} @@ -211,7 +211,7 @@ export function isCompilerEnabled() { ## 導入時のトラブルシューティング {/*troubleshooting-adoption*/} -導入中に問題が発生した場合 +導入中に問題が発生した場合は、以下のようにしてください。 1. `"use no memo"` を使用して問題のあるコンポーネントを一時的に除外 2. 一般的な問題については[デバッグガイド](/learn/react-compiler/debugging)を確認 @@ -220,6 +220,6 @@ export function isCompilerEnabled() { ## 次のステップ {/*next-steps*/} -- より多くのオプションについては[設定ガイド](/reference/react-compiler/configuration)を確認する +- さまざまなオプションについて[設定ガイド](/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 d91aff813..c94835e3c 100644 --- a/src/content/learn/react-compiler/index.md +++ b/src/content/learn/react-compiler/index.md @@ -4,16 +4,16 @@ title: React Compiler ## はじめに {/*introduction*/} -[React Compiler の機能](/learn/react-compiler/introduction)について学び、`useMemo`、`useCallback`、`React.memo` による手動メモ化が不要になる、React アプリケーションを自動的に最適化する仕組みを理解しましょう。 +[React Compiler の機能](/learn/react-compiler/introduction)について知り、React アプリケーションを自動的に最適化して `useMemo`、`useCallback`、`React.memo` による手動メモ化を不要にしてくれる仕組みについて理解しましょう。 ## インストール {/*installation*/} -[React Compiler のインストール](/learn/react-compiler/installation)から、ビルドツールとの設定方法を学びましょう。 +[React Compiler のインストール](/learn/react-compiler/installation)を行い、ビルドツールと組み合わせるための設定方法を学びましょう。 ## 段階的な導入 {/*incremental-adoption*/} -横断的に有効にする準備がまだできていない場合は、既存のコードベースで [React Compiler を段階的に導入する戦略](/learn/react-compiler/incremental-adoption)を学びましょう。 +全面的に有効にする準備がまだできていない場合に、既存のコードベースで [React Compiler を段階的に導入する戦略](/learn/react-compiler/incremental-adoption)を学びましょう。 ## デバッグとトラブルシューティング {/*debugging-and-troubleshooting*/} diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index d35008d08..343fdbee3 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -9,7 +9,7 @@ title: インストール * React Compiler のインストール方法 -* 異なるビルドツールでの基本的な設定 +* さまざまなビルドツールでの基本的な設定 * セットアップが正常に動作しているかの確認方法 @@ -42,10 +42,10 @@ pnpm install -D babel-plugin-react-compiler@latest React Compiler は、デフォルトで設定なしで動作するように設計されています。ただし、特別な状況で設定が必要な場合（例えば、React 19 未満のバージョンを対象とする場合）は、[コンパイラオプションリファレンス](/reference/react-compiler/configuration)を参照してください。 -セットアッププロセスは使用するビルドツールによって異なります。React Compiler には、ビルドパイプラインと統合する Babel プラグインが含まれています。 +セットアッププロセスは使用するビルドツールによって異なります。React Compiler には、ビルドパイプラインと統合して動作する Babel プラグインが含まれています。 -React Compiler は Babel プラグインパイプラインで **最初に** 実行される必要があります。コンパイラは適切な解析には元のソース情報が必要なため、他の変換より前に処理する必要があります。 +React Compiler は Babel プラグインパイプライン内で**最初に**実行される必要があります。コンパイラが適切な解析を行うためにはオリジナルのソース情報が必要なため、他の変換より前に処理する必要があるのです。 ### Babel {/*babel*/} @@ -82,7 +82,7 @@ export default defineConfig({ }); ``` -または、Vite 用の別の Babel プラグインを使用したい場合 +または、Vite 用の Babel プラグインを別に使用したい場合は以下のようにします。 npm install -D vite-plugin-babel @@ -164,7 +164,7 @@ Rsbuild アプリで React Compiler を有効にして使用する方法につ ## ESLint 統合 {/*eslint-integration*/} -React Compiler には、最適化できないコードを特定するのに役立つ ESLint ルールが含まれています。ESLint ルールがエラーを報告した場合、コンパイラがその特定のコンポーネントやフックの最適化をスキップします。その場合は、コンパイラはコードベースの他の部分の最適化を続けるので、すべての違反をすぐに修正する必要はありません。自分のペースで対処し、最適化されるコンポーネントの数を徐々に増やしていってください。 +React Compiler には、最適化できないコードを特定するのに役立つ ESLint ルールが含まれています。ESLint ルールがエラーを報告する場合、コンパイラによるそのコンポーネントやフックの最適化がスキップされるという意味です。これは安全です。コンパイラはコードベースの他の部分の最適化を続けるので、すべての違反をすぐに修正する必要はありません。自分のペースで対処し、最適化されるコンポーネントの数を徐々に増やしていってください。 ESLint プラグインをインストールします。 @@ -185,7 +185,7 @@ ESLint ルールは以下を行います。 ### React DevTools による確認 {/*check-react-devtools*/} -React Compiler によって最適化されたコンポーネントは、React DevTools で「Memo ✨」バッジが表示されます。 +React Compiler によって最適化されたコンポーネントは、React DevTools で "Memo ✨" バッジが表示されます。 1. [React Developer Tools](/learn/react-developer-tools) ブラウザ拡張機能をインストール 2. 開発モードでアプリを開く @@ -193,13 +193,13 @@ React Compiler によって最適化されたコンポーネントは、React De 4. コンポーネント名の横にある ✨ 絵文字を探す コンパイラが動作している場合 -- コンポーネントは React DevTools で「Memo ✨」バッジを表示 +- コンポーネントは React DevTools で "Memo ✨" バッジを表示 - 高コストな計算が自動的にメモ化される - 手動の `useMemo` は不要 ### ビルド出力の確認 {/*check-build-output*/} -また、ビルド出力を確認することでコンパイラが動作していることを確認できます。コンパイルされたコードには、コンパイラが自動的に追加する自動メモ化ロジックを含めます。 +また、ビルド出力を確認することでもコンパイラが動作していることを確認できます。コンパイルされたコードには、コンパイラが自動的に追加する自動メモ化ロジックが含まれています。 ```js import { c as _c } from "react/compiler-runtime"; diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 4e72cd264..8baaef74a 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -18,11 +18,11 @@ React Compiler は、React アプリを自動的に最適化する新しいビ ## React Compiler の機能 {/*what-does-react-compiler-do*/} -React Compiler は、ビルド時に React アプリケーションを自動的に最適化します。React は最適化なしでも十分に高速ですが、アプリの応答性を保つために、コンポーネントや値を手動でメモ化する必要がある場合があります。このメモ化は面倒で、間違いやすく、コードのメンテナンス性を損ねます。React Compiler はこの最適化を自動的に行い、開発者は機能開発に集中できるようになります。 +React Compiler は、ビルド時に React アプリケーションを自動的に最適化します。React は最適化なしでも大抵は十分に高速ですが、アプリの応答性を保つために、コンポーネントや値を手動でメモ化する必要がある場合があります。このようなメモ化は面倒で、間違いやすく、メンテナンスすべきコード量を増加させます。React Compiler はこの最適化を自動的に行って認知負荷を軽減することで、開発者が機能開発に集中できるようにしてくれます。 ### React Compiler を使用しない場合 {/*before-react-compiler*/} -再レンダーを最適化するためにコンポーネントや値をメモ化する必要があります。 +コンパイラを使用しない場合、再レンダーを最適化するためにコンポーネントや値を手作業でメモ化する必要があります。 ```js import { useMemo, useCallback, memo } from 'react'; @@ -63,7 +63,7 @@ React Compiler は、アロー関数の使用の有無にかかわらず、こ ### React Compiler を使用する場合 {/*after-react-compiler*/} -メモ化なしで同じコードを書くことができます。 +React Compiler を使うことで、手動によるメモ化なしで同じコードを書くことができます。 ```js function ExpensiveComponent({ data, onClick }) { @@ -85,7 +85,7 @@ function ExpensiveComponent({ data, onClick }) { *[React Compiler Playground でこの例を確認](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)* -React Compiler は最適なメモ化を自動で適用し、必要なときだけ再レンダーされるようにします。 +React Compiler は最適なメモ化を自動で適用し、アプリが必要なときだけ再レンダーされるようにします。 #### React Compiler はどのようなメモ化を行うのか？ {/*what-kind-of-memoization-does-react-compiler-add*/} @@ -99,7 +99,7 @@ React Compiler の自動メモ化は主に**更新パフォーマンスの向上 #### 再レンダーの最適化 {/*optimizing-re-renders*/} -React では、UI を現在の state（具体的には props、state、context）の関数として表現できます。現在の実装では、コンポーネントの state が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネント *そのすべての子要素* を再レンダーします。例えば、以下の例では、`` の state が変更されるたびに `` が再レンダーされます。 +React では、UI を現在の状態（具体的には props、state、context）の関数として表現できます。現在の実装では、コンポーネントの状態が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネントに加えて*そのすべての子要素*を再レンダーします。例えば、以下の例では、`` の状態が変更されるたびに `` が再レンダーされます。 ```javascript function FriendList({ friends }) { @@ -120,11 +120,11 @@ function FriendList({ friends }) { ``` [*React Compiler Playground でこの例を確認*](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA) -React Compiler はメモ化と同等の処理を自動的に適用し、state が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ (fine-grained reactivity) と呼ばれることもあります。上記の例では、React Compiler は `friends` が変更されても `` の返り値を再利用できると判断し、この JSX の再作成 *と* カウントの変更による `` の再レンダーを回避できます。 +React Compiler はメモ化と同等の処理を自動的に適用し、状態が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ (fine-grained reactivity) と呼ばれることもあります。上記の例では、React Compiler は `friends` が変更されても個々の `` の返り値を再利用できると判断し、この JSX の再作成 *と* カウントの変更による `` の再レンダーを回避できます。 #### 高コストな計算もメモ化される {/*expensive-calculations-also-get-memoized*/} -React Compiler は、レンダー中に使用される高コストな計算も自動的にメモ化できます： +React Compiler は、レンダー中に使用される高コストな計算も自動的にメモ化できます。 ```js // **Not** memoized by React Compiler, since this is not a component or hook @@ -144,12 +144,12 @@ function TableContainer({ items }) { - React Compiler は React コンポーネントとフックのみをメモ化し、すべての関数をメモ化するわけではない - React Compiler のメモ化は複数のコンポーネントやフック間で共有されない -そのため、`expensivelyProcessAReallyLargeArrayOfObjects` が多くの異なるコンポーネントで使用される場合、同じ入力が渡されたとしても、その高コストな計算が繰り返し実行されます。コードの修正を行う前に、[プロファイリング](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) を行って、本当にそれほど高コストかどうかを確認することをお勧めします。 +そのため、`expensivelyProcessAReallyLargeArrayOfObjects` が多くの異なるコンポーネントで使用される場合、まったく同じ入力が渡されたとしても、その高コストな計算が繰り返し実行されてしまいます。コードをより複雑にする前に、[プロファイリング](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)を行って、本当にそれほど高コストかどうかを確認することをお勧めします。 ## コンパイラを試すべきか？ {/*should-i-try-out-the-compiler*/} -すべての方に React Compiler の使用を開始することをお勧めします。ココンパイラは現在は任意機能ですが、将来的には一部の機能を完全に動作させるためにコンパイラが必要になる可能性があります。 +すべての方に React Compiler の使用を開始することをお勧めします。コンパイラは現在は React の任意機能ですが、将来的には一部の機能を完全に動作させるためにコンパイラが必要になる可能性があります。 ### 安全に使用できるか？ {/*is-it-safe-to-use*/} @@ -157,11 +157,11 @@ React Compiler は現在安定板であり、本番環境で広範囲にテス ## どのビルドツールがサポートされているか？ {/*what-build-tools-are-supported*/} -React Compiler は [いくつかのビルドツール](/learn/react-compiler/installation) で利用できます。具体的には Babel、Vite、Metro、Rsbuild などが含まれます。 +React Compiler は[複数のビルドツール](/learn/react-compiler/installation)で利用できます。具体的には Babel、Vite、Metro、Rsbuild などが含まれます。 -React Compiler は主に、コアコンパイラを囲む軽量な Babel プラグインラッパーです。これは Babel 自体から分離されるように設計されています。コンパイラの最初の安定版は主に Babel プラグインとして残りますが、swc と [oxc](https://github.com/oxc-project/oxc/issues/10048) チームと協力して、React Compiler のファーストクラスサポートを構築しており、将来的にビルドパイプラインに Babel を追加する必要がなくなります。 +React Compiler は本質的に、コアコンパイラを軽量な Babel プラグインでラップしたものです。コアコンパイラは Babel 自体から分離して設計されています。コンパイラの最初の安定版は主に Babel プラグインとなりますが、swc と [oxc](https://github.com/oxc-project/oxc/issues/10048) チームと協力して、React Compiler のファーストクラスサポートを構築しており、将来的にはビルドパイプラインに Babel を再追加する必要がなくなる予定です。 -Next.js を使用しているユーザは、[v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) 以降のバージョンを利用することで、SWC 経由（swc‑invoked）の React Compiler を有効化できます。 +Next.js を使用しているユーザは、[v15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) 以降のバージョンを利用することで、SWC 経由での React Compiler の利用を有効化できます。 ## useMemo、useCallback、React.memo をどう扱うべきか？ {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} From 479b32664d5890cc9180cd3282806fcde14b0f13 Mon Sep 17 00:00:00 2001 From: kenji-arata <121594669+kenji-arata@users.noreply.github.com> Date: Sat, 25 Oct 2025 22:30:08 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 前後の文章の表現と齟齬がある箇所と、 不明瞭な補足文言になっている箇所の表現を修正。 Co-authored-by: honey32 --- src/content/learn/react-compiler/debugging.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md index 5b8c54e68..80a39914e 100644 --- a/src/content/learn/react-compiler/debugging.md +++ b/src/content/learn/react-compiler/debugging.md @@ -34,7 +34,7 @@ React Compiler がアプリケーションの不具合を引き起こす代表 これが発生する一般的なシナリオは以下のようなものです。 - **参照同一性に依存したエフェクト** - エフェクトが、複数のレンダー間でオブジェクトや配列が同じ参照を保つことに依存している場合 -- **参照の同一性を仮定した依存配列** - 依存配列が不安定だと、エフェクトの過剰発火や無限ループを引き起こす +- **参照の同一性を仮定した依存配列** - 依存値が不安定で、エフェクトの過剰発火や無限ループを引き起こしている場合 - **参照同一性のチェックを条件にしたロジック** - キャッシュや最適化のために参照同一性のチェックを行っている場合 ## デバッグ手順 {/*debugging-workflow*/} @@ -69,7 +69,7 @@ function ProblematicComponent() { ### 2. 段階的な問題の修正 {/*fix-issues-step-by-step*/} -1. 根本原因を特定する（大抵は動作がメモ化の存在に依存しているため） +1. 根本原因を特定する（大抵は動作がメモ化の存在に依存していることが原因） 2. 修正のたびにテストを実施する 3. 修正したら `"use no memo"` を削除する 4. React DevTools でコンポーネントに ✨ バッジが表示されることを確認する