`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+CSS では、`color` や `background-color` といった異なるプロパティがお互いを上書きすることはありません。すべての `
` の `color` を赤に設定しても、`background-color` には影響しません。同様に、**異なる React コンテクストはお互いを上書きしません**。`createContext()` で作成したそれぞれのコンテクストは、他のものと完全に切り離されており、*その特定のコンテクスト*を使用あるいは提供しているコンポーネント同士だけを結びつけます。1 つのコンポーネントが、異なるコンテクストをいくつも使用しても、あるいは提供しても、問題ありません。
-## Before you use context {/*before-you-use-context*/}
+## コンテクストを使う前に {/*before-you-use-context*/}
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+コンテクストはとても魅力的です！ しかし、これはコンテクストは使いすぎにつながりやすいということでもあります。**いくつかの props を数レベルの深さにわたって受け渡す必要があるというだけでは、その情報をコンテクストに入れるべきとはいえません**。
-Here's a few alternatives you should consider before using context:
+ここで紹介するように、コンテクストを使う前に検討すべきいくつかの代替案があります。
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **まずは [props を渡す](/learn/passing-props-to-a-component)方法から始めましょう**。ちょっと凝ったコンポーネントであれば、多くの props を多くのコンポーネントを通して受け渡すことは珍しくありません。退屈な仕事に感じるかもしれませんが、どのコンポーネントがどのデータを使っているかが非常に明確になります！ コードをメンテナンスする人は、props を使ってデータの流れが明確に表現されていることに感謝するでしょう。
+2. **コンポーネントを抽出して、[`children` を JSX として渡す](/learn/passing-props-to-a-component#passing-jsx-as-children)方法を検討しましょう**。もし、何らかのデータを、それを必要とせずただ下に流すだけの中間コンポーネントを何層も経由して受け渡ししているような場合、何かコンポーネントを抽出するのを忘れているということかもしれません。たとえば、`
` のような形で、データを直接使わないビジュアルコンポーネントに `post` のようなデータを渡しているのかもしれません。代わりに、`Layout` は `children` を props として受け取るようにし、`
` のようにレンダーしてみましょう。これにより、データを指定するコンポーネントとそれを必要とするコンポーネントの間のレイヤ数が減ります。
-If neither of these approaches works well for you, consider context.
+これらのアプローチがどちらもうまくいかない場合は、コンテクストを検討してください。
-## Use cases for context {/*use-cases-for-context*/}
+## コンテクストのさまざまな用途 {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
+* **テーマ**：例えばダークモードのように、アプリの外見をユーザが変更できる場合は、アプリのトップレベルにコンテクストプロバイダを配置し、外観を変化させる必要があるコンポーネントでそのコンテクストを使用します。
+* **現在のアカウント**：多くのコンポーネントは、現在ログインしているユーザを知る必要があります。それをコンテクストに入れることで、ツリーのどこからでも読み取りが容易になります。一部のアプリでは、複数のアカウントを同時に操作できます（例：別のユーザとしてコメントを残す）。このような場合、別の現在アカウントを指定したプロバイダをネストして、UI の一部をラップすることが有用です。
+* **ルーティング**：ほとんどのルーティングソリューションは、現在のルートを保持するために内部でコンテクストを使用しています。これが、自身がアクティブかどうかをすべてのリンクが「知っている」理由です。独自のルータを構築する場合は自分でもこれを行いたいでしょう。
+* **state 管理**：アプリが大きくなると、アプリのトップ近くに大量の state が集まってくることがあります。下の遠いところにある多くのコンポーネントがその state 変更する必要があるかもしれません。[リデューサとコンテクストを一緒に使用](/learn/scaling-up-with-reducer-and-context)することは一般的であり、これにより大変な手間をかけずに、複雑な state を離れたコンポーネントへ受け渡すことができます。
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+コンテクストで扱う値は静的なものとは限りません。次のレンダーで異なる値を渡すと、React はその下でそれを必要しているすべてのコンポーネントを更新します！ これがコンテクストが state と一緒によく使われる理由です。
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+一般的に、ある情報が、ツリーの様々な部分にある離れたコンポーネントによって必要とされている場合、コンテクストが役立つというサインです。
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* コンテクストにより、コンポーネントがそれ以下のツリー全体に情報を提供できる。
+* コンテクストを使うには：
+ 1. `export const MyContext = createContext(defaultValue)` を使用して作成およびエクスポートする。
+ 2. フックに `useContext(MyContext)` のようにコンテクストを渡せば、どんな深い子コンポーネントからも値が読み取れる。
+ 3. コンテクストの値を提供するには子要素を `` でラップする。
+* コンテクストは中間コンポーネントを貫通する。
+* コンテクストを使えば、「周囲に適応する」コンポーネントが書ける。
+* コンテクストを使用する前に、props を渡すか、`children` として JSX を渡す方法を検討してみる。
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### props の穴掘り作業をコンテクストで置換 {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+この例では、チェックボックスを切り替えることで、各 `` に渡される `imageSize` プロパティが変更されます。チェックボックスの state はトップレベルの `App` コンポーネントで保持されていますが、各 `` はそれを認識する必要があります。
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+現在、`App` は `imageSize` を `List` に渡し、`List` はそれを各 `Place` に渡し、`Place` はそれを `PlaceImage` に渡しています。props から `imageSize` を削除し、代わりにそれを `App` コンポーネントから直接 `PlaceImage` に渡すようにしてください。
-You can declare context in `Context.js`.
+コンテクストの宣言は `Context.js` 内で行えます。
@@ -1020,9 +1020,9 @@ li {
-Remove `imageSize` prop from all the components.
+すべてのコンポーネントの props から `imageSize` を削除します。
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+`Context.js` で `ImageSizeContext` を作成してエクスポートします。次に、List を `` でラップすることで下に値を渡します。`PlaceImage` で `useContext(ImageSizeContext)` を使ってそれを読み取ります。
@@ -1157,7 +1157,7 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+これで中間コンポーネントが `imageSize` を渡す必要がなくなっていることに注意してください。
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 569e487c8..03e4d9b5a 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -146,7 +146,7 @@
"path": "/learn/extracting-state-logic-into-a-reducer"
},
{
- "title": "Passing Data Deeply with Context",
+ "title": "コンテクストで深くデータを受け渡す",
"path": "/learn/passing-data-deeply-with-context"
},
{