translate React Compiler

Author: kenji-arata

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

@@ -1,60 +1,60 @@
 ---
-title: Debugging and Troubleshooting
+title: デバッグとトラブルシューティング
 ---
 
 <Intro>
-This guide helps you identify and fix issues when using React Compiler. Learn how to debug compilation problems and resolve common issues.
+このガイドでは、React Compiler を使用する際の問題を特定し、修正する方法を説明します。コンパイル問題のデバッグ方法と一般的な問題の解決方法を学びましょう。
 </Intro>
 
 <YouWillLearn>
 
-* The difference between compiler errors and runtime issues
-* Common patterns that break compilation
-* Step-by-step debugging workflow
+* コンパイラエラーとランタイムエラーの違い
+* コンパイルを失敗させる一般的なパターン
+* 段階的なデバッグワークフロー
 
 </YouWillLearn>
 
-## Understanding Compiler Behavior {/*understanding-compiler-behavior*/}
+## コンパイラの動作を理解する {/*understanding-compiler-behavior*/}
 
-React Compiler is designed to handle code that follows the [Rules of React](/reference/rules). When it encounters code that might break these rules, it safely skips optimization rather than risk changing your app's behavior.
+React Compiler は [React のルール](/reference/rules) に従うコードを処理するように設計されています。これらのルールに違反する可能性のあるコードに遭遇した場合、アプリケーションの動作を変更するリスクを冒すよりも、最適化を安全にスキップします。
 
-### Compiler Errors vs Runtime Issues {/*compiler-errors-vs-runtime-issues*/}
+### コンパイラエラーとランタイムエラー {/*compiler-errors-vs-runtime-issues*/}
 
-**Compiler errors** occur at build time and prevent your code from compiling. These are rare because the compiler is designed to skip problematic code rather than fail.
+**コンパイラエラー** はビルド時に発生し、コードのコンパイルを妨げます。コンパイラは問題のあるコードをスキップするように設計されているため、エラーが発生することは稀です。
 
-**Runtime issues** occur when compiled code behaves differently than expected. Most of the time, if you encounter an issue with React Compiler, it's a runtime issue. This typically happens when your code violates the Rules of React in subtle ways that the compiler couldn't detect, and the compiler mistakenly compiled a component it should have skipped.
+**ランタイムエラー** は、コンパイルされたコードが期待とは異なる動作をする場合に発生します。React Compiler で問題に遭遇した場合、ほとんどの場合はランタイムエラーです。これは通常、コンパイラが検出できない微妙な方法で React のルールをコードが違反し、コンパイラがスキップすべきコンポーネントを誤ってコンパイルした場合に発生します。
 
-When debugging runtime issues, focus your efforts on finding Rules of React violations in the affected components that were not detected by the ESLint rule. The compiler relies on your code following these rules, and when they're broken in ways it can't detect, that's when runtime problems occur.
+ランタイムエラーをデバッグする際は、影響を受けるコンポーネント内の ESLint ルールで検出できなかった React のルール違反を見つけることに集中してください。コンパイラはコードがこれらのルールに従うことを前提としており、検出できない方法でルールに違反した場合にランタイムエラーが発生します。
 
 
-## Common Breaking Patterns {/*common-breaking-patterns*/}
+## 一般的な破綻パターン {/*common-breaking-patterns*/}
 
-One of the main ways React Compiler can break your app is if your code was written to rely on memoization for correctness. This means your app depends on specific values being memoized to work properly. Since the compiler may memoize differently than your manual approach, this can lead to unexpected behavior like effects over-firing, infinite loops, or missing updates.
+React Compiler がアプリケーションを失敗させる代表的な方法の 1 つは、挙動の正しさをメモ化に依存して記述することです。これは、アプリケーションが正常に動作するために、特定の値がメモ化されることに依存している状態です。コンパイラは、手動のアプローチとは異なる方法でメモ化を行う可能性があるため、副作用の過剰発火や無限ループ、更新の欠落といった予期せぬ動作を引き起こす可能性があります。
 
-Common scenarios where this occurs:
+これが発生する一般的なシナリオ：
 
-- **Effects that rely on referential equality** - When effects depend on objects or arrays maintaining the same reference across renders
-- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops
-- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization
+- **参照の同一性に依存する副作用** - 副作用が、複数回のレンダーでもオブジェクトや配列が同じ参照を保つことを必要とする場合
+- **安定した参照を必要とする依存配列** - 依存が不安定だと、エフェクトが過剰に発火したり無限ループを引き起こす場合
+- **参照チェックに基づく条件ロジック** - キャッシュや最適化のために参照同一性のチェックを行っている場合
 
