From 4207ba1c285c3b80c7eda80706638b5ab1922ce7 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 1 Oct 2026 18:43:00 +0900 Subject: [PATCH 1/2] Translate React Compiler directive-related articles --- .../reference/react-compiler/directives.md | 94 +++++++++---------- .../react-compiler/directives/use-memo.md | 80 ++++++++-------- .../react-compiler/directives/use-no-memo.md | 76 +++++++-------- 3 files changed, 125 insertions(+), 125 deletions(-) diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md index 705d0f620..c06607035 100644 --- a/src/content/reference/react-compiler/directives.md +++ b/src/content/reference/react-compiler/directives.md @@ -1,9 +1,9 @@ --- -title: Directives +title: ディレクティブ --- -React Compiler directives are special string literals that control whether specific functions are compiled. +React Compiler のディレクティブは、特定の関数をコンパイルするかどうかを制御する特別な文字列リテラルです。 ```js @@ -17,29 +17,29 @@ function MyComponent() { --- -## Overview {/*overview*/} +## 概要 {/*overview*/} -React Compiler directives provide fine-grained control over which functions are optimized by the compiler. They are string literals placed at the beginning of a function body or at the top of a module. +React Compiler のディレクティブを使用することで、コンパイラがどの関数を最適化するかを細かく制御できます。ディレクティブは、関数本体の先頭またはモジュールの先頭に配置する文字列リテラルです。 -### Available directives {/*available-directives*/} +### 利用可能なディレクティブ {/*available-directives*/} -* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - Opts a function into compilation -* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - Opts a function out of compilation +* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - 関数をコンパイル対象に含める +* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - 関数をコンパイル対象から除外する -### Quick comparison {/*quick-comparison*/} +### 比較表 {/*quick-comparison*/} -| Directive | Purpose | When to use | +| ディレクティブ | 目的 | 使用する場面 | |-----------|---------|-------------| -| [`"use memo"`](/reference/react-compiler/directives/use-memo) | Force compilation | When using `annotation` mode or to override `infer` mode heuristics | -| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | Prevent compilation | Debugging issues or working with incompatible code | +| [`"use memo"`](/reference/react-compiler/directives/use-memo) | コンパイルを強制 | `annotation` モードを使用する場合、または `infer` モードのヒューリスティックを上書きする場合 | +| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | コンパイルを防止 | 問題をデバッグする場合、または互換性のないコードを扱う場合 | --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Function-level directives {/*function-level*/} +### 関数レベルのディレクティブ {/*function-level*/} -Place directives at the beginning of a function to control its compilation: +関数のコンパイルを制御するには、その関数の先頭にディレクティブを配置します。 ```js // Opt into compilation @@ -55,9 +55,9 @@ function UnoptimizedComponent() { } ``` -### Module-level directives {/*module-level*/} +### モジュールレベルのディレクティブ {/*module-level*/} -Place directives at the top of a file to affect all functions in that module: +モジュール内のすべての関数に適用するには、ファイルの先頭にディレクティブを配置します。 ```js // At the very top of the file @@ -79,21 +79,21 @@ function Component3() { } ``` -### Compilation modes interaction {/*compilation-modes*/} +### コンパイルモードとの関係 {/*compilation-modes*/} -Directives behave differently depending on your [`compilationMode`](/reference/react-compiler/compilationMode): +ディレクティブの動作は、[`compilationMode`](/reference/react-compiler/compilationMode) によって異なります。 -* **`annotation` mode**: Only functions with `"use memo"` are compiled -* **`infer` mode**: Compiler decides what to compile, directives override decisions -* **`all` mode**: Everything is compiled, `"use no memo"` can exclude specific functions +* **`annotation` モード**：`"use memo"` がある関数のみをコンパイルする +* **`infer` モード**：コンパイラがコンパイル対象を決定し、ディレクティブがその決定を上書きする +* **`all` モード**：すべてをコンパイルし、`"use no memo"` で特定の関数を除外できる --- -## Best practices {/*best-practices*/} +## ベストプラクティス {/*best-practices*/} -### Use directives sparingly {/*use-sparingly*/} +### ディレクティブは必要な場合にのみ使用する {/*use-sparingly*/} -Directives are escape hatches. Prefer configuring the compiler at the project level: +ディレクティブは避難ハッチです。プロジェクトレベルでコンパイラを設定することを優先してください。 ```js // ✅ Good - project-wide configuration @@ -112,9 +112,9 @@ function SpecialCase() { } ``` -### Document directive usage {/*document-usage*/} +### ディレクティブの使用理由を記録する {/*document-usage*/} -Always explain why a directive is used: +ディレクティブを使用する理由を必ず説明してください。 ```js // ✅ Good - clear explanation @@ -130,14 +130,14 @@ function Mystery() { } ``` -### Plan for removal {/*plan-removal*/} +### 削除する予定を立てておく {/*plan-removal*/} -Opt-out directives should be temporary: +オプトアウト用のディレクティブは一時的なものにしてください。 -1. Add the directive with a TODO comment -2. Create a tracking issue -3. Fix the underlying problem -4. Remove the directive +1. ディレクティブを追加する際は TODO コメント付きにする +2. 追跡用の issue を作成する +3. 大元にある問題を修正する +4. ディレクティブを削除する ```js function TemporaryWorkaround() { @@ -148,11 +148,11 @@ function TemporaryWorkaround() { --- -## Common patterns {/*common-patterns*/} +## よくあるパターン {/*common-patterns*/} -### Gradual adoption {/*gradual-adoption*/} +### 段階的導入 {/*gradual-adoption*/} -When adopting the React Compiler in a large codebase: +大規模なコードベースに React Compiler を導入する場合は、次のようにします。 ```js // Start with annotation mode @@ -176,23 +176,23 @@ function ProblematicComponent() { --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -For specific issues with directives, see the troubleshooting sections in: +ディレクティブに関する具体的な問題については、以下のトラブルシューティングセクションを参照してください。 -* [`"use memo"` troubleshooting](/reference/react-compiler/directives/use-memo#troubleshooting) -* [`"use no memo"` troubleshooting](/reference/react-compiler/directives/use-no-memo#troubleshooting) +* [`"use memo"` のトラブルシューティング](/reference/react-compiler/directives/use-memo#troubleshooting) +* [`"use no memo"` のトラブルシューティング](/reference/react-compiler/directives/use-no-memo#troubleshooting) -### Common issues {/*common-issues*/} +### よくある問題 {/*common-issues*/} -1. **Directive ignored**: Check placement (must be first) and spelling -2. **Compilation still happens**: Check `ignoreUseNoForget` setting -3. **Module directive not working**: Ensure it's before all imports +1. **ディレクティブが無視される**：配置（先頭である必要があります）とスペルを確認する +2. **コンパイルが引き続き実行される**：`ignoreUseNoForget` の設定を確認する +3. **モジュールのディレクティブが動作しない**：すべてのインポートより前にあることを確認する --- -## See also {/*see-also*/} +## 関連項目 {/*see-also*/} -* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize -* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options -* [React Compiler documentation](https://react.dev/learn/react-compiler) - Getting started guide \ No newline at end of file +* [`compilationMode`](/reference/react-compiler/compilationMode) - コンパイラが最適化対象を選択する方法を設定する +* [設定](/reference/react-compiler/configuration) - コンパイラのすべての設定オプション +* [React Compiler のドキュメント](https://react.dev/learn/react-compiler) - 入門ガイド \ No newline at end of file diff --git a/src/content/reference/react-compiler/directives/use-memo.md b/src/content/reference/react-compiler/directives/use-memo.md index 431862682..b88ce2b59 100644 --- a/src/content/reference/react-compiler/directives/use-memo.md +++ b/src/content/reference/react-compiler/directives/use-memo.md @@ -1,17 +1,17 @@ --- title: "use memo" -titleForTitleTag: "'use memo' directive" +titleForTitleTag: "'use memo' ディレクティブ" --- -`"use memo"` marks a function for React Compiler optimization. +`"use memo"` は、関数を React Compiler による最適化の対象としてマークします。 -In most cases, you don't need `"use memo"`. It's primarily needed in `annotation` mode where you must explicitly mark functions for optimization. In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`. +ほとんどの場合、`"use memo"` は必要ありません。これは主に、最適化する関数を明示的にマークする必要がある `annotation` モードで使用するものです。`infer` モードでは、コンパイラが命名パターン（コンポーネントは PascalCase、フックは `use` プレフィックス）に基づいてコンポーネントやフックを自動的に検出します。`infer` モードでコンポーネントやフックがコンパイルされない場合、`"use memo"` でコンパイルを強制するのではなく、命名規則のほうを修正してください。 @@ -19,11 +19,11 @@ In most cases, you don't need `"use memo"`. It's primarily needed in `annotation --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `"use memo"` {/*use-memo*/} -Add `"use memo"` at the beginning of a function to mark it for React Compiler optimization. +関数を React Compiler による最適化の対象としてマークするには、その関数の先頭に `"use memo"` を追加します。 ```js {1} function MyComponent() { @@ -32,34 +32,34 @@ function MyComponent() { } ``` -When a function contains `"use memo"`, the React Compiler will analyze and optimize it during build time. The compiler will automatically memoize values and components to prevent unnecessary re-computations and re-renders. +関数に `"use memo"` が含まれている場合、React Compiler はビルド時にその関数を解析して最適化します。コンパイラは値やコンポーネントを自動的にメモ化し、不要な再計算や再レンダーを防ぎます。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `"use memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK). -* The directive must be written with double or single quotes, not backticks. -* The directive must exactly match `"use memo"`. -* Only the first directive in a function is processed; additional directives are ignored. -* The effect of the directive depends on your [`compilationMode`](/reference/react-compiler/compilationMode) setting. +* `"use memo"` は、インポートやその他のコードより前、関数本体の冒頭に置く必要があります（コメントは置くことができます）。 +* ディレクティブはバッククォートではなく、ダブルクォートまたはシングルクォートで記述する必要があります。 +* ディレクティブ文字列は `"use memo"` に完全に合致する必要があります。 +* 関数内では最初のディレクティブのみが処理され、後続のディレクティブは無視されます。 +* ディレクティブの効果は、[`compilationMode`](/reference/react-compiler/compilationMode) の設定によって異なります。 -### How `"use memo"` marks functions for optimization {/*how-use-memo-marks*/} +### `"use memo"` が関数を最適化対象としてマークする仕組み {/*how-use-memo-marks*/} -In a React app that uses the React Compiler, functions are analyzed at build time to determine if they can be optimized. By default, the compiler automatically infers which components to memoize, but this can depend on your [`compilationMode`](/reference/react-compiler/compilationMode) setting if you've set it. +React Compiler を使用する React アプリでは、関数を最適化できるか判断するためにビルド時に解析が行われます。デフォルトでは、コンパイラがメモ化するコンポーネントを自動的に推論しますが、[`compilationMode`](/reference/react-compiler/compilationMode) を設定している場合は、その設定によって動作が変わることがあります。 -`"use memo"` explicitly marks a function for optimization, overriding the default behavior: +`"use memo"` はデフォルトの動作を上書きし、関数を最適化対象として明示的にマークします。 -* In `annotation` mode: Only functions with `"use memo"` are optimized -* In `infer` mode: The compiler uses heuristics, but `"use memo"` forces optimization -* In `all` mode: Everything is optimized by default, making `"use memo"` redundant +* `annotation` モード：`"use memo"` がある関数のみが最適化される +* `infer` モード：コンパイラはヒューリスティックを使用するが、`"use memo"` により最適化が強制される +* `all` モード：デフォルトですべてが最適化されるため、`"use memo"` は冗長になる -The directive creates a clear boundary in your codebase between optimized and non-optimized code, giving you fine-grained control over the compilation process. +このディレクティブにより、コードベース内で最適化されるコードとされないコードとの境界が明確になり、コンパイルプロセスを細かく制御できます。 -### When to use `"use memo"` {/*when-to-use*/} +### `"use memo"` を使用する場面 {/*when-to-use*/} -You should consider using `"use memo"` when: +次のような場合は、`"use memo"` の使用を検討してください。 -#### You're using annotation mode {/*annotation-mode-use*/} -In `compilationMode: 'annotation'`, the directive is required for any function you want optimized: +#### annotation モードを使用している場合 {/*annotation-mode-use*/} +`compilationMode: 'annotation'` では、最適化したいすべての関数にディレクティブが必要です。 ```js // ✅ This component will be optimized @@ -74,8 +74,8 @@ function SimpleWrapper() { } ``` -#### You're gradually adopting React Compiler {/*gradual-adoption*/} -Start with `annotation` mode and selectively optimize stable components: +#### React Compiler を段階的に導入中の場合 {/*gradual-adoption*/} +`annotation` モードから始め、安定したコンポーネントを選択的に最適化します。 ```js // Start by optimizing leaf components @@ -93,11 +93,11 @@ function ButtonGroup({ buttons }) { --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Working with different compilation modes {/*compilation-modes*/} +### さまざまなコンパイルモードで使用する {/*compilation-modes*/} -The behavior of `"use memo"` changes based on your compiler configuration: +`"use memo"` の動作は、コンパイラの設定によって変わります。 ```js // babel.config.js @@ -110,7 +110,7 @@ module.exports = { }; ``` -#### Annotation mode {/*annotation-mode-example*/} +#### annotation モード {/*annotation-mode-example*/} ```js // ✅ Optimized with "use memo" function ProductCard({ product }) { @@ -124,7 +124,7 @@ function ProductList({ products }) { } ``` -#### Infer mode (default) {/*infer-mode-example*/} +#### infer モード（デフォルト） {/*infer-mode-example*/} ```js // Automatically memoized because this is named like a Component function ComplexDashboard({ data }) { @@ -137,21 +137,21 @@ function simpleDisplay({ text }) { } ``` -In `infer` mode, the compiler automatically detects components and hooks by their naming patterns (PascalCase for components, `use` prefix for hooks). If a component or hook isn't being compiled in `infer` mode, you should fix its naming convention rather than forcing compilation with `"use memo"`. +`infer` モードでは、コンパイラが命名パターン（コンポーネントは PascalCase、フックは `use` プレフィックス）に基づいてコンポーネントやフックを自動的に検出します。`infer` モードでコンポーネントやフックがコンパイルされない場合は、`"use memo"` でコンパイルを強制するのではなく、命名規則のほうを修正してください。 --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### Verifying optimization {/*verifying-optimization*/} +### 最適化を確認する {/*verifying-optimization*/} -To confirm your component is being optimized: +コンポーネントが最適化されていることを確認するには、次のようにします。 -1. Check the compiled output in your build -2. Use React DevTools to check for Memo ✨ badge +1. ビルド内のコンパイル済み出力を確認する +2. React DevTools を使用して Memo ✨ バッジを確認する -### See also {/*see-also*/} +### 関連項目 {/*see-also*/} -* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - Opt out of compilation -* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure compilation behavior -* [React Compiler](/learn/react-compiler) - Getting started guide \ No newline at end of file +* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - コンパイルからオプトアウトする +* [`compilationMode`](/reference/react-compiler/compilationMode) - コンパイルの動作を設定する +* [React Compiler](/learn/react-compiler) - 入門ガイド \ No newline at end of file diff --git a/src/content/reference/react-compiler/directives/use-no-memo.md b/src/content/reference/react-compiler/directives/use-no-memo.md index e6c419bc6..00b79ca00 100644 --- a/src/content/reference/react-compiler/directives/use-no-memo.md +++ b/src/content/reference/react-compiler/directives/use-no-memo.md @@ -1,11 +1,11 @@ --- title: "use no memo" -titleForTitleTag: "'use no memo' directive" +titleForTitleTag: "'use no memo' ディレクティブ" --- -`"use no memo"` prevents a function from being optimized by React Compiler. +`"use no memo"` は、React Compiler が関数を最適化しないようにします。 @@ -13,11 +13,11 @@ titleForTitleTag: "'use no memo' directive" --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `"use no memo"` {/*use-no-memo*/} -Add `"use no memo"` at the beginning of a function to prevent React Compiler optimization. +React Compiler による最適化を防ぐには、関数の先頭に `"use no memo"` を追加します。 ```js {1} function MyComponent() { @@ -26,32 +26,32 @@ function MyComponent() { } ``` -When a function contains `"use no memo"`, the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn't work correctly with the compiler. +関数に `"use no memo"` が含まれている場合、React Compiler は最適化の際にその関数を完全にスキップします。これは、デバッグを行う場合やコンパイラで正しく動作しないコードを扱う場合に、一時的な避難ハッチとして役立ちます。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `"use no memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK). -* The directive must be written with double or single quotes, not backticks. -* The directive must exactly match `"use no memo"` or its alias `"use no forget"`. -* This directive takes precedence over all compilation modes and other directives. -* It's intended as a temporary debugging tool, not a permanent solution. +* `"use no memo"` は、インポートやその他のコードより前、関数本体の冒頭に置く必要があります（コメントは置くことができます）。 +* ディレクティブはバッククォートではなく、ダブルクォートまたはシングルクォートで記述する必要があります。 +* ディレクティブ文字列は `"use no memo"` またはその別名である `"use no forget"` に完全に合致する必要があります。 +* このディレクティブは、すべてのコンパイルモードや他のディレクティブよりも優先されます。 +* 恒久的な解決策ではなく、一時的なデバッグツールとして使用することを意図しています。 -### How `"use no memo"` opts-out of optimization {/*how-use-no-memo-opts-out*/} +### `"use no memo"` によって最適化からオプトアウトする仕組み {/*how-use-no-memo-opts-out*/} -React Compiler analyzes your code at build time to apply optimizations. `"use no memo"` creates an explicit boundary that tells the compiler to skip a function entirely. +React Compiler は最適化を適用するため、ビルド時にコードを解析します。`"use no memo"` は、関数を完全にスキップするようコンパイラに指示する明示的な境界を作ります。 -This directive takes precedence over all other settings: -* In `all` mode: The function is skipped despite the global setting -* In `infer` mode: The function is skipped even if heuristics would optimize it +このディレクティブは他のすべての設定よりも優先されます。 +* `all` モード：グローバル設定にかかわらず、その関数はスキップされる +* `infer` モード：ヒューリスティックでは最適化対象になる場合でも、その関数はスキップされる -The compiler treats these functions as if the React Compiler wasn't enabled, leaving them exactly as written. +コンパイラはこれらの関数を React Compiler が有効化されていない場合と同様に扱い、記述されたとおり変更せずに残します。 -### When to use `"use no memo"` {/*when-to-use*/} +### `"use no memo"` を使用する場面 {/*when-to-use*/} -`"use no memo"` should be used sparingly and temporarily. Common scenarios include: +`"use no memo"` は、必要な場合にのみ一時的に使用してください。よくある使用場面は次のとおりです。 -#### Debugging compiler issues {/*debugging-compiler*/} -When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem: +#### コンパイラの問題をデバッグする {/*debugging-compiler*/} +コンパイラが問題を引き起こしている疑いがある場合は、一時的に最適化を無効にして問題を切り分けます。 ```js function ProblematicComponent({ data }) { @@ -62,8 +62,8 @@ function ProblematicComponent({ data }) { } ``` -#### Third-party library integration {/*third-party*/} -When integrating with libraries that might not be compatible with the compiler: +#### サードパーティライブラリと統合する {/*third-party*/} +コンパイラと互換性がない可能性のあるライブラリと統合する場合は、次のようにします。 ```js function ThirdPartyWrapper() { @@ -76,9 +76,9 @@ function ThirdPartyWrapper() { --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -The `"use no memo"` directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function: +React Compiler が関数を最適化しないようにするには、関数本体の先頭に `"use no memo"` ディレクティブを配置します。 ```js function MyComponent() { @@ -87,7 +87,7 @@ function MyComponent() { } ``` -The directive can also be placed at the top of a file to affect all functions in that module: +モジュール内のすべての関数に適用するには、ファイルの先頭にディレクティブを配置することもできます。 ```js "use no memo"; @@ -95,15 +95,15 @@ The directive can also be placed at the top of a file to affect all functions in // All functions in this file will be skipped by the compiler ``` -`"use no memo"` at the function level overrides the module level directive. +関数レベルの `"use no memo"` は、モジュールレベルのディレクティブを上書きします。 --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### Directive not preventing compilation {/*not-preventing*/} +### ディレクティブでコンパイルを防止できない {/*not-preventing*/} -If `"use no memo"` isn't working: +`"use no memo"` が動作しない場合は以下を確認してください。 ```js // ❌ Wrong - directive after code @@ -119,13 +119,13 @@ function Component() { } ``` -Also check: -* Spelling - must be exactly `"use no memo"` -* Quotes - must use single or double quotes, not backticks +次の点も確認してください。 +* スペル - `"use no memo"` と完全合致する必要がある +* 引用符 - バッククォートではなく、シングルクォートまたはダブルクォートを使用する必要がある -### Best practices {/*best-practices*/} +### ベストプラクティス {/*best-practices*/} -**Always document why** you're disabling optimization: +最適化を無効にする**理由を必ず記録してください**。 ```js // ✅ Good - clear explanation and tracking @@ -141,7 +141,7 @@ function Mystery() { } ``` -### See also {/*see-also*/} +### 関連項目 {/*see-also*/} -* [`"use memo"`](/reference/react-compiler/directives/use-memo) - Opt into compilation -* [React Compiler](/learn/react-compiler) - Getting started guide \ No newline at end of file +* [`"use memo"`](/reference/react-compiler/directives/use-memo) - コンパイルにオプトインする +* [React Compiler](/learn/react-compiler) - 入門ガイド \ No newline at end of file From c5ba8917054728d45f1a86a18e80ea9b30de5307 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 1 Oct 2026 19:08:08 +0900 Subject: [PATCH 2/2] Update link to React Compiler documentation Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- src/content/reference/react-compiler/directives.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md index c06607035..a74a2791e 100644 --- a/src/content/reference/react-compiler/directives.md +++ b/src/content/reference/react-compiler/directives.md @@ -195,4 +195,4 @@ function ProblematicComponent() { * [`compilationMode`](/reference/react-compiler/compilationMode) - コンパイラが最適化対象を選択する方法を設定する * [設定](/reference/react-compiler/configuration) - コンパイラのすべての設定オプション -* [React Compiler のドキュメント](https://react.dev/learn/react-compiler) - 入門ガイド \ No newline at end of file +* [React Compiler のドキュメント](/learn/react-compiler) - 入門ガイド \ No newline at end of file