Skip to content

Commit 587abe3

Browse files
authored
Merge pull request #884 from kenji-arata/translate-reference-react-compiler-configuration
React CompilerのReference記事のconfigurationセクションを翻訳
2 parents 9c1ecbb + f15ef8d commit 587abe3

File tree

8 files changed

+165
-165
lines changed

8 files changed

+165
-165
lines changed

src/content/reference/react-compiler/compilationMode.md

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: compilationMode
44

55
<Intro>
66

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

99
</Intro>
1010

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

1919
---
2020

21-
## Reference {/*reference*/}
21+
## リファレンス {/*reference*/}
2222

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

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

27-
#### Type {/*type*/}
27+
#### {/*type*/}
2828

2929
```
3030
'infer' | 'syntax' | 'annotation' | 'all'
3131
```
3232

33-
#### Default value {/*default-value*/}
33+
#### デフォルト値 {/*default-value*/}
3434

3535
`'infer'`
3636

37-
#### Options {/*options*/}
37+
#### 指定可能な値 {/*options*/}
3838

39-
- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
40-
- Functions explicitly annotated with `"use memo"` directive
41-
- Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
39+
- **`'infer'`**(デフォルト): コンパイラは高度なヒューリスティックを使用して React コンポーネントとフックを識別します。
40+
- `"use memo"` ディレクティブで明示的にアノテーションされた関数
41+
- コンポーネント(パスカルケース)やフック(`use` プレフィックス)の規約で命名され、かつ、JSX の作成あるいは他のフックの呼び出しを行っている関数
4242

43-
- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
43+
- **`'annotation'`**: `"use memo"` ディレクティブで明示的にマークされた関数のみをコンパイルします。段階的導入に最適です。
4444

