Skip to content

Translate React Compiler directive-related articles #983

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smikitky wants to merge 2 commits into
base: main
Choose a base branch
from
+125 −125
Open

Translate React Compiler directive-related articles #983

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4207ba1
Translate React Compiler directive-related articles
smikitky Oct 1, 2026
c5ba891
Update link to React Compiler documentation
smikitky Oct 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 47 additions & 47 deletions src/content/reference/react-compiler/directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Directives
title: ディレクティブ
---

<Intro>
React Compiler directives are special string literals that control whether specific functions are compiled.
React Compiler のディレクティブは、特定の関数をコンパイルするかどうかを制御する特別な文字列リテラルです。
</Intro>

```js
Expand All @@ -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:
関数のコンパイルを制御するには、その関数の先頭にディレクティブを配置します。
Comment thread
smikitky marked this conversation as resolved.

```js
// Opt into compilation
Expand All @@ -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
Expand All @@ -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
Expand All @@ -112,9 +112,9 @@ function SpecialCase() {
}
```

### Document directive usage {/*document-usage*/}
### ディレクティブの使用理由を記録する {/*document-usage*/}

Always explain why a directive is used:
ディレクティブを使用する理由を必ず説明してください。

```js
// ✅ Good - clear explanation
Expand All @@ -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() {
Expand All @@ -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
Expand All @@ -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
* [`compilationMode`](/reference/react-compiler/compilationMode) - コンパイラが最適化対象を選択する方法を設定する
* [設定](/reference/react-compiler/configuration) - コンパイラのすべての設定オプション
* [React Compiler のドキュメント](/learn/react-compiler) - 入門ガイド
80 changes: 40 additions & 40 deletions src/content/reference/react-compiler/directives/use-memo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
---
title: "use memo"
titleForTitleTag: "'use memo' directive"
titleForTitleTag: "'use memo' ディレクティブ"
---

<Intro>

`"use memo"` marks a function for React Compiler optimization.
`"use memo"` は、関数を React Compiler による最適化の対象としてマークします。

</Intro>

<Note>

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"` でコンパイルを強制するのではなく、命名規則のほうを修正してください。

</Note>

<InlineToc />

---

## 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() {
Expand All @@ -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'` では、最適化したいすべての関数にディレクティブが必要です。
Comment thread
smikitky marked this conversation as resolved.

```js
// ✅ This component will be optimized
Expand All @@ -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
Expand All @@ -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
Expand All @@ -110,7 +110,7 @@ module.exports = {
};
```

#### Annotation mode {/*annotation-mode-example*/}
#### annotation モード {/*annotation-mode-example*/}
```js
// ✅ Optimized with "use memo"
function ProductCard({ product }) {
Expand All @@ -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 }) {
Expand All @@ -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
* [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) - コンパイルからオプトアウトする
* [`compilationMode`](/reference/react-compiler/compilationMode) - コンパイルの動作を設定する
* [React Compiler](/learn/react-compiler) - 入門ガイド
Loading
Loading