Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate Context #59

Merged
merged 5 commits into from
Feb 18, 2019
Merged

Translate Context #59

merged 5 commits into from
Feb 18, 2019

Conversation

locol23
Copy link
Contributor

@locol23 locol23 commented Feb 3, 2019

This PR is a part of #4.

Translation for Context

Please review 🙏

@locol23 locol23 force-pushed the translate/context branch 3 times, most recently from 6fffe8f to 0100ebc Compare February 3, 2019 23:05
@smikitky smikitky self-requested a review February 4, 2019 00:47
@koba04 koba04 requested review from koba04 and removed request for koba04 February 4, 2019 01:18
@tesseralis tesseralis mentioned this pull request Feb 5, 2019
90 tasks
@koba04 koba04 added the 🚫 in intial review 初期レビューの真っ最中 label Feb 8, 2019
Copy link
Member

@koba04 koba04 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@locol23 遅くなってすみません! 🙏 レビューしましたので確認お願いします 🙇

あと、fragmentの部分は #4 (comment) により翻訳は不要になりそうです。

content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved

Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider's parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for `value`:
コンテキストは参照IDを使用していつ再レンダーするかを決定するため、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に `value` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reference identityは参照が同じかどうかを示していると思うのですが如何でしょうか?

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

}
}
MyClass.contextType = MyContext;
```

The `contextType` property on a class can be assigned a Context object created by [`React.createContext()`](#reactcreatecontext). This lets you consume the nearest current value of that Context type using `this.context`. You can reference this in any of the lifecycle methods including the render function.
クラスの `contextType` プロパティは[`React.createContext()`](#reactcreatecontext)により作成されたコンテキストオブジェクトを指定することが出来ます。`this.context`を使用して、そのコンテクストタイプに最も近い現在の値を使用することを可能にします。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

</MyContext.Consumer>
```