45-
- **`'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.
45+
- **`'syntax'`**: Flow[component](https://flow.org/en/docs/react/component-syntax/) および [hook](https://flow.org/en/docs/react/hook-syntax/) 構文を使用するコンポーネントとフックのみをコンパイルします。
4646

47-
- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
47+
- **`'all'`**: すべてのトップレベル関数をコンパイルします。非 React 関数もコンパイルする可能性があるため推奨されません。
4848

49-
#### Caveats {/*caveats*/}
49+
#### 注意点 {/*caveats*/}
5050

51-
- The `'infer'` mode requires functions to follow React naming conventions to be detected
52-
- Using `'all'` mode may negatively impact performance by compiling utility functions
53-
- The `'syntax'` mode requires Flow and won't work with TypeScript
54-
- Regardless of mode, functions with `"use no memo"` directive are always skipped
51+
- `'infer'` モードでは、関数が検出されるために React の命名規則に従う必要があります。
52+
- `'all'` モードを使用すると、ユーティリティ関数がコンパイルされるためにパフォーマンスに悪影響を与える可能性があります。
53+
- `'syntax'` モードでは Flow が必要で、TypeScript では動作しません。
54+
- モードに関係なく、`"use no memo"` ディレクティブを持つ関数は常にスキップされます。
5555

5656
---
5757

58-
## Usage {/*usage*/}
58+
## 使用法 {/*usage*/}
5959

60-
### Default inference mode {/*default-inference-mode*/}
60+
### デフォルト推論モード {/*default-inference-mode*/}
6161

62-
The default `'infer'` mode works well for most codebases that follow React conventions:
62+
デフォルトの `'infer'` モードは、React の慣習に従う大抵のコードベースでうまく動作します。
6363

6464
```js
6565
{
6666
compilationMode: 'infer'
6767
}
6868
```
6969

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

7272
```js
7373
// ✅ Compiled: Named like a component + returns JSX
@@ -93,17 +93,17 @@ function calculateTotal(items) {
9393
}
9494
```
9595

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

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

100100
```js
101101
{
102102
compilationMode: 'annotation'
103103
}
104104
```
105105

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

108108
```js
109109
// Only this function will be compiled
@@ -124,17 +124,17 @@ function NormalComponent(props) {
124124
}
125125
```
126126

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

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

131131
```js
132132
{
133133
compilationMode: 'syntax'
134134
}
135135
```
136136

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

139139
```js
140140
// Compiled: Flow component syntax
@@ -154,9 +154,9 @@ function helper(data) {
154154
}
155155
```
156156

157-
### Opting out specific functions {/*opting-out*/}
157+
### 特定の関数のオプトアウト {/*opting-out*/}
158158

159-
Regardless of compilation mode, use `"use no memo"` to skip compilation:
159+
コンパイルモードに関係なく、`"use no memo"` を使用してコンパイルをスキップすることができます。
160160

161161
```js
162162
function ComponentWithSideEffects() {
@@ -171,11 +171,11 @@ function ComponentWithSideEffects() {
171171

172172
---
173173

174-
## Troubleshooting {/*troubleshooting*/}
174+
## トラブルシューティング {/*troubleshooting*/}
175175

176-
### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
176+
### infer モードでコンポーネントがコンパイルされない {/*component-not-compiled-infer*/}
177177

178-
In `'infer'` mode, ensure your component follows React conventions:
178+
`'infer'` モードでは、コンポーネントが React の慣習に従っていることを確認してください。
179179

180180
```js
181181
// ❌ Won't be compiled: lowercase name

src/content/reference/react-compiler/configuration.md

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
title: Configuration
2+
title: 設定
33
---
44

55
<Intro>
66

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

99
</Intro>
1010

1111
<Note>
1212

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

1515
</Note>
1616

@@ -29,11 +29,11 @@ module.exports = {
2929

3030
---
3131

32-
## Compilation Control {/*compilation-control*/}
32+
## コンパイル制御 {/*compilation-control*/}
3333

34-
These options control *what* the compiler optimizes and *how* it selects components and hooks to compile.
34+
これらのオプションは、コンパイラが*何を*最適化し、*どのように*コンポーネントとフックを選択してコンパイルするかを制御します。
3535

36-
* [`compilationMode`](/reference/react-compiler/compilationMode) controls the strategy for selecting functions to compile (e.g., all functions, only annotated ones, or intelligent detection).
36+
* [`compilationMode`](/reference/react-compiler/compilationMode) は、コンパイルする関数を選択する方法を制御します(例:すべての関数、アノテーション付きのもののみ、インテリジェント検出など)。
3737

3838
```js
3939
{
@@ -43,11 +43,11 @@ These options control *what* the compiler optimizes and *how* it selects compone
4343

4444
---
4545

46-
## Version Compatibility {/*version-compatibility*/}
46+
## バージョン互換性 {/*version-compatibility*/}
4747

48-
React version configuration ensures the compiler generates code compatible with your React version.
48+
React バージョンの設定により、使用中の React バージョンと互換性のあるコードをコンパイラが生成することが保証されます。
4949

50-
[`target`](/reference/react-compiler/target) specifies which React version you're using (17, 18, or 19).
50+
[`target`](/reference/react-compiler/target) は、使用中の React バージョン(17、18、19)を指定します。
5151

5252
```js
5353
// For React 18 projects
@@ -58,11 +58,11 @@ React version configuration ensures the compiler generates code compatible with
5858

5959
---
6060

61-
## Error Handling {/*error-handling*/}
61+
## エラーハンドリング {/*error-handling*/}
6262

63-
These options control how the compiler responds to code that doesn't follow the [Rules of React](/reference/rules).
63+
これらのオプションは、コンパイラが [React のルール](/reference/rules)に従わないコードをどのように処理するか制御します。
6464

65-
[`panicThreshold`](/reference/react-compiler/panicThreshold) determines whether to fail the build or skip problematic components.
65+
[`panicThreshold`](/reference/react-compiler/panicThreshold) は、ビルドを失敗させるか、問題のあるコンポーネントをスキップするかを決定します。
6666

6767
```js
6868
// Recommended for production
@@ -73,11 +73,11 @@ These options control how the compiler responds to code that doesn't follow the
7373

7474
---
7575

76-
## Debugging {/*debugging*/}
76+
## デバッグ {/*debugging*/}
7777

78-
Logging and analysis options help you understand what the compiler is doing.
78+
ログと解析オプションは、コンパイラが何を行っているのか理解するのに役立ちます。
7979

80-
[`logger`](/reference/react-compiler/logger) provides custom logging for compilation events.
80+
[`logger`](/reference/react-compiler/logger) は、コンパイルイベントに対するカスタムのロギング手段を指定します。
8181

8282
```js
8383
{
@@ -93,11 +93,11 @@ Logging and analysis options help you understand what the compiler is doing.
9393

9494
---
9595

96-
## Feature Flags {/*feature-flags*/}
96+
## フィーチャーフラグ {/*feature-flags*/}
9797

98-
Conditional compilation lets you control when optimized code is used.
98+
条件付きコンパイルにより、最適化されたコードがいつ使用されるか制御することができます。
9999

100-
[`gating`](/reference/react-compiler/gating) enables runtime feature flags for A/B testing or gradual rollouts.
100+
[`gating`](/reference/react-compiler/gating) は、A/B テストや段階的ロールアウトのためのランタイムフィーチャーフラグを有効にします。
101101

102102
```js
103103
{
@@ -110,11 +110,11 @@ Conditional compilation lets you control when optimized code is used.
110110

111111
---
112112

113-
## Common Configuration Patterns {/*common-patterns*/}
113+
## 一般的な設定パターン {/*common-patterns*/}
114114

115-
### Default configuration {/*default-configuration*/}
115+
### デフォルト設定 {/*default-configuration*/}
116116

117-
For most React 19 applications, the compiler works without configuration:
117+
ほとんどの React 19 アプリケーションで、コンパイラは設定なしで動作します。
118118

119119
```js
120120
// babel.config.js
@@ -125,9 +125,9 @@ module.exports = {
125125
};
126126
```
127127

128-
### React 17/18 projects {/*react-17-18*/}
128+
### React 17/18 プロジェクト {/*react-17-18*/}
129129

130-
Older React versions need the runtime package and target configuration:
130+
古い React バージョンでは、ランタイムパッケージとターゲット設定が必要です。
131131

132132
```bash
133133
npm install react-compiler-runtime@latest
@@ -139,9 +139,9 @@ npm install react-compiler-runtime@latest
139139
}
140140
```
141141

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

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

146146
```js
147147
{

0 commit comments

Comments
 (0)