Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
64 changes: 32 additions & 32 deletions src/content/reference/react-compiler/compilationMode.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: compilationMode

<Intro>

The `compilationMode` option controls how the React Compiler selects which functions to compile.
`compilationMode` オプションは、React Compiler がコンパイル対象の関数をどのように選択するか制御します。

</Intro>

Expand All @@ -18,56 +18,56 @@ The `compilationMode` option controls how the React Compiler selects which funct

---

## Reference {/*reference*/}
## リファレンス {/*reference*/}

### `compilationMode` {/*compilationmode*/}

Controls the strategy for determining which functions the React Compiler will optimize.
React Compiler が最適化する関数を決定する方法を制御します。

#### Type {/*type*/}
#### {/*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
{
compilationMode: 'infer'
}
```

With this mode, these functions will be compiled:
このモードでは、以下の関数がコンパイルされます。

```js
// ✅ Compiled: Named like a component + returns JSX
Expand All @@ -93,17 +93,17 @@ function calculateTotal(items) {
}
```

### Incremental adoption with annotation mode {/*incremental-adoption*/}
### アノテーションを使用した段階的な導入 {/*incremental-adoption*/}

For gradual migration, use `'annotation'` mode to only compile marked functions:
段階的な移行では、マークされた関数のみをコンパイルするために `'annotation'` モードを使用してください。

```js
{
compilationMode: 'annotation'
}
```

Then explicitly mark functions to compile:
その後に、コンパイルする関数を明示的にマークしていきます。

```js
// Only this function will be compiled
Expand All @@ -124,17 +124,17 @@ function NormalComponent(props) {
}
```

### Using Flow syntax mode {/*flow-syntax-mode*/}
### Flow syntax モードの使用方法 {/*flow-syntax-mode*/}

If your codebase uses Flow instead of TypeScript:
コードベースで TypeScript ではなく Flow を使用している場合は、以下のようにします。

```js
{
compilationMode: 'syntax'
}
```

Then use Flow's component syntax:
次に、Flow のコンポーネント構文を使用します。

```js
// Compiled: Flow component syntax
Expand All @@ -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() {
Expand All @@ -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
Expand Down
50 changes: 25 additions & 25 deletions src/content/reference/react-compiler/configuration.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
title: Configuration
title: 設定
---

<Intro>

This page lists all configuration options available in React Compiler.
このページでは、React Compiler で利用可能な設定オプションをすべてリストアップしています。

</Intro>

<Note>

For most apps, the default options should work out of the box. If you have a special need, you can use these advanced options.
ほとんどのアプリでは、デフォルトの設定で問題なく動作します。特別な要件がある場合は、後述する詳細な設定を利用できます。

</Note>

Expand All @@ -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
{
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
{
Expand All @@ -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
{
Expand All @@ -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
Expand All @@ -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
Expand All @@ -139,9 +139,9 @@ npm install react-compiler-runtime@latest
}
```

### Incremental adoption {/*incremental-adoption*/}
### 段階的な導入 {/*incremental-adoption*/}

Start with specific directories and expand gradually:
特定のディレクトリから始めて、段階的に拡張することができます。

```js
{
Expand Down
Loading