A React component that subscribes to context changes. This lets you subscribe to a context within a [function component](/docs/components-and-props.html#function-and-class-components).
コンテクストの変更を登録する React コンポーネントです。[関数コンポーネント](/docs/components-and-props.html#function-and-class-components) 内のコンテクストを登録することができます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

subscribeは購読するだと思いますが如何でしょう?

Suggested change
コンテクストの変更を登録する React コンポーネントです。[関数コンポーネント](/docs/components-and-props.html#function-and-class-components) 内のコンテクストを登録することができます
コンテクストの変更を購読する React コンポーネントです。[関数コンポーネント](/docs/components-and-props.html#function-and-class-components) 内でコンテクストを購読することができます

@@ -10,7 +10,7 @@ class App extends React.Component {
render() {
const {signedInUser, theme} = this.props;

// App component that provides initial context values
// コンテクストの初期値を与える APP コンポーネント
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// コンテクストの初期値を与える APP コンポーネント
// コンテクストの初期値を与える App コンポーネント

@@ -1,7 +1,7 @@
import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';

// An intermediate component that uses the ThemedButton
// ThemedButtonを使用する間のコンポーネント
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(imo)

Suggested change
// ThemedButtonを使用する間のコンポーネント
// ThemedButtonを使用する中間のコンポーネント

@koba04 koba04 removed the 🚫 in intial review 初期レビューの真っ最中 label Feb 8, 2019
@locol23
Copy link
Contributor Author

locol23 commented Feb 9, 2019

@koba04 ご指摘ありがとうございます!細かいところまで見て頂いて大変感謝です🙇
確認・修正します!

@smikitky
Copy link
Member

smikitky commented Feb 9, 2019

あと、ご面倒をおかけしますが こちら を見ていただき、見出しへのアンカー名追加と、目次部分のリンクの修正をお願いします。中身はあらためてじっくり見ます。

@locol23
Copy link
Contributor Author

locol23 commented Feb 9, 2019

@smikitky

見出しへのアンカー名追加と、目次部分のリンクの修正

了解です!

@locol23
Copy link
Contributor Author

locol23 commented Feb 11, 2019

Suggest頂いた内容の確認と修正完了しました!
また、見出しアンカー名追加と目次についても対応完了しています。
お手すきの際にご確認をお願いできないでしょうか🙇

@koba04
Copy link
Member

koba04 commented Feb 12, 2019

@locol23 対応ありがとうございました!

@locol23
Copy link
Contributor Author

locol23 commented Feb 13, 2019

@koba04 こちらこそ、丁寧にレビューして頂いてありがとうございました!他の翻訳の兼ね合い等で、修正が必要になりましたら、再度対応します!

Copy link
Member

@smikitky smikitky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

遅くなり申し訳ありません、全体を確認しましたのでよろしくお願いします。
ダブルクオート文字列が全体的に普通のASCIIの " でないものになっていましたので統一しました。

content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
content/docs/context.md Outdated Show resolved Hide resolved
examples/context/motivation-problem.js Outdated Show resolved Hide resolved
examples/context/motivation-solution.js Outdated Show resolved Hide resolved
examples/context/motivation-solution.js Outdated Show resolved Hide resolved
examples/context/motivation-solution.js Outdated Show resolved Hide resolved
@locol23
Copy link
Contributor Author

locol23 commented Feb 14, 2019

@smikitky 丁寧なレビューありがとうございました!
確認・修正が完了しましたので、お手隙の際にご確認をお願い出来ないでしょうか:pray:
※以下の1点だけ微修正を加えました:bow:
・「そして」の削除
#59 (comment)

@smikitky
Copy link
Member

smikitky commented Feb 14, 2019

確認しました、ありがとうございます。

一晩寝て改めて最初から見直していたのですが、たくさん使われている「通す」という訳語が曖昧なせいで文意が不明瞭になっているところがある気がします(主に原文のせいかもしれませんが…)。例えば冒頭の文では「コンテクストはツリーを通してデータを渡す方法」と説明され、そのすぐ後では「コンテクストは中間の要素を通してプロパティを渡さない方法」と説明があります。ちゃんと読めば理解できますが、一瞬「どっちやねん」と思われてしまいそうな気がしました。その後に出てくる「多くの階層を通していくつかのプロパティを渡す」という表現も、文脈なしだと、これがcontextとprops渡しのどちらの話をしているのかよく分かりません。例えば「各階層を経由して」とすれば props の話だし「ツリー全体にまたがって」や「ツリーを貫いて」などとすれば context の話だと理解しやすくなるので、やり過ぎにならない範囲で "through" や "via" に対応する訳語を少し調整していったほうがいいかもしれません。具体的なサジェスチョンは少しお待ちください。お手数をおかけしてすみません。

@locol23
Copy link
Contributor Author

locol23 commented Feb 14, 2019

再度のご確認ありがとうございます。

確かに、contextもpropsも同じ「通して」ですと、紛らわしいですね。。。例で頂いている様に、contextとpropsで別の表現の方がわかりやすそうです。意訳しすぎかもですが、contextは「貫通して一気に」、propsは「経由して」等といった感じでしょうか。自分も考えてみて良い案が思いつきましたら、ご連絡します。

Copy link
Member

@smikitky smikitky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一応「通して」をいろいろと言い換えてみました。あと追加で気付いた点についてsuggestしてみました。もっといい表現があるかもしれないので適宜変えていただければと思います。(余談:英語には単数形と複数形の区別があるので「through components」と「through a component」が全く違うものと理解できるのですが、日本語だとニュアンスを加えないと紛らわしくなるのかもしれません…)

permalink: docs/context.html
---

Context provides a way to pass data through the component tree without having to pass props down manually at every level.
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーを通してデータを渡す方法を提供します。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーを通してデータを渡す方法を提供します
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーをまたいでデータを渡す方法を提供します

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@smikitky 「またいで」→「内で」はどうでしょうか。

コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーをまたいでデータを渡す方法を提供します。

⬇️

コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。


`embed:context/motivation-problem.js`

Using context, we can avoid passing props through intermediate elements:
コンテクストを使用することで、中間の要素を通してプロパティを渡すことを避けることができます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
コンテクストを使用することで、中間の要素を通してプロパティを渡すことを避けることができます
コンテクストを使用することで、中間の要素群を経由してプロパティを渡すことを避けることができます


Context is primarily used when some data needs to be accessible by *many* components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.
コンテクストは主に、いくつかのデータがネストしている階層が違う*多く*のコンポーネントからアクセスが必要な時に使用されます。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

この some は「何らかの」の方がいい気がします(どうやら単数形扱いのようですし)

Copy link
Contributor Author

@locol23 locol23 Feb 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

確かにその方が良さそうです!指摘ありがとうございます:pray:


**If you only want to avoid passing some props through many levels, [component composition](/docs/composition-vs-inheritance.html) is often a simpler solution than context.**
**もし多くの階層を通していくつかのプロパティを渡すことを避けたいだけであれば、[コンポーネント コンポジション](/docs/composition-vs-inheritance.html)は多くの場合、コンテクストよりシンプルな解決策です。**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. However, this isn't the right choice in every case: moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want.
この*制御の反転*はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. The `value` argument passed to the function will be equal to the `value` prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the `value` argument will be equal to the `defaultValue` that was passed to `createContext()`.
[function as a child](/docs/render-props.html#using-props-other-than-render) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 `value` は、このコンテクストのツリー内の上位の一番近いプロバイダの `value` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の `value` は `createContext()` から渡された `defaultValue` と等しくなります。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
[function as a child](/docs/render-props.html#using-props-other-than-render) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 `value` は、このコンテクストのツリー内の上位の一番近いプロバイダの `value` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の `value``createContext()` から渡された `defaultValue` と等しくなります。
[function as a child](/docs/render-props.html#using-props-other-than-render) が必要です。この関数は現在のコンテクストの値を受け取り、React ノードを返します。この関数に渡される引数 `value` は、ツリー内の上位で一番近いこのコンテクスト用のプロバイダの `value` プロパティと等しくなります。このコンテクスト用のプロバイダが上位に存在しない場合、引数の `value``createContext()` から渡された `defaultValue` と等しくなります。

「の」がやたら連続するので言い換えました

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

お気づきありがとうございます:bow: 原文の「the closest Provider」を一括りとして考えていましたが、Suggestで頂いたように分離した方が連続の「の」にならないので、修正します。

@locol23
Copy link
Contributor Author

locol23 commented Feb 14, 2019

suggestありがとうございます:pray: 確認します!

@locol23
Copy link
Contributor Author

locol23 commented Feb 15, 2019

Suggest ありがとうございました!
度々申し訳ありませんが、お手すきの際にご確認をお願いできないでしょうか。
また、以下の1点だけ変更を加えました。不自然そうでしたら、Suggestに戻します:bow:
・「またいで」→「内で」
#59 (comment)

@smikitky smikitky merged commit 5e047a3 into reactjs:master Feb 18, 2019
@smikitky
Copy link
Member

ありがとうございました!

@locol23
Copy link
Contributor Author

locol23 commented Feb 18, 2019

@smikitky こちらこそ、何回も丁寧に見て頂いてありがとうございました!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants