Skip to content

Commit 9ca7b77

Browse files
committed
refactor: apply suggestions from review
1 parent 6b92538 commit 9ca7b77

File tree

3 files changed

+21
-21
lines changed

3 files changed

+21
-21
lines changed

content/docs/context.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: context
33
title: コンテクスト
4-
permalink: docs/conte {#legacy-api}xt.html
4+
permalink: docs/context.html
55
---
66

77
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーを通してデータを渡す方法を提供します。
@@ -24,7 +24,7 @@ permalink: docs/conte {#legacy-api}xt.html
2424

2525
## コンテクストをいつ使用すべきか {#when-to-use-context}
2626

27-
コンテクストは、現在の認証済みユーザー、テーマ、優先言語などの React コンポーネントのツリーに対してグローバル”とみなすことができるデータを共有するように設計されています。例えば、以下のコードでは Button コンポーネントをスタイルする為に、手動でthemeプロパティを通しています。
27+
コンテクストは、ある React コンポーネントのツリーに対してグローバル」とみなすことができる、現在の認証済みユーザー・テーマ・優先言語といったデータを共有するために設計されています。例えば、以下のコードでは Button コンポーネントをスタイルする為に、手動で "theme" プロパティを通しています。
2828

2929
`embed:context/motivation-problem.js`
3030

@@ -36,7 +36,7 @@ permalink: docs/conte {#legacy-api}xt.html
3636

3737
コンテクストは主に、いくつかのデータがネストしている階層が違う*多く*のコンポーネントからアクセスが必要な時に使用されます。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。
3838

39-
**もし多くの階層を通していくつかのプロパティを渡すことを避けたいだけであれば、[コンポーネント コンポジション](/docs/composition-vs-inheritance.html) は多くの場合、コンテクストよりシンプルな解決策です。**
39+
**もし多くの階層を通していくつかのプロパティを渡すことを避けたいだけであれば、[コンポーネント コンポジション](/docs/composition-vs-inheritance.html)は多くの場合、コンテクストよりシンプルな解決策です。**
4040

4141
例えば、深くネストされた `Link``Avatar` コンポーネントがプロパティを読み取ることが出来るように、`user``avatarSize` プロパティをいくつかの階層下へ渡す `Page` コンポーネントを考えてみましょう。
4242

@@ -54,7 +54,7 @@ permalink: docs/conte {#legacy-api}xt.html
5454

5555
最終的に `Avatar` コンポーネントだけがプロパティを必要としているのであれば、多くの階層を通して `user``avatarSize` プロパティを下に渡すことは冗長に感じるかもしれません。また、`Avatar` コンポーネントが上のコンポーネントから追加のプロパティを必要とする時はいつでも、全ての間の階層にも追加しないといけないことも厄介です。
5656

57-
**コンテクストを使用せずに**この問題を解決する 1 つの手法は、[`Avatar` コンポーネント自身を渡す](/docs/composition-vs-inheritance.html#containment) ようにする方法で、間のコンポーネントは `user` プロパティを知る必要はありません。
57+
**コンテクストを使用せずに**この問題を解決する 1 つの手法は、[`Avatar` コンポーネント自身を渡す](/docs/composition-vs-inheritance.html#containment)ようにするというもので、そうすれば間のコンポーネントは `user` プロパティを知る必要はありません。
5858

5959
```js
6060
function Page(props) {
@@ -67,7 +67,7 @@ function Page(props) {
6767
return <PageLayout userLink={userLink} />;
6868
}
6969

70-
// 今であれば、以下のようになります
70+
// これで以下のようになります
7171
<Page user={user} />
7272
// ... Page コンポーネントは以下をレンダー ...
7373
<PageLayout userLink={...} />
@@ -81,7 +81,7 @@ function Page(props) {
8181

8282
この*制御の反転*はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。
8383

84-
コンポーネントに対して、1 つの子までとは制限されていません。複数の子を渡したり、子の為に複数の別々の”slot”を持つことさえできます。[ドキュメントはここにあります。](/docs/composition-vs-inheritance.html#containment)
84+
コンポーネントに対して 1 つの子までという制限はありません。複数の子を渡したり、子のために複数の別々の「スロット」を持つことさえできます。[ドキュメントはここにあります。](/docs/composition-vs-inheritance.html#containment)
8585

8686
```js
8787
function Page(props) {
@@ -105,7 +105,7 @@ function Page(props) {
105105

106106
このパターンは、そのすぐ上の親から子を切り離す必要がある多くのケースにとって十分です。レンダリングの前に子が親とやり取りする必要がある場合、さらに[レンダープロップ](/docs/render-props.html)と合わせて使うことができます。
107107

108-
しかし、たまに同じデータがツリー内の異なるネスト階層にある多くのコンポーネントからアクセス可能であることが必要となります。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへブロードキャストできます。コンテクストが使用される一般的な例としては、現在のロケール、テーマ、またはデータキャッシュの管理を含む他の案よりシンプルになるかもしれない場合です
108+
しかし、たまに同じデータがツリー内の異なるネスト階層にある多くのコンポーネントからアクセス可能であることが必要となります。コンテクストはそのようなデータとその変更を以下の全てのコンポーネントへブロードキャストできます。コンテクストを使うことが他の手法よりシンプルである一般的な例としては、現在のロケール、テーマ、またはデータキャッシュの管理が挙げられます。
109109

110110
## API {#api}
111111

@@ -125,17 +125,17 @@ const MyContext = React.createContext(defaultValue);
125125
<MyContext.Provider value={/* 何らかの値 */}>
126126
```
127127

128-
全てのコンテクストオブジェクトは、コンシューマコンポーネントにコンテクストの変更に対する購読を可能にするプロバイダ React コンポーネントとともに提供されます
128+
全てのコンテクストオブジェクトにはプロバイダ (Provider) コンポーネントが付属しており、これによりコンシューマコンポーネントはコンテクストの変更を購読できます
129129

130-
このプロバイダの子孫のコンシューマコンポーネントは、渡された `value` プロパティを受け取ります。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダは値を上書きするために、ツリー内のより深い位置でネストできます。
130+
プロバイダは `value` プロパティを受け取り、これが子孫であるコンシューマコンポーネントに渡されます。1 つのプロバイダは多くのコンシューマと接続することが出来ます。プロバイダは値を上書きするために、ツリー内のより深い位置でネストできます。
131131

132-
プロバイダの子孫の全てのコンシューマは、プロバイダの値プロパティが変更されるたびに再レンダーされます。プロバイダからその子孫コンシューマへの伝播は `shouldComponentUpdate` メソッドの影響を受けないため、コンシューマは祖先のコンポーネントで更新処理が止められた場合でも更新されます。
132+
プロバイダの子孫の全てのコンシューマは、プロバイダの `value` プロパティが変更されるたびに再レンダーされます。プロバイダからその子孫コンシューマへの伝播は `shouldComponentUpdate` メソッドの影響を受けないため、コンシューマは祖先のコンポーネントで更新処理が止められた場合でも更新されます。
133133

134134
変更は、[`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) と同じアルゴリズムを使用し、新しい値と古い値の比較によって判断されます。
135135

136136
> 補足
137137
>
138-
> 変更が判断される方法は、オブジェクトを `value` として渡される場合に、いくつかの問題が発生する可能性があります。:詳細 [注意事項](#注意事項)
138+
> この方法で変更の有無を判断するため、オブジェクトを `value` として渡した場合にいくつかの問題が発生する可能性があります。詳細は[注意事項](#caveats)を参照。
139139
140140
### `Class.contextType` {#classcontexttype}
141141

@@ -161,11 +161,11 @@ class MyClass extends React.Component {
161161
MyClass.contextType = MyContext;
162162
```
163163

164-
クラスの `contextType` プロパティは [`React.createContext()`](#reactcreatecontext) により作成されたコンテキストオブジェクトを指定することが出来ます。`this.context` を使用して、そのコンテクストタイプに最も近い現在の値を使用することを可能にします。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。
164+
クラスの `contextType` プロパティには [`React.createContext()`](#reactcreatecontext) により作成されたコンテキストオブジェクトを指定することができます。これにより、`this.context` を使って、そのコンテクストタイプの最も近い現在値を利用できます。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。
165165

166166
> 補足:
167167
>
168-
> この API では、1 つのコンテクストだけ登録することができます。もし 1 つ以上を読み取る必要がある場合、[複数のコンテクストを使用する](#複数のコンテクストを使用する) を見てください
168+
> この API では、1 つのコンテクストだけ登録することができます。もし 2 つ以上を読み取る必要がある場合、[複数のコンテクストを使用する](#consuming-multiple-contexts) を参照してください
169169
>
170170
> 実験的な [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/) を使用している場合、**static** クラスフィールドを使用することで `contextType` を初期化することができます。
171171
@@ -193,7 +193,7 @@ class MyClass extends React.Component {
193193

194194
> 補足
195195
>
196-
> function as a child パターンについてさらに情報が必要な場合は [レンダープロップ](/docs/render-props.html) を参照してください。
196+
> "function as a child" パターンについてさらに情報が必要な場合は [レンダープロップ](/docs/render-props.html) を参照してください。
197197
198198
## 例 {#examples}
199199

@@ -233,11 +233,11 @@ class MyClass extends React.Component {
233233

234234
## 注意事項 {#caveats}
235235

236-
コンテクストは参照が同一であるかどうかを使用していつ再レンダーするかを決定するため、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に `value` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします
236+
コンテクストは参照の同一性を使用していつ再レンダーするかを決定するため、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば以下のコードでは、新しいオブジェクトが `value` に対して常に作成されるため、プロバイダが再レンダーするたびにすべてのコンシューマを再レンダーしてしまいます
237237

238238
`embed:context/reference-caveats-problem.js`
239239

240-
この問題を回避するためには、親の state に値を上げます
240+
この問題を回避するためには、親の state に値をリフトアップします
241241

242242
`embed:context/reference-caveats-solution.js`
243243

examples/context/motivation-problem.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ class App extends React.Component {
66

77
function Toolbar(props) {
88
// highlight-range{1-4,7}
9-
// Toolbar コンポーネントは外部からtheme”プロパティを受け取らなければなりません。
10-
// そして、プロパティを ThemedButton へ渡します。
9+
// Toolbar コンポーネントは外部から "theme" プロパティを受け取り、
10+
// プロパティを ThemedButton へ渡します。
1111
// アプリ内の各ボタンがテーマを知る必要がある場合、
1212
// プロパティは全てのコンポーネントを通して渡される為、面倒になります。
1313
return (

examples/context/motivation-solution.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// highlight-range{1-4}
22
// コンテクストを使用すると、全てのコンポーネントを明示的に通すことなしに
33
// コンポーネントツリーの深くまで値を渡すことができます。
4-
// 現在のテーマ(デフォルトはlight)の為のコンテクストを作成します。
4+
// 現在のテーマ(デフォルトは "light")の為のコンテクストを作成します。
55
const ThemeContext = React.createContext('light');
66

77
class App extends React.Component {
88
render() {
99
// highlight-range{1-3,5}
1010
// 以下のツリーへ現在のテーマを渡すためにプロバイダを使用します。
1111
// どんな深さでも、どのようなコンポーネントでも読み取ることができます。
12-
// このサンプルでは、darkを現在の値として渡しています。
12+
// このサンプルでは、"dark" を現在の値として渡しています。
1313
return (
1414
<ThemeContext.Provider value="dark">
1515
<Toolbar />
@@ -33,7 +33,7 @@ class ThemedButton extends React.Component {
3333
// highlight-range{1-3,6}
3434
// 現在のテーマのコンテクストを読むために、contextType に指定します。
3535
// React は上位の最も近いテーマプロバイダを見つけ、その値を使用します。
36-
// この例では、現在のテーマはdarkです。
36+
// この例では、現在のテーマは "dark" です。
3737
static contextType = ThemeContext;
3838
render() {
3939
return <Button theme={this.context} />;

0 commit comments

Comments
 (0)