React CompilerのReference記事のconfigurationセクションを翻訳

Author: kenji-arata

src/content/reference/react-compiler/compilationMode.md

@@ -4,7 +4,7 @@ title: compilationMode
 
 <Intro>
 
-The `compilationMode` option controls how the React Compiler selects which functions to compile.
+`compilationMode` オプションは、React Compiler がコンパイル対象の関数をどのように選択するか制御します。
 
 </Intro>
 
@@ -18,56 +18,56 @@ The `compilationMode` option controls how the React Compiler selects which funct
 
 ---
 
-## Reference {/*reference*/}
+## リファレンス {/*reference*/}
 
 ### `compilationMode` {/*compilationmode*/}
 
-Controls the strategy for determining which functions the React Compiler will optimize.
+React Compiler が最適化する関数を決定する方法を制御します。
 
 #### Type {/*type*/}
 
 ```
 'infer' | 'syntax' | 'annotation' | 'all'
 ```
 
-#### Default value {/*default-value*/}
+#### デフォルト値 {/*default-value*/}
 
 `'infer'`
 
 #### Options {/*options*/}
 
-- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
-  - Functions explicitly annotated with `"use memo"` directive
-  - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
+- **`'infer'`**（デフォルト）：コンパイラは高度なヒューリスティックを使用して React コンポーネントとフックを識別します。
+  - `"use memo"` ディレクティブで明示的に注釈された関数
+  - コンポーネント（パスカルケース）やフック（`use` プレフィックス）のように命名され、かつ JSX を作成または他のフックを呼び出す関数
 
-- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
+- **`'annotation'`**： `"use memo"` ディレクティブで明示的にマークされた関数のみをコンパイルします。段階的導入に最適です。
 
-- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax.
+- **`'syntax'`**： Flow の [component](https://flow.org/en/docs/react/component-syntax/) および [hook](https://flow.org/en/docs/react/hook-syntax/) 構文を使用するコンポーネントとフックのみをコンパイルします。
 
-- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
+- **`'all'`**：すべてのトップレベル関数をコンパイルします。非 React 関数もコンパイルする可能性があるため推奨されません。
 
-#### Caveats {/*caveats*/}
+#### 注意点 {/*caveats*/}
 
-- The `'infer'` mode requires functions to follow React naming conventions to be detected
-- Using `'all'` mode may negatively impact performance by compiling utility functions
-- The `'syntax'` mode requires Flow and won't work with TypeScript
-- Regardless of mode, functions with `"use no memo"` directive are always skipped
+- `'infer'` モードでは、関数が検出されるために React の命名規則に従う必要があります。
+- `'all'` モードを使用すると、ユーティリティ関数をコンパイルすることでパフォーマンスに悪影響を与える可能性があります。
+- `'syntax'` モードでは Flow が必要で、TypeScript では動作しません。
+- モードに関係なく、`"use no memo"` ディレクティブを持つ関数は常にスキップされます。
 
 ---
 
-## Usage {/*usage*/}
+## 使用法 {/*usage*/}
 
-### Default inference mode {/*default-inference-mode*/}
+### デフォルト推論モード {/*default-inference-mode*/}
 
-The default `'infer'` mode works well for most codebases that follow React conventions:
+デフォルトの `'infer'` モードは、React の慣例に従う大抵のコードベースでうまく動作します。
 
 ```js
 {
   compilationMode: 'infer'
 }
 ```
 
-With this mode, these functions will be compiled:
+このモードでは、以下の関数がコンパイルされます。
 
 ```js
 // ✅ Compiled: Named like a component + returns JSX
@@ -93,17 +93,17 @@ function calculateTotal(items) {
 }
 ```
 
-### Incremental adoption with annotation mode {/*incremental-adoption*/}
+### 注釈を使用した段階的な導入 {/*incremental-adoption*/}
 
-For gradual migration, use `'annotation'` mode to only compile marked functions:
+段階的な移行では、マークされた関数のみをコンパイルするために `'annotation'` モードを使用してください。
 
 ```js
 {
   compilationMode: 'annotation'
 }
 ```
 
-Then explicitly mark functions to compile:
+次に、コンパイルする関数を明示的にマークします。
 
 ```js
 // Only this function will be compiled
@@ -124,17 +124,17 @@ function NormalComponent(props) {
 }
 ```
 
-### Using Flow syntax mode {/*flow-syntax-mode*/}
+### Flow syntax モードの使用方法 {/*flow-syntax-mode*/}
 
-If your codebase uses Flow instead of TypeScript:
+コードベースで TypeScript の代わりに Flow を使用している場合は、本セクションを参照ください。
 
 ```js
 {
   compilationMode: 'syntax'
 }
 ```
 
-Then use Flow's component syntax:
+次に、Flow のコンポーネント構文を使用します。
 
 ```js
 // Compiled: Flow component syntax
@@ -154,9 +154,9 @@ function helper(data) {
 }
 ```
 
-### Opting out specific functions {/*opting-out*/}
+### 特定の関数のオプトアウト {/*opting-out*/}
 
-Regardless of compilation mode, use `"use no memo"` to skip compilation:
+コンパイルモードに関係なく、`"use no memo"` を使用してコンパイルをスキップすることができます。
 
 ```js
 function ComponentWithSideEffects() {
@@ -171,11 +171,11 @@ function ComponentWithSideEffects() {
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## トラブルシューティング {/*troubleshooting*/}
 
-### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
+### infer モードでコンポーネントがコンパイルされない場合 {/*component-not-compiled-infer*/}
 
-In `'infer'` mode, ensure your component follows React conventions:
+`'infer'` モードでは、コンポーネントが React の慣例に従っていることを確認してください。
 
 ```js
 // ❌ Won't be compiled: lowercase name

src/content/reference/react-compiler/configuration.md

@@ -1,16 +1,16 @@
 ---
-title: Configuration
+title: 設定
 ---
 
 <Intro>
 
-This page lists all configuration options available in React Compiler.
+このページでは、React Compiler で利用可能な設定オプションをすべてリストアップしています。
 
 </Intro>
 
 <Note>
 
-For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options.
+ほとんどのアプリでは、デフォルトの設定で問題なく動作します。特別な要件がある場合は、後述する詳細な設定を利用できます。
 
 </Note>
 
@@ -29,11 +29,11 @@ module.exports = {
 
 ---
 
-## Compilation Control {/*compilation-control*/}
+## コンパイル制御 {/*compilation-control*/}
 
-These options control *what* the compiler optimizes and *how* it selects components and hooks to compile.
+これらのオプションは、コンパイラが*何を*最適化し、*どのように*コンポーネントとフックを選択してコンパイルするかを制御します。
 
-* [`compilationMode`](/reference/react-compiler/compilationMode) controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection).
+* [`compilationMode`](/reference/react-compiler/compilationMode) は、コンパイルする関数を選択する方法を制御します。（例：すべての関数、注釈付きのもののみ、インテリジェント検出など）
 
 ```js
 {
@@ -43,11 +43,11 @@ These options control *what* the compiler optimizes and *how* it selects compone
 
 ---
 
-## Version Compatibility {/*version-compatibility*/}
+## バージョン互換性 {/*version-compatibility*/}
 
-React version configuration ensures the compiler generates code compatible with your React version.
+React のバージョン設定により、コンパイラが使用中の React バージョンと互換性のあるコードが生成されることが保証されます。
 
-[`target`](/reference/react-compiler/target) specifies which React version you're using (17, 18, or 19).
+[`target`](/reference/react-compiler/target) は、使用中の React バージョン（17、18、19）を指定します。
 
 ```js
 // For React 18 projects
@@ -58,11 +58,11 @@ React version configuration ensures the compiler generates code compatible with
 
 ---
 
-## Error Handling {/*error-handling*/}
+## エラーハンドリング {/*error-handling*/}
 
-These options control how the compiler responds to code that doesn't follow the [Rules of React](/reference/rules).
+これらのオプションは、コンパイラが [Rules of React](/reference/rules) に従わないコードに対し、どのように応答するか制御します。
 
-[`panicThreshold`](/reference/react-compiler/panicThreshold) determines whether to fail the build or skip problematic components.
+[`panicThreshold`](/reference/react-compiler/panicThreshold) は、ビルドを失敗させるか、問題のあるコンポーネントをスキップするかを決定します。
 
 ```js
 // Recommended for production
@@ -73,11 +73,11 @@ These options control how the compiler responds to code that doesn't follow the
 
 ---
 
-## Debugging {/*debugging*/}
+## デバック {/*debugging*/}
 
-Logging and analysis options help you understand what the compiler is doing.
+ログと解析オプションは、コンパイラが何を行っているのか理解するのに役立ちます。
 
-[`logger`](/reference/react-compiler/logger) provides custom logging for compilation events.
+[`logger`](/reference/react-compiler/logger) は、コンパイルイベントのカスタムログを提供します。
 
 ```js
 {
@@ -93,11 +93,11 @@ Logging and analysis options help you understand what the compiler is doing.
 
 ---
 
-## Feature Flags {/*feature-flags*/}
+## フィーチャーフラグ {/*feature-flags*/}
 
-Conditional compilation lets you control when optimized code is used.
+条件付きコンパイルにより、最適化されたコードがいつ使用されるか制御することができます。
 
-[`gating`](/reference/react-compiler/gating) enables runtime feature flags for A/B testing or gradual rollouts.
+[`gating`](/reference/react-compiler/gating) は、A/B テストや段階的ロールアウトのためのランタイムフィーチャーフラグを有効にします。
 
 ```js
 {
@@ -110,11 +110,11 @@ Conditional compilation lets you control when optimized code is used.
 
 ---
 
-## Common Configuration Patterns {/*common-patterns*/}
+## 一般的な設定パターン {/*common-patterns*/}
 
-### Default configuration {/*default-configuration*/}
+### デフォルト設定 {/*default-configuration*/}
 
-For most React 19 applications, the compiler works without configuration:
+ほとんどの React 19 アプリケーションで、コンパイラは設定なしで動作します。
 
 ```js
 // babel.config.js
@@ -125,9 +125,9 @@ module.exports = {
 };
 ```
 
-### React 17/18 projects {/*react-17-18*/}
+### React 17/18 プロジェクト {/*react-17-18*/}
 
-Older React versions need the runtime package and target configuration:
+古い React バージョンでは、ランタイムパッケージとターゲット設定が必要です。
 
 ```bash
 npm install react-compiler-runtime@latest
@@ -139,9 +139,9 @@ npm install react-compiler-runtime@latest
 }
 ```
 
-### Incremental adoption {/*incremental-adoption*/}
+### 段階的な導入 {/*incremental-adoption*/}
 
-Start with specific directories and expand gradually:
+特定のディレクトリから始めて、段階的に拡張することができます。
 
 ```js
 {

src/content/reference/react-compiler/gating.md

@@ -4,7 +4,7 @@ title: gating
 
 <Intro>
 
-The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime.
+`gating` オプションは条件付きコンパイルを有効にし、最適化されたコードがランタイムでいつ使用されるか制御することができます。
 
 </Intro>
 
@@ -21,11 +21,11 @@ The `gating` option enables conditional compilation, allowing you to control whe
 
 ---
 
-## Reference {/*reference*/}
+## リファレンス {/*reference*/}
 
 ### `gating` {/*gating*/}
 
-Configures runtime feature flag gating for compiled functions.
+コンパイルされた関数に対する、ランタイムのフィーチャーフラグによる制御を設定します。
 
 #### Type {/*type*/}
 
@@ -36,28 +36,28 @@ Configures runtime feature flag gating for compiled functions.
 } | null
 ```
 
-#### Default value {/*default-value*/}
+#### デフォルト値 {/*default-value*/}
 
 `null`
 
 #### Properties {/*properties*/}
 
-- **`source`**: Module path to import the feature flag from
-- **`importSpecifierName`**: Name of the exported function to import
+- **`source`**：フィーチャーフラグをインポートするモジュールパス
+- **`importSpecifierName`**：インポートするエクスポートされた関数の名前
 
-#### Caveats {/*caveats*/}
+#### 注意点 {/*caveats*/}
 
-- The gating function must return a boolean
-- Both compiled and original versions increase bundle size
-- The import is added to every file with compiled functions
+- gating 関数は boolean を返す必要があります。
+- コンパイル済みバージョンと元のバージョンの両方を含めるため、バンドルサイズが増加します。
+- コンパイルされた関数を含むすべてのファイルでインポートされます。
 
 ---
 
-## Usage {/*usage*/}
+## 使用法 {/*usage*/}
 
-### Basic feature flag setup {/*basic-setup*/}
+### 基本的なセットアップ {/*basic-setup*/}
 
-1. Create a feature flag module:
+1. フィーチャーフラグモジュールを作成します。
 
 ```js
 // src/utils/feature-flags.js
@@ -67,7 +67,7 @@ export function shouldUseCompiler() {
 }
 ```
 
-2. Configure the compiler:
+2. コンパイラを設定します。
 
 ```js
 {
@@ -78,7 +78,7 @@ export function shouldUseCompiler() {
 }
 ```
 
-3. The compiler generates gated code:
+3. コンパイラは gated コードを生成します。
 
 ```js
 // Input
@@ -94,15 +94,15 @@ const Button = shouldUseCompiler()
   : function Button_original(props) { /* original version */ };
 ```
 
-Note that the gating function is evaluated once at module time, so once the JS bundle has been parsed and evaluated the choice of component stays static for the rest of the browser session.
+gating 関数はモジュール時に一度だけ評価されます。そのため JS バンドルが解析・評価されると、コンポーネントの選択はブラウザセッションの残りの期間、静的に維持されるので注意してください。
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## トラブルシューティング {/*troubleshooting*/}
 
-### Feature flag not working {/*flag-not-working*/}
+### フィーチャーフラグが動作しない場合 {/*flag-not-working*/}
 
-Verify your flag module exports the correct function:
+フラグモジュールが正しい関数をエクスポートしているか確認してください。
 
 ```js
 // ❌ Wrong: Default export
@@ -116,9 +116,9 @@ export function shouldUseCompiler() {
 }
 ```
 
-### Import errors {/*import-errors*/}
+### インポートエラーが発生する場合 {/*import-errors*/}
 
-Ensure the source path is correct:
+ソースのパスが正しいことを確認してください。
 
 ```js
 // ❌ Wrong: Relative to babel.config.js