-## Debugging Workflow {/*debugging-workflow*/}
+## デバッグワークフロー {/*debugging-workflow*/}
 
-Follow these steps when you encounter issues:
+問題に遭遇した場合は、以下の手順に従ってください：
 
-### Compiler Build Errors {/*compiler-build-errors*/}
+### コンパイラビルドエラー {/*compiler-build-errors*/}
 
-If you encounter a compiler error that unexpectedly breaks your build, this is likely a bug in the compiler. Report it to the [facebook/react](https://github.com/facebook/react/issues) repository with:
-- The error message
-- The code that caused the error
-- Your React and compiler versions
+コンパイラエラーにより予期せずビルドが失敗した場合、これはコンパイラのバグである可能性が高いです。以下を含めて [facebook/react](https://github.com/facebook/react/issues) リポジトリに報告してください：
+- エラーメッセージ
+- エラーを引き起こしたコード
+- React とコンパイラのバージョン
 
-### Runtime Issues {/*runtime-issues*/}
+### ランタイムエラー {/*runtime-issues*/}
 
-For runtime behavior issues:
+ランタイム動作の問題については：
 
-### 1. Temporarily Disable Compilation {/*temporarily-disable-compilation*/}
+### 1. コンパイルを一時的に無効化 {/*temporarily-disable-compilation*/}
 
-Use `"use no memo"` to isolate whether an issue is compiler-related:
+問題がコンパイラに関係するかを切り分けるために `"use no memo"` を使用します：
 
 ```js
 function ProblematicComponent() {
@@ -63,31 +63,31 @@ function ProblematicComponent() {
 }
 ```
 
-If the issue disappears, it's likely related to a Rules of React violation.
+これにより問題が解決した場合、React のルール違反に関連している可能性が高いです。
 
-You can also try removing manual memoization (useMemo, useCallback, memo) from the problematic component to verify that your app works correctly without any memoization. If the bug still occurs when all memoization is removed, you have a Rules of React violation that needs to be fixed.
+問題のあるコンポーネントから手動のメモ化（useMemo、useCallback、memo）を削除し、メモ化なしでアプリケーションが正しく動作することを確認することもできます。すべてのメモ化を削除してもバグが発生する場合は、修正が必要な React のルール違反があります。
 
-### 2. Fix Issues Step by Step {/*fix-issues-step-by-step*/}
+### 2. 段階的な問題の修正 {/*fix-issues-step-by-step*/}
 
-1. Identify the root cause (often memoization-for-correctness)
-2. Test after each fix
-3. Remove `"use no memo"` once fixed
-4. Verify the component shows the ✨ badge in React DevTools
+1. 根本原因を特定する（典型例は、挙動の正しさがメモ化に依存した実装）
+2. 各修正後にテストする
+3. 修正したら `"use no memo"` を削除する
+4. コンポーネントが React DevTools で ✨ バッジを表示することを確認する
 
-## Reporting Compiler Bugs {/*reporting-compiler-bugs*/}
+## コンパイラバグの報告 {/*reporting-compiler-bugs*/}
 
-If you believe you've found a compiler bug:
+コンパイラバグを発見したと思われる場合：
 
-1. **Verify it's not a Rules of React violation** - Check with ESLint
-2. **Create a minimal reproduction** - Isolate the issue in a small example
-3. **Test without the compiler** - Confirm the issue only occurs with compilation
-4. **File an [issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml)**:
-   - React and compiler versions
-   - Minimal reproduction code
-   - Expected vs actual behavior
-   - Any error messages
+1. **React のルール違反ではないことを確認する** - ESLint でチェック
+2. **最小限の再現方法を特定する** - 小さな例で問題を切り分ける
+3. **コンパイラなしでテストする** - 問題がコンパイル時のみに発生することを確認
+4. **[issue](https://github.com/facebook/react/issues/new?template=compiler_bug_report.yml) を提出する**：
+   - React とコンパイラのバージョン
+   - 最小限の再現コード
+   - 期待される動作と実際の動作
+   - エラーメッセージ
 
-## Next Steps {/*next-steps*/}
+## 次のステップ {/*next-steps*/}
 
-- Review the [Rules of React](/reference/rules) to prevent issues
-- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies
+- 問題を防ぐために [React のルール](/reference/rules) を確認
+- 段階的な展開戦略については [段階的導入ガイド](/learn/react-compiler/incremental-adoption) を確認