diff --git a/src/content/reference/react-compiler/compilationMode.md b/src/content/reference/react-compiler/compilationMode.md index 5513d1c6a..d12c98d11 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,48 +18,48 @@ 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*/} +#### 型 {/*type*/} ``` 'infer' | 'syntax' | 'annotation' | 'all' ``` -#### Default value {/*default-value*/} +#### デフォルト値 {/*default-value*/} `'infer'` -#### Options {/*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..c3baf0e44 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). +これらのオプションは、コンパイラが [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..73b572461 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,13 +21,13 @@ 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*/} +#### 型 {/*type*/} ``` { @@ -36,28 +36,28 @@ Configures runtime feature flag gating for compiled functions. } | null ``` -#### Default value {/*default-value*/} +#### デフォルト値 {/*default-value*/} `null` -#### Properties {/*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 +- ゲーティング関数はブーリアンを返す必要があります。 +- コンパイル済みバージョンと元のバージョンの両方を含めるため、バンドルサイズが増加します。 +- コンパイルされた関数を含むすべてのファイルにインポート文が付加されます。 --- -## 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. コンパイラがゲーティング済みのコードを生成します。 ```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. +ゲーティング関数はモジュール評価時に一度だけ評価されることに注意してください。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..95b0230ef 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,13 +22,13 @@ 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*/} +#### 型 {/*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*/} +#### メソッド {/*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..d15a1dea9 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,42 +18,42 @@ 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*/} +#### 型 {/*type*/} ``` '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..8678f5c92 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,42 +18,42 @@ 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*/} +#### 型 {/*type*/} ``` '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": [ {