From 261ce34149627df3809fdd944d5a421cac66b4c4 Mon Sep 17 00:00:00 2001 From: kenji-arata Date: Sun, 26 Oct 2025 12:40:08 +0900 Subject: [PATCH 1/6] =?UTF-8?q?React=20Compiler=E3=81=AEReference=E8=A8=98?= =?UTF-8?q?=E4=BA=8B=E3=81=AEconfiguration=E3=82=BB=E3=82=AF=E3=82=B7?= =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=82=92=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-compiler/compilationMode.md | 60 ++++++++-------- .../reference/react-compiler/configuration.md | 50 ++++++------- .../reference/react-compiler/gating.md | 42 +++++------ .../reference/react-compiler/logger.md | 40 +++++------ .../react-compiler/panicThreshold.md | 46 ++++++------ .../reference/react-compiler/target.md | 72 +++++++++---------- src/sidebarHome.json | 2 +- src/sidebarReference.json | 2 +- 8 files changed, 157 insertions(+), 157 deletions(-) diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md index 5513d1c6a..543b2ed6c 100644 --- a/src/content/reference/react-compiler/compilationMode.md +++ b/src/content/reference/react-compiler/compilationMode.md @@ -4,7 +4,7 @@ title: compilationMode -The `compilationMode` option controls how the React Compiler selects which functions to compile. +`compilationMode` オプションは、React Compiler がコンパイル対象の関数をどのように選択するか制御します。 @@ -18,11 +18,11 @@ 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*/} @@ -30,36 +30,36 @@ Controls the strategy for determining which functions the React Compiler will op '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 { @@ -67,7 +67,7 @@ The default `'infer'` mode works well for most codebases that follow React conve } ``` -With this mode, these functions will be compiled: +このモードでは、以下の関数がコンパイルされます。 ```js // ✅ Compiled: Named like a component + returns JSX @@ -93,9 +93,9 @@ 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 { @@ -103,7 +103,7 @@ For gradual migration, use `'annotation'` mode to only compile marked functions: } ``` -Then explicitly mark functions to compile: +次に、コンパイルする関数を明示的にマークします。 ```js // Only this function will be compiled @@ -124,9 +124,9 @@ 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 { @@ -134,7 +134,7 @@ If your codebase uses Flow instead of TypeScript: } ``` -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 diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md index ec9b27e6f..b1a8e628a 100644 --- a/src/content/reference/react-compiler/configuration.md +++ b/src/content/reference/react-compiler/configuration.md @@ -1,16 +1,16 @@ --- -title: Configuration +title: 設定 --- -This page lists all configuration options available in React Compiler. +このページでは、React Compiler で利用可能な設定オプションをすべてリストアップしています。 -For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options. +ほとんどのアプリでは、デフォルトの設定で問題なく動作します。特別な要件がある場合は、後述する詳細な設定を利用できます。 @@ -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 { diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md index 479506af3..976d63831 100644 --- a/src/content/reference/react-compiler/gating.md +++ b/src/content/reference/react-compiler/gating.md @@ -4,7 +4,7 @@ title: gating -The `gating` option enables conditional compilation, allowing you to control when optimized code is used at runtime. +`gating` オプションは条件付きコンパイルを有効にし、最適化されたコードがランタイムでいつ使用されるか制御することができます。 @@ -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 diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md index 41e2a1da0..3fbcf166d 100644 --- a/src/content/reference/react-compiler/logger.md +++ b/src/content/reference/react-compiler/logger.md @@ -4,7 +4,7 @@ title: logger -The `logger` option provides custom logging for React Compiler events during compilation. +`logger` オプションは、コンパイル中の React Compiler イベントのカスタムログを提供します。 @@ -22,11 +22,11 @@ The `logger` option provides custom logging for React Compiler events during com --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `logger` {/*logger*/} -Configures custom logging to track compiler behavior and debug issues. +コンパイラの動作を追跡し、エラーをデバッグするためのカスタムログを設定します。 #### Type {/*type*/} @@ -36,35 +36,35 @@ Configures custom logging to track compiler behavior and debug issues. } | null ``` -#### Default value {/*default-value*/} +#### デフォルト値 {/*default-value*/} `null` #### Methods {/*methods*/} -- **`logEvent`**: Called for each compiler event with the filename and event details +- **`logEvent`**: 各コンパイライベントに対して、ファイル名とイベント詳細と共に呼び出されます。 -#### Event types {/*event-types*/} +#### イベントタイプ {/*event-types*/} -- **`CompileSuccess`**: Function successfully compiled -- **`CompileError`**: Function skipped due to errors -- **`CompileDiagnostic`**: Non-fatal diagnostic information -- **`CompileSkip`**: Function skipped for other reasons -- **`PipelineError`**: Unexpected compilation error -- **`Timing`**: Performance timing information +- **`CompileSuccess`**： 関数が正常にコンパイルされた +- **`CompileError`**：エラーにより関数がスキップされた +- **`CompileDiagnostic`**：致命的でない診断情報 +- **`CompileSkip`**：その他の理由で関数がスキップされた +- **`PipelineError`**：予期しないコンパイルエラー +- **`Timing`**：パフォーマンスの測定情報 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -- Event structure may change between versions -- Large codebases generate many log entries +- イベントの構造はバージョン間で変更される可能性があります。 +- 大きなコードベースは多くのログエントリを生成します。 --- -## Usage {/*usage*/} +## 使用方法 {/*usage*/} -### Basic logging {/*basic-logging*/} +### 基本的なログ {/*basic-logging*/} -Track compilation success and failures: +コンパイルの成功と失敗を追跡します。 ```js { @@ -86,9 +86,9 @@ Track compilation success and failures: } ``` -### Detailed error logging {/*detailed-error-logging*/} +### 詳細なエラーログ {/*detailed-error-logging*/} -Get specific information about compilation failures: +コンパイル失敗に関する詳細な情報を取得します。 ```js { diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md index e20f5c0c5..172a54771 100644 --- a/src/content/reference/react-compiler/panicThreshold.md +++ b/src/content/reference/react-compiler/panicThreshold.md @@ -4,7 +4,7 @@ title: panicThreshold -The `panicThreshold` option controls how the React Compiler handles errors during compilation. +`panicThreshold` オプションは、コンパイル時のエラーを React Compiler がどのように処理するかを制御します。 @@ -18,11 +18,11 @@ The `panicThreshold` option controls how the React Compiler handles errors durin --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `panicThreshold` {/*panicthreshold*/} -Determines whether compilation errors should fail the build or skip optimization. +コンパイルエラーでビルドを失敗させるか、最適化をスキップするかを決定します。 #### Type {/*type*/} @@ -30,30 +30,30 @@ Determines whether compilation errors should fail the build or skip optimization 'none' | 'critical_errors' | 'all_errors' ``` -#### Default value {/*default-value*/} +#### デフォルト値 {/*default-value*/} `'none'` -#### Options {/*options*/} +#### オプション {/*options*/} -- **`'none'`** (default, recommended): Skip components that can't be compiled and continue building -- **`'critical_errors'`**: Fail the build only on critical compiler errors -- **`'all_errors'`**: Fail the build on any compiler diagnostic +- **`'none'`**（デフォルト、推奨）：コンパイルできないコンポーネントをスキップしてビルドを継続します。 +- **`'critical_errors'`**：クリティカルなコンパイラエラーの場合のみビルドを失敗します。 +- **`'all_errors'`**：コンパイラの診断情報があればビルドを失敗します。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -- Production builds should always use `'none'` -- Build failures prevent your application from building -- The compiler automatically detects and skips problematic code with `'none'` -- Higher thresholds are only useful during development for debugging +- 本番ビルドでは常に `'none'` を使用してください。 +- ビルドの失敗により、アプリケーションのビルドが妨げられます。 +- コンパイラは `'none'` で問題のあるコードを自動的に検出してスキップします。 +- より高い閾値は開発中のデバッグ時にのみ有用です。 --- -## Usage {/*usage*/} +## 使用方法 {/*usage*/} -### Production configuration (recommended) {/*production-configuration*/} +### 本番設定（推奨） {/*production-configuration*/} -For production builds, always use `'none'`. This is the default value: +本番ビルドでは常に `'none'` を使用します。これがデフォルト値です。 ```js { @@ -61,15 +61,15 @@ For production builds, always use `'none'`. This is the default value: } ``` -This ensures: -- Your build never fails due to compiler issues -- Components that can't be optimized run normally -- Maximum components get optimized -- Stable production deployments +これにより以下が保証されます。 +- コンパイラの問題でビルドが失敗することはありません。 +- 最適化できないコンポーネントは通常通り実行されます。 +- 最大数のコンポーネントが最適化されます。 +- 安定した本番デプロイがされます。 -### Development debugging {/*development-debugging*/} +### 開発時のデバッグ {/*development-debugging*/} -Temporarily use stricter thresholds to find issues: +問題を見つけるために、一時的により厳しい閾値を使用します。 ```js const isDevelopment = process.env.NODE_ENV === 'development'; diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md index 8ccc4a6b1..f800886df 100644 --- a/src/content/reference/react-compiler/target.md +++ b/src/content/reference/react-compiler/target.md @@ -4,7 +4,7 @@ title: target -The `target` option specifies which React version the compiler should generate code for. +`target` オプションは、コンパイラがどの React バージョン向けにコードを生成するか指定します。 @@ -18,11 +18,11 @@ The `target` option specifies which React version the compiler should generate c --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `target` {/*target*/} -Configures the React version compatibility for the compiled output. +コンパイル出力の React バージョンの互換性を設定します。 #### Type {/*type*/} @@ -30,30 +30,30 @@ Configures the React version compatibility for the compiled output. '17' | '18' | '19' ``` -#### Default value {/*default-value*/} +#### デフォルト値 {/*default-value*/} `'19'` -#### Valid values {/*valid-values*/} +#### 有効な値 {/*valid-values*/} -- **`'19'`**: Target React 19 (default). No additional runtime required. -- **`'18'`**: Target React 18. Requires `react-compiler-runtime` package. -- **`'17'`**: Target React 17. Requires `react-compiler-runtime` package. +- **`'19'`**：React 19 が対象（デフォルト）。追加のランタイムパッケージは不要です。 +- **`'18'`**：React 18 が対象。`react-compiler-runtime` パッケージが必要です。 +- **`'17'`**：React 17 が対象。`react-compiler-runtime` パッケージが必要です。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -- Always use string values, not numbers (e.g., `'17'` not `17`) -- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`) -- React 19 includes built-in compiler runtime APIs -- React 17 and 18 require installing `react-compiler-runtime@latest` +- 数値ではなく文字列値を使用してください。（例： `17` ではなく `'17'` です） +- パッチバージョンを含めないでください。（例： `'18.2.0'`ではなく`'18'` です） +- React 19 にはビルトインのコンパイラランタイム API が含まれます。 +- React 17 と 18 では `react-compiler-runtime@latest` のインストールが必要です。 --- -## Usage {/*usage*/} +## 使用方法 {/*usage*/} -### Targeting React 19 (default) {/*targeting-react-19*/} +### React 19 が対象の場合（デフォルト） {/*targeting-react-19*/} -For React 19, no special configuration is needed: +React 19 では特別な設定は不要です。 ```js { @@ -61,24 +61,24 @@ For React 19, no special configuration is needed: } ``` -The compiler will use React 19's built-in runtime APIs: +コンパイラは React 19 のビルトインランタイム API を使用します。 ```js // Compiled output uses React 19's native APIs import { c as _c } from 'react/compiler-runtime'; ``` -### Targeting React 17 or 18 {/*targeting-react-17-or-18*/} +### React 17 または 18 が対象の場合 {/*targeting-react-17-or-18*/} -For React 17 and React 18 projects, you need two steps: +React 17 と React 18 のプロジェクトでは、2 つのステップが必要です。 -1. Install the runtime package: +1. ランタイムパッケージをインストールします。 ```bash npm install react-compiler-runtime@latest ``` -2. Configure the target: +2. 対象を設定します。 ```js // For React 18 @@ -92,7 +92,7 @@ npm install react-compiler-runtime@latest } ``` -The compiler will use the polyfill runtime for both versions: +コンパイラは両バージョンでポリフィルランタイムを使用します。 ```js // Compiled output uses the polyfill @@ -101,41 +101,41 @@ import { c as _c } from 'react-compiler-runtime'; --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### Runtime errors about missing compiler runtime {/*missing-runtime*/} +### コンパイラのランタイムが不足していることに関するランタイムエラー {/*missing-runtime*/} -If you see errors like "Cannot find module 'react/compiler-runtime'": +"Cannot find module 'react/compiler-runtime'" のようなエラーが表示される場合 -1. Check your React version: +1. React バージョンを確認してください。 ```bash npm why react ``` -2. If using React 17 or 18, install the runtime: +2. React 17 または 18 を使用している場合は、ランタイムをインストールしてください。 ```bash npm install react-compiler-runtime@latest ``` -3. Ensure your target matches your React version: +3. ターゲットが React バージョンと一致していることを確認してください。 ```js { target: '18' // Must match your React major version } ``` -### Runtime package not working {/*runtime-not-working*/} +### ランタイムパッケージが動作しない場合 {/*runtime-not-working*/} -Ensure the runtime package is: +ランタイムパッケージが以下を満たしていることを確認してください。 -1. Installed in your project (not globally) -2. Listed in your `package.json` dependencies -3. The correct version (`@latest` tag) -4. Not in `devDependencies` (it's needed at runtime) +1. プロジェクト内にインストールされていること。（グローバルではないこと） +2. `package.json` の依存関係に記載されていること。 +3. 正しいバージョンであること。（`@latest` タグ） +4. `devDependencies` に含まれていないこと。（ランタイムで必要です） -### Checking compiled output {/*checking-output*/} +### コンパイル済み出力の確認 {/*checking-output*/} -To verify the correct runtime is being used, note the different import (`react/compiler-runtime` for builtin, `react-compiler-runtime` standalone package for 17/18): +正しいランタイムが使用されていることを確認するには、異なるインポートに注目してください。（組み込み版は `react/compiler-runtime`、React 17/18 のスタンドアロンパッケージ版では `react-compiler-runtime`） ```js // For React 19 (built-in runtime) diff --git a/src/sidebarHome.json b/src/sidebarHome.json index 29be9f0ff..9243daf99 100644 --- a/src/sidebarHome.json +++ b/src/sidebarHome.json @@ -87,7 +87,7 @@ "sectionHeader": "REACT COMPILER API" }, { - "title": "Configuration", + "title": "設定", "path": "/reference/react-compiler/configuration" }, { diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 691daa29a..c14215b05 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -353,7 +353,7 @@ "sectionHeader": "React Compiler" }, { - "title": "Configuration", + "title": "設定", "path": "/reference/react-compiler/configuration", "routes": [ { From 4d240310a90bbbe56421c833d30955d8545a4278 Mon Sep 17 00:00:00 2001 From: kenji-arata <121594669+kenji-arata@users.noreply.github.com> Date: Mon, 3 Nov 2025 12:12:05 +0900 Subject: [PATCH 2/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: Soichiro Miki --- .../react-compiler/compilationMode.md | 18 +++++------ .../reference/react-compiler/configuration.md | 8 ++--- .../reference/react-compiler/gating.md | 14 ++++---- .../reference/react-compiler/logger.md | 8 ++--- .../react-compiler/panicThreshold.md | 16 +++++----- .../reference/react-compiler/target.md | 32 +++++++++---------- 6 files changed, 48 insertions(+), 48 deletions(-) diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md index 543b2ed6c..422717d9c 100644 --- a/src/content/reference/react-compiler/compilationMode.md +++ b/src/content/reference/react-compiler/compilationMode.md @@ -37,8 +37,8 @@ React Compiler が最適化する関数を決定する方法を制御します #### Options {/*options*/} - **`'infer'`**（デフォルト）：コンパイラは高度なヒューリスティックを使用して React コンポーネントとフックを識別します。 - - `"use memo"` ディレクティブで明示的に注釈された関数 - - コンポーネント（パスカルケース）やフック（`use` プレフィックス）のように命名され、かつ JSX を作成または他のフックを呼び出す関数 + - `"use memo"` ディレクティブで明示的にアノテーションされた関数 + - コンポーネント（パスカルケース）やフック（`use` プレフィックス）の規約で命名され、かつ、JSX の作成あるいは他のフックの呼び出しを行っている関数 - **`'annotation'`**： `"use memo"` ディレクティブで明示的にマークされた関数のみをコンパイルします。段階的導入に最適です。 @@ -49,7 +49,7 @@ React Compiler が最適化する関数を決定する方法を制御します #### 注意点 {/*caveats*/} - `'infer'` モードでは、関数が検出されるために React の命名規則に従う必要があります。 -- `'all'` モードを使用すると、ユーティリティ関数をコンパイルすることでパフォーマンスに悪影響を与える可能性があります。 +- `'all'` モードを使用すると、ユーティリティ関数がコンパイルされるためにパフォーマンスに悪影響を与える可能性があります。 - `'syntax'` モードでは Flow が必要で、TypeScript では動作しません。 - モードに関係なく、`"use no memo"` ディレクティブを持つ関数は常にスキップされます。 @@ -59,7 +59,7 @@ React Compiler が最適化する関数を決定する方法を制御します ### デフォルト推論モード {/*default-inference-mode*/} -デフォルトの `'infer'` モードは、React の慣例に従う大抵のコードベースでうまく動作します。 +デフォルトの `'infer'` モードは、React の慣習に従う大抵のコードベースでうまく動作します。 ```js { @@ -93,7 +93,7 @@ function calculateTotal(items) { } ``` -### 注釈を使用した段階的な導入 {/*incremental-adoption*/} +### アノテーションを使用した段階的な導入 {/*incremental-adoption*/} 段階的な移行では、マークされた関数のみをコンパイルするために `'annotation'` モードを使用してください。 @@ -103,7 +103,7 @@ function calculateTotal(items) { } ``` -次に、コンパイルする関数を明示的にマークします。 +その後に、コンパイルする関数を明示的にマークしていきます。 ```js // Only this function will be compiled @@ -126,7 +126,7 @@ function NormalComponent(props) { ### Flow syntax モードの使用方法 {/*flow-syntax-mode*/} -コードベースで TypeScript の代わりに Flow を使用している場合は、本セクションを参照ください。 +コードベースで TypeScript ではなく Flow を使用している場合は、以下のようにします。 ```js { @@ -173,9 +173,9 @@ function ComponentWithSideEffects() { ## トラブルシューティング {/*troubleshooting*/} -### infer モードでコンポーネントがコンパイルされない場合 {/*component-not-compiled-infer*/} +### infer モードでコンポーネントがコンパイルされない {/*component-not-compiled-infer*/} -`'infer'` モードでは、コンポーネントが React の慣例に従っていることを確認してください。 +`'infer'` モードでは、コンポーネントが React の慣習に従っていることを確認してください。 ```js // ❌ Won't be compiled: lowercase name diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md index b1a8e628a..f698b1b99 100644 --- a/src/content/reference/react-compiler/configuration.md +++ b/src/content/reference/react-compiler/configuration.md @@ -33,7 +33,7 @@ module.exports = { これらのオプションは、コンパイラが*何を*最適化し、*どのように*コンポーネントとフックを選択してコンパイルするかを制御します。 -* [`compilationMode`](/reference/react-compiler/compilationMode) は、コンパイルする関数を選択する方法を制御します。（例：すべての関数、注釈付きのもののみ、インテリジェント検出など） +* [`compilationMode`](/reference/react-compiler/compilationMode) は、コンパイルする関数を選択する方法を制御します（例：すべての関数、アノテーション付きのもののみ、インテリジェント検出など）。 ```js { @@ -45,7 +45,7 @@ module.exports = { ## バージョン互換性 {/*version-compatibility*/} -React のバージョン設定により、コンパイラが使用中の React バージョンと互換性のあるコードが生成されることが保証されます。 +React バージョンの設定により、使用中の React バージョンと互換性のあるコードをコンパイラが生成することが保証されます。 [`target`](/reference/react-compiler/target) は、使用中の React バージョン（17、18、19）を指定します。 @@ -60,7 +60,7 @@ React のバージョン設定により、コンパイラが使用中の React ## エラーハンドリング {/*error-handling*/} -これらのオプションは、コンパイラが [Rules of React](/reference/rules) に従わないコードに対し、どのように応答するか制御します。 +これらのオプションは、コンパイラが [React のルール](/reference/rules)に従わないコードをどのように処理するか制御します。 [`panicThreshold`](/reference/react-compiler/panicThreshold) は、ビルドを失敗させるか、問題のあるコンポーネントをスキップするかを決定します。 @@ -77,7 +77,7 @@ React のバージョン設定により、コンパイラが使用中の React ログと解析オプションは、コンパイラが何を行っているのか理解するのに役立ちます。 -[`logger`](/reference/react-compiler/logger) は、コンパイルイベントのカスタムログを提供します。 +[`logger`](/reference/react-compiler/logger) は、コンパイルイベントに対するカスタムのロギング手段を指定します。 ```js { diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md index 976d63831..24cce2f75 100644 --- a/src/content/reference/react-compiler/gating.md +++ b/src/content/reference/react-compiler/gating.md @@ -4,7 +4,7 @@ title: gating -`gating` オプションは条件付きコンパイルを有効にし、最適化されたコードがランタイムでいつ使用されるか制御することができます。 +`gating` オプションは条件付きコンパイルを有効にし、最適化されたコードがランタイムでいつ使用されるか制御できるようにします。 @@ -47,7 +47,7 @@ title: gating #### 注意点 {/*caveats*/} -- gating 関数は boolean を返す必要があります。 +- ゲーティング関数はブーリアンを返す必要があります。 - コンパイル済みバージョンと元のバージョンの両方を含めるため、バンドルサイズが増加します。 - コンパイルされた関数を含むすべてのファイルでインポートされます。 @@ -55,7 +55,7 @@ title: gating ## 使用法 {/*usage*/} -### 基本的なセットアップ {/*basic-setup*/} +### 基本的なフィーチャーフラグのセットアップ {/*basic-setup*/} 1. フィーチャーフラグモジュールを作成します。 @@ -78,7 +78,7 @@ export function shouldUseCompiler() { } ``` -3. コンパイラは gated コードを生成します。 +3. コンパイラがゲーティング済みのコードを生成します。 ```js // Input @@ -94,13 +94,13 @@ const Button = shouldUseCompiler() : function Button_original(props) { /* original version */ }; ``` -gating 関数はモジュール時に一度だけ評価されます。そのため JS バンドルが解析・評価されると、コンポーネントの選択はブラウザセッションの残りの期間、静的に維持されるので注意してください。 +ゲーティング関数はモジュール評価時に一度だけ評価されることに注意してください。JS バンドルがパース・評価された時点でコンポーネントの選択が固定され、ブラウザセッションが持続する間、静的に維持されます。 --- ## トラブルシューティング {/*troubleshooting*/} -### フィーチャーフラグが動作しない場合 {/*flag-not-working*/} +### フィーチャーフラグが動作しない {/*flag-not-working*/} フラグモジュールが正しい関数をエクスポートしているか確認してください。 @@ -116,7 +116,7 @@ export function shouldUseCompiler() { } ``` -### インポートエラーが発生する場合 {/*import-errors*/} +### インポートエラーが発生する {/*import-errors*/} ソースのパスが正しいことを確認してください。 diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md index 3fbcf166d..cc35e0222 100644 --- a/src/content/reference/react-compiler/logger.md +++ b/src/content/reference/react-compiler/logger.md @@ -4,7 +4,7 @@ title: logger -`logger` オプションは、コンパイル中の React Compiler イベントのカスタムログを提供します。 +`logger` オプションで、コンパイル時に起こる React Compiler のイベントに対するカスタムロガーを指定します。 @@ -26,7 +26,7 @@ title: logger ### `logger` {/*logger*/} -コンパイラの動作を追跡し、エラーをデバッグするためのカスタムログを設定します。 +コンパイラの動作を追跡しエラーをデバッグするための、カスタムのロギング方法を設定します。 #### Type {/*type*/} @@ -42,7 +42,7 @@ title: logger #### Methods {/*methods*/} -- **`logEvent`**: 各コンパイライベントに対して、ファイル名とイベント詳細と共に呼び出されます。 +- **`logEvent`**: 各コンパイライベントに対して、ファイル名およびイベント詳細を引数にして呼び出される。 #### イベントタイプ {/*event-types*/} @@ -60,7 +60,7 @@ title: logger --- -## 使用方法 {/*usage*/} +## 使用法 {/*usage*/} ### 基本的なログ {/*basic-logging*/} diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md index 172a54771..7b1db4795 100644 --- a/src/content/reference/react-compiler/panicThreshold.md +++ b/src/content/reference/react-compiler/panicThreshold.md @@ -34,22 +34,22 @@ title: panicThreshold `'none'` -#### オプション {/*options*/} +#### 指定可能な値 {/*options*/} -- **`'none'`**（デフォルト、推奨）：コンパイルできないコンポーネントをスキップしてビルドを継続します。 -- **`'critical_errors'`**：クリティカルなコンパイラエラーの場合のみビルドを失敗します。 -- **`'all_errors'`**：コンパイラの診断情報があればビルドを失敗します。 +- **`'none'`**（デフォルト、推奨）: コンパイルできないコンポーネントをスキップしてビルドを継続する。 +- **`'critical_errors'`**: クリティカルなコンパイラエラーの場合のみビルドを失敗させる。 +- **`'all_errors'`**: コンパイラの診断情報がある場合常にビルドを失敗させる。 #### 注意点 {/*caveats*/} - 本番ビルドでは常に `'none'` を使用してください。 -- ビルドの失敗により、アプリケーションのビルドが妨げられます。 -- コンパイラは `'none'` で問題のあるコードを自動的に検出してスキップします。 +- ビルドが失敗すると、アプリケーションのビルドも失敗します。 +- `'none'` の場合、コンパイラは問題のあるコードを自動的に検出してスキップします。 - より高い閾値は開発中のデバッグ時にのみ有用です。 --- -## 使用方法 {/*usage*/} +## 使用法 {/*usage*/} ### 本番設定（推奨） {/*production-configuration*/} @@ -65,7 +65,7 @@ title: panicThreshold - コンパイラの問題でビルドが失敗することはありません。 - 最適化できないコンポーネントは通常通り実行されます。 - 最大数のコンポーネントが最適化されます。 -- 安定した本番デプロイがされます。 +- 安定した本番デプロイが行われます。 ### 開発時のデバッグ {/*development-debugging*/} diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md index f800886df..685cf5736 100644 --- a/src/content/reference/react-compiler/target.md +++ b/src/content/reference/react-compiler/target.md @@ -36,22 +36,22 @@ title: target #### 有効な値 {/*valid-values*/} -- **`'19'`**：React 19 が対象（デフォルト）。追加のランタイムパッケージは不要です。 -- **`'18'`**：React 18 が対象。`react-compiler-runtime` パッケージが必要です。 -- **`'17'`**：React 17 が対象。`react-compiler-runtime` パッケージが必要です。 +- **`'19'`**：React 19 がターゲット（デフォルト）。追加のランタイムパッケージは不要です。 +- **`'18'`**：React 18 がターゲット。`react-compiler-runtime` パッケージが必要です。 +- **`'17'`**：React 17 がターゲット。`react-compiler-runtime` パッケージが必要です。 #### 注意点 {/*caveats*/} -- 数値ではなく文字列値を使用してください。（例： `17` ではなく `'17'` です） -- パッチバージョンを含めないでください。（例： `'18.2.0'`ではなく`'18'` です） -- React 19 にはビルトインのコンパイラランタイム API が含まれます。 +- 数値ではなく文字列値を使用してください。（例：`17` ではなく `'17'`） +- パッチバージョンを含めないでください。（例：`'18.2.0'` ではなく `'18'`） +- React 19 にはコンパイラランタイム API が組み込みで含まれています。 - React 17 と 18 では `react-compiler-runtime@latest` のインストールが必要です。 --- -## 使用方法 {/*usage*/} +## 使用法 {/*usage*/} -### React 19 が対象の場合（デフォルト） {/*targeting-react-19*/} +### React 19 がターゲットの場合（デフォルト） {/*targeting-react-19*/} React 19 では特別な設定は不要です。 @@ -61,7 +61,7 @@ React 19 では特別な設定は不要です。 } ``` -コンパイラは React 19 のビルトインランタイム API を使用します。 +コンパイラは React 19 組み込みのランタイム API を使用します。 ```js // Compiled output uses React 19's native APIs @@ -78,7 +78,7 @@ React 17 と React 18 のプロジェクトでは、2 つのステップが必 npm install react-compiler-runtime@latest ``` -2. 対象を設定します。 +2. ターゲットを設定します。 ```js // For React 18 @@ -105,7 +105,7 @@ import { c as _c } from 'react-compiler-runtime'; ### コンパイラのランタイムが不足していることに関するランタイムエラー {/*missing-runtime*/} -"Cannot find module 'react/compiler-runtime'" のようなエラーが表示される場合 +"Cannot find module 'react/compiler-runtime'" のようなエラーが表示される場合は以下のようにします。 1. React バージョンを確認してください。 ```bash @@ -124,18 +124,18 @@ import { c as _c } from 'react-compiler-runtime'; } ``` -### ランタイムパッケージが動作しない場合 {/*runtime-not-working*/} +### ランタイムパッケージが動作しない {/*runtime-not-working*/} ランタイムパッケージが以下を満たしていることを確認してください。 -1. プロジェクト内にインストールされていること。（グローバルではないこと） -2. `package.json` の依存関係に記載されていること。 +1. プロジェクト内にインストールされていること（グローバルではないこと）。 +2. `package.json` の依存ライブラリとして記載されていること。 3. 正しいバージョンであること。（`@latest` タグ） -4. `devDependencies` に含まれていないこと。（ランタイムで必要です） +4. `devDependencies` に含まれていないこと（ランタイム時に必要なため）。 ### コンパイル済み出力の確認 {/*checking-output*/} -正しいランタイムが使用されていることを確認するには、異なるインポートに注目してください。（組み込み版は `react/compiler-runtime`、React 17/18 のスタンドアロンパッケージ版では `react-compiler-runtime`） +正しくランタイムが使用されていることを確認するには、インポートが変わっていることに注目してください（組み込み版は `react/compiler-runtime`、React 17/18 のスタンドアロンパッケージ版では `react-compiler-runtime`）。 ```js // For React 19 (built-in runtime) From b79c4116e154ba6cc3f97b578f7c443f7e5fab74 Mon Sep 17 00:00:00 2001 From: kenji-arata Date: Mon, 3 Nov 2025 12:27:24 +0900 Subject: [PATCH 3/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 以下の2点について修正を行いました。 * 半角、全角コロンの扱い方を修正 * 訳抜け箇所の修正 --- .../reference/react-compiler/compilationMode.md | 12 ++++++------ src/content/reference/react-compiler/gating.md | 8 ++++---- src/content/reference/react-compiler/logger.md | 16 ++++++++-------- .../reference/react-compiler/panicThreshold.md | 2 +- src/content/reference/react-compiler/target.md | 8 ++++---- 5 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md index 422717d9c..024f2e50e 100644 --- a/src/content/reference/react-compiler/compilationMode.md +++ b/src/content/reference/react-compiler/compilationMode.md @@ -24,7 +24,7 @@ title: compilationMode React Compiler が最適化する関数を決定する方法を制御します。 -#### Type {/*type*/} +#### 型 {/*type*/} ``` 'infer' | 'syntax' | 'annotation' | 'all' @@ -34,17 +34,17 @@ React Compiler が最適化する関数を決定する方法を制御します `'infer'` -#### Options {/*options*/} +#### 指定可能な値 {/*options*/} -- **`'infer'`**（デフォルト）：コンパイラは高度なヒューリスティックを使用して React コンポーネントとフックを識別します。 +- **`'infer'`**（デフォルト）: コンパイラは高度なヒューリスティックを使用して React コンポーネントとフックを識別します。 - `"use memo"` ディレクティブで明示的にアノテーションされた関数 - コンポーネント（パスカルケース）やフック（`use` プレフィックス）の規約で命名され、かつ、JSX の作成あるいは他のフックの呼び出しを行っている関数 -- **`'annotation'`**： `"use memo"` ディレクティブで明示的にマークされた関数のみをコンパイルします。段階的導入に最適です。 +- **`'annotation'`**: `"use memo"` ディレクティブで明示的にマークされた関数のみをコンパイルします。段階的導入に最適です。 -- **`'syntax'`**： Flow の [component](https://flow.org/en/docs/react/component-syntax/) および [hook](https://flow.org/en/docs/react/hook-syntax/) 構文を使用するコンポーネントとフックのみをコンパイルします。 +- **`'syntax'`**: Flow の [component](https://flow.org/en/docs/react/component-syntax/) および [hook](https://flow.org/en/docs/react/hook-syntax/) 構文を使用するコンポーネントとフックのみをコンパイルします。 -- **`'all'`**：すべてのトップレベル関数をコンパイルします。非 React 関数もコンパイルする可能性があるため推奨されません。 +- **`'all'`**: すべてのトップレベル関数をコンパイルします。非 React 関数もコンパイルする可能性があるため推奨されません。 #### 注意点 {/*caveats*/} diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md index 24cce2f75..1792f347f 100644 --- a/src/content/reference/react-compiler/gating.md +++ b/src/content/reference/react-compiler/gating.md @@ -27,7 +27,7 @@ title: gating コンパイルされた関数に対する、ランタイムのフィーチャーフラグによる制御を設定します。 -#### Type {/*type*/} +#### 型 {/*type*/} ``` { @@ -40,10 +40,10 @@ title: gating `null` -#### Properties {/*properties*/} +#### プロパティ {/*properties*/} -- **`source`**：フィーチャーフラグをインポートするモジュールパス -- **`importSpecifierName`**：インポートするエクスポートされた関数の名前 +- **`source`**: フィーチャーフラグをインポートするモジュールパス +- **`importSpecifierName`**: インポートするエクスポートされた関数の名前 #### 注意点 {/*caveats*/} diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md index cc35e0222..8e3fad8d5 100644 --- a/src/content/reference/react-compiler/logger.md +++ b/src/content/reference/react-compiler/logger.md @@ -28,7 +28,7 @@ title: logger コンパイラの動作を追跡しエラーをデバッグするための、カスタムのロギング方法を設定します。 -#### Type {/*type*/} +#### 型 {/*type*/} ``` { @@ -40,18 +40,18 @@ title: logger `null` -#### Methods {/*methods*/} +#### メソッド {/*methods*/} - **`logEvent`**: 各コンパイライベントに対して、ファイル名およびイベント詳細を引数にして呼び出される。 #### イベントタイプ {/*event-types*/} -- **`CompileSuccess`**： 関数が正常にコンパイルされた -- **`CompileError`**：エラーにより関数がスキップされた -- **`CompileDiagnostic`**：致命的でない診断情報 -- **`CompileSkip`**：その他の理由で関数がスキップされた -- **`PipelineError`**：予期しないコンパイルエラー -- **`Timing`**：パフォーマンスの測定情報 +- **`CompileSuccess`**: 関数が正常にコンパイルされた +- **`CompileError`**: エラーにより関数がスキップされた +- **`CompileDiagnostic`**: 致命的でない診断情報 +- **`CompileSkip`**: その他の理由で関数がスキップされた +- **`PipelineError`**: 予期しないコンパイルエラー +- **`Timing`**: パフォーマンスの測定情報 #### 注意点 {/*caveats*/} diff --git a/src/content/reference/react-compiler/panicThreshold.md b/src/content/reference/react-compiler/panicThreshold.md index 7b1db4795..d15a1dea9 100644 --- a/src/content/reference/react-compiler/panicThreshold.md +++ b/src/content/reference/react-compiler/panicThreshold.md @@ -24,7 +24,7 @@ title: panicThreshold コンパイルエラーでビルドを失敗させるか、最適化をスキップするかを決定します。 -#### Type {/*type*/} +#### 型 {/*type*/} ``` 'none' | 'critical_errors' | 'all_errors' diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md index 685cf5736..8678f5c92 100644 --- a/src/content/reference/react-compiler/target.md +++ b/src/content/reference/react-compiler/target.md @@ -24,7 +24,7 @@ title: target コンパイル出力の React バージョンの互換性を設定します。 -#### Type {/*type*/} +#### 型 {/*type*/} ``` '17' | '18' | '19' @@ -36,9 +36,9 @@ title: target #### 有効な値 {/*valid-values*/} -- **`'19'`**：React 19 がターゲット（デフォルト）。追加のランタイムパッケージは不要です。 -- **`'18'`**：React 18 がターゲット。`react-compiler-runtime` パッケージが必要です。 -- **`'17'`**：React 17 がターゲット。`react-compiler-runtime` パッケージが必要です。 +- **`'19'`**: React 19 がターゲット（デフォルト）。追加のランタイムパッケージは不要です。 +- **`'18'`**: React 18 がターゲット。`react-compiler-runtime` パッケージが必要です。 +- **`'17'`**: React 17 がターゲット。`react-compiler-runtime` パッケージが必要です。 #### 注意点 {/*caveats*/} From 50904b5fea7f3ac4bc681d0f514f66746e988382 Mon Sep 17 00:00:00 2001 From: kenji-arata <121594669+kenji-arata@users.noreply.github.com> Date: Tue, 4 Nov 2025 22:52:06 +0900 Subject: [PATCH 4/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: Soichiro Miki --- src/content/reference/react-compiler/gating.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-compiler/gating.md b/src/content/reference/react-compiler/gating.md index 1792f347f..73b572461 100644 --- a/src/content/reference/react-compiler/gating.md +++ b/src/content/reference/react-compiler/gating.md @@ -43,13 +43,13 @@ title: gating #### プロパティ {/*properties*/} - **`source`**: フィーチャーフラグをインポートするモジュールパス -- **`importSpecifierName`**: インポートするエクスポートされた関数の名前 +- **`importSpecifierName`**: インポートするエクスポート済み関数の名前 #### 注意点 {/*caveats*/} - ゲーティング関数はブーリアンを返す必要があります。 - コンパイル済みバージョンと元のバージョンの両方を含めるため、バンドルサイズが増加します。 -- コンパイルされた関数を含むすべてのファイルでインポートされます。 +- コンパイルされた関数を含むすべてのファイルにインポート文が付加されます。 --- From dc532db58bfaea864959218d4e611547c977dd4d Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 4 Nov 2025 23:12:49 +0900 Subject: [PATCH 5/6] =?UTF-8?q?Fix=20typo:=20=E3=83=87=E3=83=90=E3=83=83?= =?UTF-8?q?=E3=82=AF=20=3D>=20=E3=83=87=E3=83=90=E3=83=83=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/content/reference/react-compiler/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md index f698b1b99..c3baf0e44 100644 --- a/src/content/reference/react-compiler/configuration.md +++ b/src/content/reference/react-compiler/configuration.md @@ -73,7 +73,7 @@ React バージョンの設定により、使用中の React バージョンと --- -## デバック {/*debugging*/} +## デバッグ {/*debugging*/} ログと解析オプションは、コンパイラが何を行っているのか理解するのに役立ちます。 From f15ef8d1310be85887ecc144e80be41829513351 Mon Sep 17 00:00:00 2001 From: kenji-arata <121594669+kenji-arata@users.noreply.github.com> Date: Wed, 5 Nov 2025 22:33:45 +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/reference/react-compiler/compilationMode.md | 2 +- src/content/reference/react-compiler/logger.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md index 024f2e50e..d12c98d11 100644 --- a/src/content/reference/react-compiler/compilationMode.md +++ b/src/content/reference/react-compiler/compilationMode.md @@ -93,7 +93,7 @@ function calculateTotal(items) { } ``` -### アノテーションを使用した段階的な導入 {/*incremental-adoption*/} +### アノテーションモードを使用した段階的な導入 {/*incremental-adoption*/} 段階的な移行では、マークされた関数のみをコンパイルするために `'annotation'` モードを使用してください。 diff --git a/src/content/reference/react-compiler/logger.md b/src/content/reference/react-compiler/logger.md index 8e3fad8d5..95b0230ef 100644 --- a/src/content/reference/react-compiler/logger.md +++ b/src/content/reference/react-compiler/logger.md @@ -56,7 +56,7 @@ title: logger #### 注意点 {/*caveats*/} - イベントの構造はバージョン間で変更される可能性があります。 -- 大きなコードベースは多くのログエントリを生成します。 +- 大きなコードベースだと、多くのログエントリが生成されます。 ---