-
Notifications
You must be signed in to change notification settings - Fork 180
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
Conversation
6fffe8f
to
0100ebc
Compare
There was a problem hiding this 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
|
||
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` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
reference identityは参照が同じかどうかを示していると思うのですが如何でしょうか?
コンテキストは参照IDを使用していつ再レンダーするかを決定するため、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に `value` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。 | |
コンテクストは参照が同一であるかどうかを使用していつ再レンダーするかを決定するため、プロバイダの親が再レンダーするときにコンシューマで意図しないレンダーを引き起こす可能性があるいくつかの問題があります。例えば、新しいオブジェクトは常に `value` に対して作成されるため、以下のコードはプロバイダが再レンダーするたびにすべてのコンシューマを再レンダーします。 |
content/docs/context.md
Outdated
} | ||
} | ||
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`を使用して、そのコンテクストタイプに最も近い現在の値を使用することを可能にします。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
クラスの `contextType` プロパティは[`React.createContext()`](#reactcreatecontext)により作成されたコンテキストオブジェクトを指定することが出来ます。`this.context`を使用して、そのコンテクストタイプに最も近い現在の値を使用することを可能にします。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。 | |
クラスの `contextType` プロパティは[`React.createContext()`](#reactcreatecontext)により作成されたコンテクストオブジェクトを指定することが出来ます。`this.context`を使用して、そのコンテクストタイプに最も近い現在の値を使用することを可能にします。レンダー関数を含むあらゆるライフサイクルメソッドで参照できます。 |
content/docs/context.md
Outdated
</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) 内のコンテクストを登録することができます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
subscribeは購読するだと思いますが如何でしょう?
コンテクストの変更を登録する 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 コンポーネント |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// コンテクストの初期値を与える 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を使用する間のコンポーネント |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(imo)
// ThemedButtonを使用する間のコンポーネント | |
// ThemedButtonを使用する中間のコンポーネント |
@koba04 ご指摘ありがとうございます!細かいところまで見て頂いて大変感謝です🙇 |
あと、ご面倒をおかけしますが こちら を見ていただき、見出しへのアンカー名追加と、目次部分のリンクの修正をお願いします。中身はあらためてじっくり見ます。 |
了解です! |
0100ebc
to
bbea622
Compare
Suggest頂いた内容の確認と修正完了しました! |
@locol23 対応ありがとうございました! |
@koba04 こちらこそ、丁寧にレビューして頂いてありがとうございました!他の翻訳の兼ね合い等で、修正が必要になりましたら、再度対応します! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
遅くなり申し訳ありません、全体を確認しましたのでよろしくお願いします。
ダブルクオート文字列が全体的に普通のASCIIの "
でないものになっていましたので統一しました。
9598bc8
to
9ca7b77
Compare
@smikitky 丁寧なレビューありがとうございました! |
確認しました、ありがとうございます。 一晩寝て改めて最初から見直していたのですが、たくさん使われている「通す」という訳語が曖昧なせいで文意が不明瞭になっているところがある気がします(主に原文のせいかもしれませんが…)。例えば冒頭の文では「コンテクストはツリーを通してデータを渡す方法」と説明され、そのすぐ後では「コンテクストは中間の要素を通してプロパティを渡さない方法」と説明があります。ちゃんと読めば理解できますが、一瞬「どっちやねん」と思われてしまいそうな気がしました。その後に出てくる「多くの階層を通していくつかのプロパティを渡す」という表現も、文脈なしだと、これがcontextとprops渡しのどちらの話をしているのかよく分かりません。例えば「各階層を経由して」とすれば props の話だし「ツリー全体にまたがって」や「ツリーを貫いて」などとすれば context の話だと理解しやすくなるので、やり過ぎにならない範囲で "through" や "via" に対応する訳語を少し調整していったほうがいいかもしれません。具体的なサジェスチョンは少しお待ちください。お手数をおかけしてすみません。 |
再度のご確認ありがとうございます。 確かに、contextもpropsも同じ「通して」ですと、紛らわしいですね。。。例で頂いている様に、contextとpropsで別の表現の方がわかりやすそうです。意訳しすぎかもですが、contextは「貫通して一気に」、propsは「経由して」等といった感じでしょうか。自分も考えてみて良い案が思いつきましたら、ご連絡します。 |
There was a problem hiding this 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」が全く違うものと理解できるのですが、日本語だとニュアンスを加えないと紛らわしくなるのかもしれません…)
content/docs/context.md
Outdated
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. | ||
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーを通してデータを渡す方法を提供します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーを通してデータを渡す方法を提供します。 | |
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーをまたいでデータを渡す方法を提供します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@smikitky 「またいで」→「内で」はどうでしょうか。
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリーをまたいでデータを渡す方法を提供します。
⬇️
コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。
content/docs/context.md
Outdated
|
||
`embed:context/motivation-problem.js` | ||
|
||
Using context, we can avoid passing props through intermediate elements: | ||
コンテクストを使用することで、中間の要素を通してプロパティを渡すことを避けることができます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
コンテクストを使用することで、中間の要素を通してプロパティを渡すことを避けることができます。 | |
コンテクストを使用することで、中間の要素群を経由してプロパティを渡すことを避けることができます。 |
content/docs/context.md
Outdated
|
||
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. | ||
コンテクストは主に、いくつかのデータがネストしている階層が違う*多く*のコンポーネントからアクセスが必要な時に使用されます。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
コンテクストは主に、いくつかのデータがネストしている階層が違う*多く*のコンポーネントからアクセスが必要な時に使用されます。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。 | |
コンテクストは主に、何らかのデータが、ネストレベルの異なる*多く*のコンポーネントからアクセスできる必要がある時に使用されます。コンテクストはコンポーネントの再利用をより難しくする為、慎重に利用してください。 |
この some は「何らかの」の方がいい気がします(どうやら単数形扱いのようですし)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
確かにその方が良さそうです!指摘ありがとうございます:pray:
content/docs/context.md
Outdated
|
||
**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)は多くの場合、コンテクストよりシンプルな解決策です。** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
**もし多くの階層を通していくつかのプロパティを渡すことを避けたいだけであれば、[コンポーネント コンポジション](/docs/composition-vs-inheritance.html)は多くの場合、コンテクストよりシンプルな解決策です。** | |
**もし多くの階層を経由していくつかの props を渡すことを避けたいだけであれば、[コンポーネントコンポジション](/docs/composition-vs-inheritance.html)は多くの場合、コンテクストよりシンプルな解決策です。** |
content/docs/context.md
Outdated
|
||
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. | ||
この*制御の反転*はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
この*制御の反転*はアプリケーションを通して渡す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。 | |
この*制御の反転*はアプリケーション内で取り回す必要のあるプロパティの量を減らし、ルートコンポーネントにより多くの制御を与えることにより、多くのケースでコードを綺麗にすることができます。しかし、この方法は全てのケースで正しい選択とはなりません:ツリー内の上層に複雑性が移ることは、それら高い階層のコンポーネントをより複雑にして、低い階層のコンポーネントに必要以上の柔軟性を強制します。 |
content/docs/context.md
Outdated
|
||
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` と等しくなります。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[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` と等しくなります。 |
「の」がやたら連続するので言い換えました
There was a problem hiding this comment.
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で頂いたように分離した方が連続の「の」にならないので、修正します。
suggestありがとうございます:pray: 確認します! |
9ca7b77
to
eb3593e
Compare
Suggest ありがとうございました! |
ありがとうございました! |
@smikitky こちらこそ、何回も丁寧に見て頂いてありがとうございました!! |
This PR is a part of #4.
Translation for Context
Please review 🙏