Skip to content

Commit 7e8b5a9

Browse files
smikitkysmikitky
committed
Fix space problems
1 parent 862dc81 commit 7e8b5a9

File tree

5 files changed

+29
-29
lines changed

5 files changed

+29
-29
lines changed

‎src/content/learn/react-compiler/debugging.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ title: デバッグとトラブルシューティング
1616

1717
## コンパイラの動作を理解する {/*understanding-compiler-behavior*/}
1818

19-
React Compiler は [React のルール](/reference/rules) に従うコードを処理するように設計されています。これらのルールに違反する可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すよりも、最適化を安全にスキップします。
19+
React Compiler は [React のルール](/reference/rules)に従うコードを処理するように設計されています。これらのルールに違反する可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すよりも、最適化を安全にスキップします。
2020

2121
### コンパイラエラーとランタイムエラー {/*compiler-errors-vs-runtime-issues*/}
2222

@@ -89,5 +89,5 @@ function ProblematicComponent() {
8989

9090
## 次のステップ {/*next-steps*/}
9191

92-
- 問題を防ぐために [React のルール](/reference/rules) を確認する
93-
- 段階的な展開戦略については [段階的導入ガイド](/learn/react-compiler/incremental-adoption) を確認する
92+
- 問題を防ぐために [React のルール](/reference/rules)を確認する
93+
- 段階的な展開戦略については[段階的導入ガイド](/learn/react-compiler/incremental-adoption)を確認する

‎src/content/learn/react-compiler/incremental-adoption.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -214,12 +214,12 @@ export function isCompilerEnabled() {
214214
導入中に問題が発生した場合
215215

216216
1. `"use no memo"` を使用して問題のあるコンポーネントを一時的に除外
217-
2. 一般的な問題については [デバッグガイド](/learn/react-compiler/debugging) を確認
217+
2. 一般的な問題については[デバッグガイド](/learn/react-compiler/debugging)を確認
218218
3. ESLint プラグインによって特定された React のルール違反を修正
219219
4. より段階的な導入のために `compilationMode: 'annotation'` の使用を検討
220220

221221
## 次のステップ {/*next-steps*/}
222222

223-
- より多くのオプションについては [設定ガイド](/reference/react-compiler/configuration) を確認する
224-
- [デバッグテクニック](/learn/react-compiler/debugging) について学ぶ
225-
- すべてのコンパイラオプションについては [API リファレンス](/reference/react-compiler/configuration) を確認する
223+
- より多くのオプションについては[設定ガイド](/reference/react-compiler/configuration)を確認する
224+
- [デバッグテクニック](/learn/react-compiler/debugging)について学ぶ
225+
- すべてのコンパイラオプションについては [API リファレンス](/reference/react-compiler/configuration)を確認する

‎src/content/learn/react-compiler/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ title: React Compiler
44

55
## はじめに {/*introduction*/}
66

7-
[React Compiler の機能](/learn/react-compiler/introduction) について学び、`useMemo`、`useCallback`、`React.memo` による手動メモ化が不要になる、React アプリケーションを自動的に最適化する仕組みを理解しましょう。
7+
[React Compiler の機能](/learn/react-compiler/introduction)について学び、`useMemo`、`useCallback`、`React.memo` による手動メモ化が不要になる、React アプリケーションを自動的に最適化する仕組みを理解しましょう。
88

99
## インストール {/*installation*/}
1010

11-
[React Compiler のインストール](/learn/react-compiler/installation) から、ビルドツールとの設定方法を学びましょう。
11+
[React Compiler のインストール](/learn/react-compiler/installation)から、ビルドツールとの設定方法を学びましょう。
1212

1313

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

16-
横断的に有効にする準備がまだできていない場合は、既存のコードベースで [React Compiler を段階的に導入する戦略](/learn/react-compiler/incremental-adoption) を学びましょう。
16+
横断的に有効にする準備がまだできていない場合は、既存のコードベースで [React Compiler を段階的に導入する戦略](/learn/react-compiler/incremental-adoption)を学びましょう。
1717

1818
## デバッグとトラブルシューティング {/*debugging-and-troubleshooting*/}
1919

20-
期待通りに動作しない場合は[デバッグガイド](/learn/react-compiler/debugging) を参考に、コンパイラエラーとランタイムエラーの違いやよくある失敗パターンを理解しつつ、体系的なデバッグ作業を行いましょう。
20+
期待通りに動作しない場合は[デバッグガイド](/learn/react-compiler/debugging)を参考に、コンパイラエラーとランタイムエラーの違いやよくある失敗パターンを理解しつつ、体系的なデバッグ作業を行いましょう。
2121

2222
## 設定とリファレンス {/*configuration-and-reference*/}
2323

‎src/content/learn/react-compiler/installation.md‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ title: インストール
1616

1717
## 前提条件 {/*prerequisites*/}
1818

19-
React Compiler は React 19 で最適に動作するよう設計されていますが、React 17 および 18 もサポートしています。詳細については [React バージョン互換性](/reference/react-compiler/target) をご覧ください。
19+
React Compiler は React 19 で最適に動作するよう設計されていますが、React 17 および 18 もサポートしています。詳細については [React バージョン互換性](/reference/react-compiler/target)をご覧ください。
2020

2121
## インストール {/*installation*/}
2222

@@ -40,7 +40,7 @@ pnpm install -D babel-plugin-react-compiler@latest
4040

4141
## 基本的なセットアップ {/*basic-setup*/}
4242

43-
React Compiler は、デフォルトで設定なしで動作するように設計されています。ただし、特別な状況で設定が必要な場合（例えば、React 19 未満のバージョンを対象とする場合）は、[コンパイラオプションリファレンス](/reference/react-compiler/configuration) を参照してください。
43+
React Compiler は、デフォルトで設定なしで動作するように設計されています。ただし、特別な状況で設定が必要な場合（例えば、React 19 未満のバージョンを対象とする場合）は、[コンパイラオプションリファレンス](/reference/react-compiler/configuration)を参照してください。
4444

4545
セットアッププロセスは使用するビルドツールによって異なります。React Compiler には、ビルドパイプラインと統合する Babel プラグインが含まれています。
4646

@@ -108,7 +108,7 @@ export default defineConfig({
108108

109109
### Next.js {/*usage-with-nextjs*/}
110110

111-
詳細については [Next.js ドキュメント](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) を参照してください。
111+
詳細については [Next.js ドキュメント](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler)を参照してください。
112112

113113
### React Router {/*usage-with-react-router*/}
114114
`vite-plugin-babel` をインストールし、コンパイラの Babel プラグインを追加します。
@@ -143,23 +143,23 @@ export default defineConfig({
143143

144144
### Webpack {/*usage-with-webpack*/}
145145

146-
コミュニティ製の webpack ローダーが [こちら](https://github.com/SukkaW/react-compiler-webpack) で利用できます。
146+
コミュニティ製の webpack ローダーが[こちら](https://github.com/SukkaW/react-compiler-webpack)で利用できます。
147147

148148
### Expo {/*usage-with-expo*/}
149149

150-
Expo アプリで React Compiler を有効にして使用する方法については、[Expo のドキュメント](https://docs.expo.dev/guides/react-compiler/) を参照してください。
150+
Expo アプリで React Compiler を有効にして使用する方法については、[Expo のドキュメント](https://docs.expo.dev/guides/react-compiler/)を参照してください。
151151

152152
### Metro (React Native) {/*usage-with-react-native-metro*/}
153153

154-
React Native は Metro 経由で Babel を使用するため、インストール手順については [Babel での使用](#babel) セクションを参照してください。
154+
React Native は Metro 経由で Babel を使用するため、インストール手順については [Babel での使用](#babel)セクションを参照してください。
155155

156156
### Rspack {/*usage-with-rspack*/}
157157

158-
Rspack アプリで React Compiler を有効にして使用する方法については、[Rspack のドキュメント](https://rspack.dev/guide/tech/react#react-compiler) を参照してください。
158+
Rspack アプリで React Compiler を有効にして使用する方法については、[Rspack のドキュメント](https://rspack.dev/guide/tech/react#react-compiler)を参照してください。
159159

160160
### Rsbuild {/*usage-with-rsbuild*/}
161161

162-
Rsbuild アプリで React Compiler を有効にして使用する方法については、[Rsbuild のドキュメント](https://rsbuild.dev/guide/framework/react#react-compiler) を参照してください。
162+
Rsbuild アプリで React Compiler を有効にして使用する方法については、[Rsbuild のドキュメント](https://rsbuild.dev/guide/framework/react#react-compiler)を参照してください。
163163

164164

165165
## ESLint 統合 {/*eslint-integration*/}
@@ -175,7 +175,7 @@ npm install -D eslint-plugin-react-hooks@latest
175175
`eslint-plugin-react-hooks` をまだ設定していない場合は、[readme のインストール手順](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation)に従ってください。コンパイラのルールは `recommended-latest` プリセットで利用できます。
176176

177177
ESLint ルールは以下を行います。
178-
- [React のルール](/reference/rules) の違反の特定
178+
- [React のルール](/reference/rules)の違反の特定
179179
- 最適化できないコンポーネントの表示
180180
- 問題の修正に役立つエラーメッセージの提供
181181

@@ -232,14 +232,14 @@ function ProblematicComponent() {
232232

233233
これにより、コンパイラはこの特定のコンポーネントの最適化をスキップします。根本的な問題を修正し、解決したらディレクティブを削除してください。
234234

235-
トラブルシューティングの詳細については、[デバッグガイド](/learn/react-compiler/debugging) を参照してください。
235+
トラブルシューティングの詳細については、[デバッグガイド](/learn/react-compiler/debugging)を参照してください。
236236

237237
## 次のステップ {/*next-steps*/}
238238

239239
React Compiler がインストールされたので、以下について詳しく学びましょう。
240240

241241
- React 17 と 18 の [React バージョン互換性](/reference/react-compiler/target)
242-
- コンパイラをカスタマイズする [設定オプション](/reference/react-compiler/configuration)
243-
- 既存のコードベースでの [段階的な導入戦略](/learn/react-compiler/incremental-adoption)
244-
- 問題のトラブルシューティングのための [デバッグテクニック](/learn/react-compiler/debugging)
245-
- React ライブラリをコンパイルするための [ライブラリコンパイルガイド](/reference/react-compiler/compiling-libraries)
242+
- コンパイラをカスタマイズする[設定オプション](/reference/react-compiler/configuration)
243+
- 既存のコードベースでの[段階的な導入戦略](/learn/react-compiler/incremental-adoption)
244+
- 問題のトラブルシューティングのための[デバッグテクニック](/learn/react-compiler/debugging)
245+
- React ライブラリをコンパイルするための[ライブラリコンパイルガイド](/reference/react-compiler/compiling-libraries)

‎src/content/learn/react-compiler/introduction.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: はじめに
33
---
44

55
<Intro>
6-
React Compiler は、React アプリを自動的に最適化する新しいビルド時ツールです。プレーンな JavaScript で動作し、[React のルール](/reference/rules) を理解しているため、コードを書き直すことなく使用できます。
6+
React Compiler は、React アプリを自動的に最適化する新しいビルド時ツールです。プレーンな JavaScript で動作し、[React のルール](/reference/rules)を理解しているため、コードを書き直すことなく使用できます。
77
</Intro>
88

99
<YouWillLearn>
@@ -90,7 +90,7 @@ React Compiler は最適なメモ化を自動で適用し、必要なときだ
9090
<DeepDive>
9191
#### React Compiler はどのようなメモ化を行うのか？ {/*what-kind-of-memoization-does-react-compiler-add*/}
9292

93-
React Compiler の自動メモ化は主に **更新パフォーマンスの向上**（既存コンポーネントの再レンダー）に焦点を当てており、主に以下の 2 つのユースケースに重点を置いています：
93+
React Compiler の自動メモ化は主に**更新パフォーマンスの向上**（既存コンポーネントの再レンダー）に焦点を当てており、主に以下の 2 つのユースケースに重点を置いています。
9494

9595
1. **コンポーネントの連鎖的な再レンダーのスキップ**
9696
* `<Parent />` の再レンダーにより、`<Parent />` のみが変更されたにも関わらず、そのコンポーネントツリー内の多くのコンポーネントが再レンダーされる
@@ -99,7 +99,7 @@ React Compiler の自動メモ化は主に **更新パフォーマンスの向
9999

100100
#### 再レンダーの最適化 {/*optimizing-re-renders*/}
101101

102-
React では、UI を現在の state（具体的には props、state、context）の関数として表現できます。現在の実装では、コンポーネントの state が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネント *そのすべての子要素* を再レンダーします。例えば、以下の例では、`<FriendList>` の state が変更されるたびに `<MessageButton>` が再レンダーされます：
102+
React では、UI を現在の state（具体的には props、state、context）の関数として表現できます。現在の実装では、コンポーネントの state が変更されると、`useMemo()`、`useCallback()`、`React.memo()` による何らかのメモ化を適用していない限り、React はそのコンポーネント *そのすべての子要素* を再レンダーします。例えば、以下の例では、`<FriendList>` の state が変更されるたびに `<MessageButton>` が再レンダーされます。
103103

104104
```javascript
105105
function FriendList({ friends }) {
@@ -120,7 +120,7 @@ function FriendList({ friends }) {
120120
```
121121
[*React Compiler Playground でこの例を確認*](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAYjHgpgCYAyeYOAFMEWuZVWEQL4CURwADrEicQgyKEANnkwIAwtEw4iAXiJQwCMhWoB5TDLmKsTXgG5hRInjRFGbXZwB0UygHMcACzWr1ABn4hEWsYBBxYYgAeADkIHQ4uAHoAPksRbisiMIiYYkYs6yiqPAA3FMLrIiiwAAcAQ0wU4GlZBSUcbklDNqikusaKkKrgR0TnAFt62sYHdmp+VRT7SqrqhOo6Bnl6mCoiAGsEAE9VUfmqZzwqLrHqM7ubolTVol5eTOGigFkEMDB6u4EAAhKA4HCEZ5DNZ9ErlLIWYTcEDcIA)
122122

123-
React Compiler はメモ化と同等の処理を自動的に適用し、state が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ（fine-grained reactivity）と呼ばれることもあります。上記の例では、React Compiler は `friends` が変更されても `<FriendListCard />` の返り値を再利用できると判断し、この JSX の再作成 *と* カウントの変更による `<MessageButton>` の再レンダーを回避できます。
123+
React Compiler はメモ化と同等の処理を自動的に適用し、state が変更されてもアプリの関連部分のみが再レンダーされることを保証します。これは細粒度のリアクティビティ (fine-grained reactivity) と呼ばれることもあります。上記の例では、React Compiler は `friends` が変更されても `<FriendListCard />` の返り値を再利用できると判断し、この JSX の再作成 *と* カウントの変更による `<MessageButton>` の再レンダーを回避できます。
124124

125125
#### 高コストな計算もメモ化される {/*expensive-calculations-also-get-memoized*/}
126126

0 commit comments

Comments
 (0)