Merge pull request #747 from reactjs/tr/rules-of-react

Translate "Rules of React" index

src/content/reference/react/index.md

@@ -29,13 +29,13 @@ React DOM には（ブラウザの DOM 環境で動作する）ウェブアプ
 * [クライアント API](/reference/react-dom/client) - クライアント（ブラウザ）で React コンポーネントをレンダーするための `react-dom/client` API 群
 * [サーバ API](/reference/react-dom/server) - サーバで React コンポーネントを HTML にレンダーするための `react-dom/server` API 群
 
-## Rules of React {/*rules-of-react*/}
+## React のルール {/*rules-of-react*/}
 
-React has idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications:
+React には、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。
 
-* [Components and Hooks must be pure](/reference/rules/components-and-hooks-must-be-pure) – Purity makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly.
-* [React calls Components and Hooks](/reference/rules/react-calls-components-and-hooks) – React is responsible for rendering components and hooks when necessary to optimize the user experience.
-* [Rules of Hooks](/reference/rules/rules-of-hooks) – Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
+* [コンポーネントとフックを純粋に保つ](/reference/rules/components-and-hooks-must-be-pure) – これらを純粋に保つことにより、コードの理解やデバッグが容易になり、React がコンポーネントやフックを自動的に正しく最適化できるようになります。
+* [コンポーネントやフックを呼び出すのは React](/reference/rules/react-calls-components-and-hooks) – ユーザ体験を最適化するために必要に応じてコンポーネントやフックを呼び出すというのは React 自身の責務です。
+* [フックのルール](/reference/rules/rules-of-hooks) – フックは再利用可能な UI ロジックを表す JavaScript の関数として定義されており、呼び出せる場所に関する制約があります。
 
 ## レガシー API {/*legacy-apis*/}
 

src/content/reference/rules/index.md

@@ -1,52 +1,52 @@
 ---
-title: Rules of React
+title: React のルール
 ---
 
 <Intro>
-Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications.
+様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。
 </Intro>
 
 <InlineToc />
 
 ---
 
 <Note>
-To learn more about expressing UIs with React, we recommend reading [Thinking in React](/learn/thinking-in-react).
+React で UI を表現する方法についてさらに学びたい場合は、[React の流儀](/learn/thinking-in-react)を読むことをお勧めします。
 </Note>
 
-This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools.
+このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。
 
-These rules are known as the **Rules of React**. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about.
+以下のルールは **React のルール**として知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。
 
-We strongly recommend using [Strict Mode](/reference/react/StrictMode) alongside React's [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to help your codebase follow the Rules of React. By following the Rules of React, you'll be able to find and address these bugs and keep your application maintainable.
+React のルールを守るため、React の [ESLint プラグイン](https://www.npmjs.com/package/eslint-plugin-react-hooks) と [Strict Mode](/reference/react/StrictMode) を併用して利用することを強くお勧めします。React のルールに従うことにより、バグを見つけて対処し、アプリケーションを保守可能に保つことができます。
 
 ---
 
-## Components and Hooks must be pure {/*components-and-hooks-must-be-pure*/}
+## コンポーネントとフックを純粋に保つ {/*components-and-hooks-must-be-pure*/}
 
-[Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.
+[コンポーネントとフックを純粋に保つこと](/reference/rules/components-and-hooks-must-be-pure)は、アプリを予測可能にし、デバッグしやすくし、React がコードを自動的に最適化できるようにするための、React の重要なルールです。
 
-* [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context.
-* [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience.
-* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly.
-* [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook.
-* [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created.
+* [コンポーネントとフックを冪等にする](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) - React コンポーネントは、入力（props、state、およびコンテクスト）に対して常に同じ出力を返すことが前提となっています。
+* [副作用はレンダーの外で実行する](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) - 副作用はレンダー内で実行するべきではありません。React は最適なユーザ体験を実現するために複数回コンポーネントをレンダーすることがあるからです。
+* [props と state はイミュータブル](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) - コンポーネントの props と state は、単一のレンダー内においては不変のスナップショットです。直接書き換えてはいけません。
+* [フックの引数と返り値はイミュータブル](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) - 一度フックに値を渡したならそれを書き換えてはいけません。JSX の props と同様、フックに渡された値はイミュータブルになります。
+* [JSX に渡された後の値はイミュータブル](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) - JSX で使用した後に値を書き換えてはいけません。書き換えのロジックは JSX を作成する前に行います。
 
 ---
 
-## React calls Components and Hooks {/*react-calls-components-and-hooks*/}
+## コンポーネントやフックを呼び出すのは React {/*react-calls-components-and-hooks*/}
 
-[React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.
+[ユーザ体験を最適化するために必要に応じてコンポーネントやフックを呼び出すというのは React 自身の責務です](/reference/rules/react-calls-components-and-hooks)。React は宣言型 (declarative) です。あなたは何 (what) をレンダーしたいのかだけを React に伝え、それをどうやって (how) ユーザにうまく表示するのかについては React が考えます。
 
-* [Never call component functions directly](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Components should only be used in JSX. Don’t call them as regular functions.
-* [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value.
+* [コンポーネント関数を直接呼び出さない](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – コンポーネントは JSX 内でのみ使用します。通常の関数として呼び出してはいけません。
+* [フックを通常の値として取り回さない](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – フックはコンポーネント内で呼び出すだけにします。通常の値のようにコード内で取り回してはいけません。
 
 ---
 
-## Rules of Hooks {/*rules-of-hooks*/}
+## フックのルール {/*rules-of-hooks*/}
 
-Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. You need to follow the [Rules of Hooks](/reference/rules/rules-of-hooks) when using them.
+フックは再利用可能な UI ロジックを表す JavaScript の関数として定義されており、呼び出せる場所に関する制約があります。フックを使用する際には、[フックのルール](/reference/rules/rules-of-hooks)に従う必要があります。
 
-* [Only call Hooks at the top level](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.
-* [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions.
+* [フックはトップレベルでのみ呼び出す](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – ループ、条件分岐、ネストされた関数の内部でフックを呼び出してはいけません。代わりに、フックは常に React 関数のトップレベルで、早期 return を行う前に行います。
+* [フックは React の関数からのみ呼び出す](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – 通常の JavaScript 関数からフックを呼び出してはいけません。
 

src/sidebarReference.json

@@ -352,10 +352,10 @@
     },
     {
       "hasSectionHeader": true,
-      "sectionHeader": "Rules of React"
+      "sectionHeader": "React のルール"
     },
     {
-      "title": "Overview",
+      "title": "概要",
       "path": "/reference/rules"
     },
     {