diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 74679d7a3..e647805f3 100644
--- a/src/content/learn/adding-interactivity.md
+++ b/src/content/learn/adding-interactivity.md
@@ -68,7 +68,7 @@ button { margin-right: 10px; }
-イベントハンドラの追加方法を学ぶには **[イベントへの応答](/learn/responding-to-events)** を読んでみましょう。
+[**イベントへの応答**](/learn/responding-to-events)を読んで、イベントハンドラの追加方法を学びましょう。
@@ -229,7 +229,7 @@ button {
-値を記憶し、インタラクションに応答してその値を更新するには **[state: コンポーネントのメモリ](/learn/state-a-components-memory)** を読んでみましょう。
+[**state: コンポーネントのメモリ**](/learn/state-a-components-memory)を読んで、値を記憶し、インタラクションに応答してその値を更新する方法について学びましょう。
@@ -251,7 +251,7 @@ button {
-UI 更新のライフサイクルを学ぶには **[レンダーとコミット](/learn/render-and-commit)** を読んでみましょう。
+[**レンダーとコミット**](/learn/render-and-commit)を読んで、UI 更新のライフサイクルを学びましょう。
@@ -314,7 +314,7 @@ label, textarea { margin-bottom: 10px; display: block; }
-イベントハンドラ内で state が「固定」され、変化していないように見える理由を学ぶには **[state はスナップショットである](/learn/state-as-a-snapshot)** を読んでみましょう。
+[**state はスナップショットである**](/learn/state-as-a-snapshot)を読んで、イベントハンドラ内で state が「固定」され、変化していないように見える理由を学びましょう。
@@ -354,7 +354,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
-[state はスナップショットである](/learn/state-as-a-snapshot) で、なぜこのようなことが起こってしまうのかを説明しています。state を設定すると、新しい再レンダーが要求されますが、すでに実行されているコード内の state は変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
+[state はスナップショットである](/learn/state-as-a-snapshot)で、なぜこのようなことが起こってしまうのかを説明しています。state を設定すると、新しい再レンダーが要求されますが、すでに実行されているコード内の state は変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
```js
console.log(score); // 0
@@ -402,13 +402,13 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
-次のレンダリングの前に複数の更新をキューに入れる方法を学ぶには **[一連の state の変更をキューに入れる](/learn/queueing-a-series-of-state-updates)** を読んでみましょう。
+[**一連の state の更新をキューに入れる**](/learn/queueing-a-series-of-state-updates)を読んで、次回のレンダーの前に複数の更新をキューに入れる方法を学びましょう。
-## state 内のオブジェクトを更新する方法 {/*updating-objects-in-state*/}
+## state 内のオブジェクトの更新 {/*updating-objects-in-state*/}
-State はオブジェクトを含むあらゆる種類の JavaScript の値を保持することができます。しかし、React の state 内で保持するオブジェクトや配列を直接変更してはいけません。その代わり、オブジェクトや配列を更新したい場合、既存のもののコピーを作るなどして新しい値を作成し、その新しい値を使って state を変更する必要があります。
+state にはオブジェクトを含むあらゆる種類の JavaScript の値を保持することができます。しかし、React の state 内で保持するオブジェクトや配列を直接変更してはいけません。その代わり、オブジェクトや配列を更新したい場合、既存のもののコピーを作るなどして新しい値を作成し、その新しい値を使って state を変更する必要があります。
通常、変更したいオブジェクトや配列をコピーするには `...` というスプレッド構文を使用します。例えば、ネストされたオブジェクトを更新する場合、次のようになります：
@@ -633,13 +633,13 @@ img { width: 200px; height: 200px; }
-オブジェクトを正しく更新する方法を学ぶために **[state 内のオブジェクトを更新する方法](/learn/updating-objects-in-state)** を読んでみましょう。
+[**state 内のオブジェクトの更新**](/learn/updating-objects-in-state)を読んで、オブジェクトを正しく更新する方法を学びましょう。
-## state 内の配列を更新する方法 {/*updating-arrays-in-state*/}
+## state 内の配列の更新 {/*updating-arrays-in-state*/}
-配列もまた、state 内で保持できるミュータブル（mutable; 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）state が新しい配列を使用するように設定する必要があります：
+配列もまた、state 内で保持できるミュータブル（mutable; 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）、state が新しい配列を使用するようにセットする必要があります：
@@ -791,12 +791,12 @@ function ItemList({ artworks, onToggle }) {
-配列を正しく更新する方法を学ぶには **[state 内の配列を更新する方法](/learn/updating-arrays-in-state)** を読んでみましょう。
+[**state 内の配列の更新**](/learn/updating-arrays-in-state)を読んで、配列を正しく更新する方法を学びましょう。
-## 次は何？ {/*whats-next*/}
+## 次のステップ {/*whats-next*/}
-この章を 1 ページずつ読み始めるには[イベントへの応答](/learn/responding-to-events)に移動しましょう!
+[イベントへの応答](/learn/responding-to-events)に進んで、この章をページごとに読み進めましょう！
-また、すでにこれらのトピックをご存知の方は [state の管理](/learn/managing-state)を読んでみてはいかがでしょうか。
+もしくは、すでにこれらのトピックに詳しい場合、[state の管理](/learn/managing-state)について読んでみましょう。
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 849fc869c..5a9ce459d 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -57,7 +57,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
-**[初めてのコンポーネント](/learn/your-first-component)** を読んで、React コンポーネントの宣言方法、使用方法について学びましょう。
+[**初めてのコンポーネント**](/learn/your-first-component)を読んで、React コンポーネントの宣言方法、使用方法について学びましょう。
@@ -112,7 +112,7 @@ img { margin: 0 10px 10px 0; }
-**[コンポーネントのインポートとエクスポート](/learn/importing-and-exporting-components)** を読んで、コンポーネントを個々の専用ファイルに分割する方法を学びましょう。
+[**コンポーネントのインポートとエクスポート**](/learn/importing-and-exporting-components)を読んで、コンポーネントを個々の専用ファイルに分割する方法を学びましょう。
@@ -181,7 +181,7 @@ img { height: 90px; }
-**[JSX でマークアップを記述する](/learn/writing-markup-with-jsx)** を読んで、正しい JSX の書き方を学びましょう。
+[**JSX でマークアップを記述する**](/learn/writing-markup-with-jsx)を読んで、正しい JSX の書き方を学びましょう。
@@ -229,7 +229,7 @@ body > div > div { padding: 20px; }
-**[JSX に波括弧で JavaScript を含める](/learn/javascript-in-jsx-with-curly-braces)**を読んで、JSX 内から JavaScript のデータにアクセスする方法を学びましょう。
+[**JSX に波括弧で JavaScript を含める**](/learn/javascript-in-jsx-with-curly-braces)を読んで、JSX 内から JavaScript のデータにアクセスする方法を学びましょう。
@@ -310,7 +310,7 @@ export function getImageUrl(person, size = 's') {
-**[コンポーネントに props を渡す](/learn/passing-props-to-a-component)** を読んで、props の渡し方と読み取り方を学びましょう。
+[**コンポーネントに props を渡す**](/learn/passing-props-to-a-component)を読んで、props の渡し方と読み取り方を学びましょう。
@@ -358,7 +358,7 @@ export default function PackingList() {
-**[条件付きレンダー](/learn/conditional-rendering)** を読んで、コンテンツを条件付きでレンダーするためのさまざまな方法を学びましょう。
+[**条件付きレンダー**](/learn/conditional-rendering)を読んで、コンテンツを条件付きでレンダーするためのさまざまな方法を学びましょう。
@@ -458,7 +458,7 @@ h2 { font-size: 20px; }
-**[リストのレンダー](/learn/rendering-lists)** を読んで、コンポーネントのリストをレンダーする方法と、key の選択方法を学びましょう。
+[**リストのレンダー**](/learn/rendering-lists)を読んで、コンポーネントのリストをレンダーする方法と、key の選択方法を学びましょう。
@@ -519,12 +519,12 @@ export default function TeaSet() {
-**[コンポーネントを純粋に保つ](/learn/keeping-components-pure)** を読んで、予測可能な純関数としてコンポーネントを作成する方法を学びましょう。
+[**コンポーネントを純粋に保つ**](/learn/keeping-components-pure)を読んで、予測可能な純関数としてコンポーネントを作成する方法を学びましょう。
## 次のステップ {/*whats-next*/}
-[初めてのコンポーネント](/learn/your-first-component) に進んで、この章をページごとに読み進めましょう！
+[初めてのコンポーネント](/learn/your-first-component)に進んで、この章をページごとに読み進めましょう！
-もしくは、すでにこれらのトピックに詳しい場合、[インタラクティビティの追加](/learn/adding-interactivity) について読んでみましょう。
+もしくは、すでにこれらのトピックに詳しい場合、[インタラクティビティの追加](/learn/adding-interactivity)について読んでみましょう。
diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index c88ae3796..dcde996a8 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -1,30 +1,30 @@
---
-title: Managing State
+title: state の管理
---
-As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components.
+アプリケーションが成長するにつれて、state の構成方法やコンポーネント間のデータの流れについてより計画的に考えることが重要になります。バグの一般的な原因は、冗長な、あるいは重複した state です。この章では、state を適切に構造化する方法、state 更新ロジックをメンテナンスしやすい状態に保つ方法、そして離れたコンポーネント間で state を共有する方法について学びます。
-* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state)
-* [How to structure state well](/learn/choosing-the-state-structure)
-* [How to "lift state up" to share it between components](/learn/sharing-state-between-components)
-* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state)
-* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer)
-* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context)
-* [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context)
+* [UI の変化を state の変化として捉える方法](/learn/reacting-to-input-with-state)
+* [state を適切に構造化する方法](/learn/choosing-the-state-structure)
+* [コンポーネント間で state を共有するために状態を "リフトアップ" する方法](/learn/sharing-state-between-components)
+* [state が保持されるかリセットされるかを制御する方法](/learn/preserving-and-resetting-state)
+* [複雑な state ロジックを関数にまとめる方法](/learn/extracting-state-logic-into-a-reducer)
+* ["props の穴掘り作業" なしで情報を渡す方法](/learn/passing-data-deeply-with-context)
+* [アプリの成長に合わせて state 管理をスケーリングする方法](/learn/scaling-up-with-reducer-and-context)
-## Reacting to input with state {/*reacting-to-input-with-state*/}
+## state を使って入力に反応する {/*reacting-to-input-with-state*/}
-With React, you won't modify the UI from code directly. For example, you won't write commands like "disable the button", "enable the button", "show the success message", etc. Instead, you will describe the UI you want to see for the different visual states of your component ("initial state", "typing state", "success state"), and then trigger the state changes in response to user input. This is similar to how designers think about UI.
+React を使う場合、コードから直接 UI を変更することはありません。例えば「ボタンを無効にする」、「ボタンを有効にする」、「成功メッセージを表示する」といったコマンドを書くことはありません。代わりに、コンポーネントのさまざまな視覚状態（例えば「初期状態」、「入力中状態」、「成功状態」）に対して表示したい UI を記述し、ユーザ入力に応じて state の変更をトリガします。これは、デザイナが UI を考える方法に似ています。
-Here is a quiz form built using React. Note how it uses the `status` state variable to determine whether to enable or disable the submit button, and whether to show the success message instead.
+以下は、React を使って構築されたクイズフォームです。`status` という state 変数を使って、送信ボタンを有効にするか無効にするか、成功メッセージを表示するかどうかを決定していることに注目してください。
@@ -108,15 +108,15 @@ function submitForm(answer) {
-Read **[Reacting to Input with State](/learn/reacting-to-input-with-state)** to learn how to approach interactions with a state-driven mindset.
+[**state を使って入力に反応する**](/learn/reacting-to-input-with-state)を読んで、state ベースの考え方でユーザ操作を扱う方法を学びましょう。
-## Choosing the state structure {/*choosing-the-state-structure*/}
+## state 構造の選択 {/*choosing-the-state-structure*/}
-Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that is a constant source of bugs. The most important principle is that state shouldn't contain redundant or duplicated information. If there's unnecessary state, it's easy to forget to update it, and introduce bugs!
+快適に変更やデバッグが行えるコンポーネントと、常にバグの種になるコンポーネントの違いは、state をうまく構造化できているかどうかです。最も重要な原則は、state に冗長な情報や重複した情報を持たせないことです。不要な state があると、それを更新するのを忘れてすぐにバグが発生してしまいます！
-For example, this form has a **redundant** `fullName` state variable:
+例えば、このフォームには**冗長な** `fullName` という state 変数があります。
@@ -169,7 +169,7 @@ label { display: block; margin-bottom: 5px; }
-You can remove it and simplify the code by calculating `fullName` while the component is rendering:
+コンポーネントがレンダーされる際に `fullName` を計算することで、この冗長な state を削除し、コードを簡素化することができます。
@@ -221,19 +221,19 @@ label { display: block; margin-bottom: 5px; }
-This might seem like a small change, but many bugs in React apps are fixed this way.
+これは小さな変更に見えるかもしれませんが、React アプリの多くのバグはこのようにして修正されます。
-Read **[Choosing the State Structure](/learn/choosing-the-state-structure)** to learn how to design the state shape to avoid bugs.
+[**state 構造の選択**](/learn/choosing-the-state-structure)を読んで、バグを避けるために state の構造をどのように設計するか学びましょう。
-## Sharing state between components {/*sharing-state-between-components*/}
+## コンポーネント間で state を共有する {/*sharing-state-between-components*/}
-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
+2 つのコンポーネントの state を常に同時に変更したいという場合があります。これを行うには、両方のコンポーネントから state を削除して最も近い共通の親へ移動し、そこから state を props 経由でコンポーネントへ渡します。これは *state のリフトアップ (lifting state up)* として知られているものであり、React コードを書く際に行う最も一般的な作業のひとつです。
-In this example, only one panel should be active at a time. To achieve this, instead of keeping the active state inside each individual panel, the parent component holds the state and specifies the props for its children.
+この例では、一度にアクティブになるべきパネルは 1 つだけです。これを実現するには、各パネルの内部にアクティブかどうかの state を保持する代わりに、親コンポーネントが state を保持し、子コンポーネントの props を指定するようにします。
@@ -296,15 +296,15 @@ h3, p { margin: 5px 0px; }
-Read **[Sharing State Between Components](/learn/sharing-state-between-components)** to learn how to lift state up and keep components in sync.
+[**コンポーネント間で state を共有する**](/learn/sharing-state-between-components)を読んで、state をリフトアップしてコンポーネントを同期させる方法を学びましょう。
-## Preserving and resetting state {/*preserving-and-resetting-state*/}
+## state の保持とリセット {/*preserving-and-resetting-state*/}
-When you re-render a component, React needs to decide which parts of the tree to keep (and update), and which parts to discard or re-create from scratch. In most cases, React's automatic behavior works well enough. By default, React preserves the parts of the tree that "match up" with the previously rendered component tree.
+コンポーネントを再レンダーする際、React はツリーのどの部分を保持（および更新）し、どの部分を破棄または最初から再作成するかを決定する必要があります。大抵は React の自動的な挙動でうまくいきます。デフォルトでは、React は以前にレンダーされたコンポーネントツリーと「一致する」部分のツリーを保持します。
-However, sometimes this is not what you want. In this chat app, typing a message and then switching the recipient does not reset the input. This can make the user accidentally send a message to the wrong person:
+ただし、場合によってはこれが望ましくないことがあります。このチャットアプリでは、メッセージを入力した後に送信先を切り替えても、入力フィールドがリセットされません。これにより、ユーザが誤って間違った相手にメッセージを送信してしまうかもしれません。
@@ -399,7 +399,7 @@ textarea {
-React lets you override the default behavior, and *force* a component to reset its state by passing it a different `key`, like ``. This tells React that if the recipient is different, it should be considered a *different* `Chat` component that needs to be re-created from scratch with the new data (and UI like inputs). Now switching between the recipients resets the input field--even though you render the same component.
+例えば `` のように異なる `key` を渡すことでデフォルトの動作を上書きし、コンポーネントの state を*強制的に*リセットすることができます。これにより、送信先が異なる場合は*異なる* `Chat` コンポーネントであり、新しいデータ（および入力フィールドなど）で最初から再作成する必要があると React に伝えることができます。これにより、全く同じコンポーネントをレンダーしても、送信先を切り替えると入力フィールドがリセットされるようになります。
@@ -496,13 +496,13 @@ textarea {
-Read **[Preserving and Resetting State](/learn/preserving-and-resetting-state)** to learn the lifetime of state and how to control it.
+[**state の保持とリセット**](/learn/preserving-and-resetting-state)を読んで、state の寿命や制御方法について学びましょう。
-## Extracting state logic into a reducer {/*extracting-state-logic-into-a-reducer*/}
+## state ロジックをリデューサに抽出する {/*extracting-state-logic-into-a-reducer*/}
-Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called "reducer". Your event handlers become concise because they only specify the user "actions". At the bottom of the file, the reducer function specifies how the state should update in response to each action!
+多くのイベントハンドラにまたがって state の更新コードが含まれるコンポーネントは、理解が大変になりがちです。このような場合、コンポーネントの外部に、*リデューサ (reducer)* と呼ばれる単一の関数を作成し、すべての state 更新ロジックを集約することができます。イベントハンドラは、ユーザの「アクション」を指定するだけでよくなるため、簡潔になります。以下ではファイルの最後にあるリデューサ関数が、各アクションに対する state の更新方法を指定しています！
@@ -693,15 +693,15 @@ ul, li { margin: 0; padding: 0; }
-Read **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-into-a-reducer)** to learn how to consolidate logic in the reducer function.
+[**state ロジックをリデューサに抽出する**](/learn/extracting-state-logic-into-a-reducer)を読んで、リデューサ関数内にロジックを集約する方法を学びましょう。
-## Passing data deeply with context {/*passing-data-deeply-with-context*/}
+## コンテクストで深くデータを受け渡す {/*passing-data-deeply-with-context*/}
-Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props.
+通常、親コンポーネントから子コンポーネントには props を使って情報を渡します。しかし、props を多数の中間コンポーネントを経由して渡さないといけない場合や、アプリ内の多くのコンポーネントが同じ情報を必要とする場合、props の受け渡しは冗長で不便なものとなり得ます。*コンテクスト (Context)* を使用することで、親コンポーネントから props を明示的に渡さずとも、それ以下のツリー内の任意のコンポーネント（深さに関わらず）が情報を受け取れるようにできます。
-Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through context.
+ここでは、`Heading` コンポーネントは、最も近い `Section` に自身のネストレベルを「尋ねる」ことで、見出しレベルを決定しています。各 `Section` は、親の `Section` にレベルを尋ねてそれに 1 を加えることで、自分自身のレベルを把握します。すべての `Section` は、props を渡すことなしに、それ以下のすべてのコンポーネントにコンテクストを通じて情報を提供しています。
@@ -795,15 +795,15 @@ export const LevelContext = createContext(0);
-Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using context as an alternative to passing props.
+[**コンテクストで深くデータを受け渡す**](/learn/passing-data-deeply-with-context)を読んで、props を渡す代わりにコンテクストを使う方法を学びましょう。
-## Scaling up with reducer and context {/*scaling-up-with-reducer-and-context*/}
+## リデューサとコンテクストでスケールアップ {/*scaling-up-with-reducer-and-context*/}
-Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+リデューサを使えば、コンポーネントの state 更新ロジックを集約することができます。コンテクストを使えば、他のコンポーネントに深く情報を渡すことができます。そしてリデューサとコンテクストを組み合わせることで、複雑な画面の state 管理ができるようになります。
-With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state.
+このアプローチでは、複雑な state を持つ親コンポーネントが、リデューサを使って state を管理します。ツリー内の任意の深さにある他のコンポーネントは、コンテクストを介してその state を読み取ることができます。また、その state を更新するためのアクションをディスパッチすることもできます。
@@ -1006,12 +1006,12 @@ ul, li { margin: 0; padding: 0; }
-Read **[Scaling Up with Reducer and Context](/learn/scaling-up-with-reducer-and-context)** to learn how state management scales in a growing app.
+[**リデューサとコンテクストでスケールアップ**](/learn/scaling-up-with-reducer-and-context)を読んで、アプリが成長するに従って state 管理がどのようにスケールしていくか学びましょう。
-## What's next? {/*whats-next*/}
+## 次のステップ {/*whats-next*/}
-Head over to [Reacting to Input with State](/learn/reacting-to-input-with-state) to start reading this chapter page by page!
+[state を使って入力に反応する](/learn/reacting-to-input-with-state)に進んで、この章をページごとに読み進めましょう！
-Or, if you're already familiar with these topics, why not read about [Escape Hatches](/learn/escape-hatches)?
+もしくは、すでにこれらのトピックに詳しい場合、[避難ハッチ](/learn/escape-hatches)について読んでみましょう。
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 9f237838d..40f665655 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -121,7 +121,7 @@
]
},
{
- "title": "Managing State",
+ "title": "state の管理",
"path": "/learn/managing-state",
"tags": ["intermediate"],
"routes": [