From 8cfe51a13d2937676ea67b0f61e326457ebfbcb7 Mon Sep 17 00:00:00 2001 From: ginpei Date: Sat, 9 Feb 2019 23:26:27 -0800 Subject: [PATCH 01/11] translate Component State --- content/docs/faq-state.md | 82 +++++++++++++++++++-------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 2765e3ae3..f16b381db 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,106 +1,106 @@ --- id: faq-state -title: Component State +title: コンポーネントの state permalink: docs/faq-state.html layout: docs category: FAQ --- -### What does `setState` do? {#what-does-setstate-do} +### `setState` は何をしているのですか？ {#what-does-setstate-do} -`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering. +`setState()` はコンポーネントの `state` オブジェクト更新をスケジュールします。 state が更新されると、コンポーネントはそれに再レンダーで応じます。 -### What is the difference between `state` and `props`? {#what-is-the-difference-between-state-and-props} +### `state` と `props` の違いは何ですか？ {#what-is-the-difference-between-state-and-props} -[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: `props` get passed *to* the component (similar to function parameters) whereas `state` is managed *within* the component (similar to variables declared within a function). +[`props`](/docs/components-and-props.html)（"properties" を短くしたもの）と [`state`](/docs/state-and-lifecycle.html) は、両方ともプレーンなJavaScriptのオブジェクトです。どちらもレンダー結果に影響を及ぼす情報を持ってはいますが、ある重要な一点が異なっています。つまり、`props` は（関数引数のように）コンポーネント*へ*渡されるのに対し、`state` は（関数内で宣言された変数のように）コンポーネント*の内部*で制御されます。 -Here are some good resources for further reading on when to use `props` vs `state`: +`props` と `state` のどちらをいつ使うべきかについて、こちらでより詳しく読むことができます。 * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) * [ReactJS: Props vs. State](http://lucybain.com/blog/2016/react-state-vs-pros/) -### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value} +### `setState` が誤った値を返すのはなぜですか？ {#why-is-setstate-giving-me-the-wrong-value} -In React, both `this.props` and `this.state` represent the *rendered* values, i.e. what's currently on the screen. +Reactでは、`this.props` の `this.state` いずれも*レンダーされた*もの、つまりスクリーン上の値を表しています。 -Calls to `setState` are asynchronous - don't rely on `this.state` to reflect the new value immediately after calling `setState`. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details). +`setState` 呼び出しは非同期です。呼び出し直後から `this.state` が新しい値を反映することを期待しないでください。もし現在の state に基づいた値を計算する必要がある場合は、オブジェクトの代わりに更新関数を渡してください。（詳しくは以下を参照） -Example of code that will *not* behave as expected: +このコード例は期待した通りには*動きません*。 ```jsx incrementCount() { - // Note: this will *not* work as intended. + // 補足：これは意図通りに*動きません* this.setState({count: this.state.count + 1}); } handleSomething() { - // Let's say `this.state.count` starts at 0. + // `this.state.count` は 0 から始まるとしす。 this.incrementCount(); this.incrementCount(); this.incrementCount(); - // When React re-renders the component, `this.state.count` will be 1, but you expected 3. + // React がコンポーネントを再レンダーしても、 `this.state.count` は意図通りの 3 ではなく 1 になります。 - // This is because `incrementCount()` function above reads from `this.state.count`, - // but React doesn't update `this.state.count` until the component is re-rendered. - // So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1. + // これは上記の `incrementCount()` 関数は `this.state.count` の値を読むのですが、 + // しかしコンポーネントが再レンダーされるまで React が `this.state.count` を更新しないためです。 + // そして `incrementCount()` は値が 0 のままの `this.state.count` を毎回読み、そして 1 をセットしてしまいます。 - // The fix is described below! + // 対処法は下で説明していますよ！ } ``` -See below for how to fix this problem. +この問題を解決するには以下を見てください。 -### How do I update state with values that depend on the current state? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} +### どうやって現在の state に依存する値を更新したらいいですか？ {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -Pass a function instead of an object to `setState` to ensure the call always uses the most updated version of state (see below). +`setState` へオブジェクトを渡す代わりに関数を渡してください。常に最新の状態の state を使ってその関数が呼ばれることが保証されています。（次項参照） -### What is the difference between passing an object or a function in `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} +### `setState` へオブジェクトを渡すのと関数を渡すのとのでは何が違いますか？ {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} -Passing an update function allows you to access the current state value inside the updater. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting: +更新関数を与えると、その関数内で現在の state の値へアクセスできるようになります。`setState` 呼び出しはバッチ処理されるため、更新処理を連結して、それぞれの更新が競合せずに順序だって動作することが保証されます。 ```jsx incrementCount() { this.setState((state) => { - // Important: read `state` instead of `this.state` when updating. + // 重要：更新には `this.state` ではなく `state` を使います。 return {count: state.count + 1} }); } handleSomething() { - // Let's say `this.state.count` starts at 0. + // `this.state.count` は 0 から始まるとします。 this.incrementCount(); this.incrementCount(); this.incrementCount(); - // If you read `this.state.count` now, it would still be 0. - // But when React re-renders the component, it will be 3. + // ここで `this.state.count` を読んでもまだ 0 のままです。 + // しかし React がコンポーネントを再レンダーするとき、値は 3 になります。 } ``` -[Learn more about setState](/docs/react-component.html#setstate) +[setState についてもっと学ぶ](/docs/react-component.html#setstate) -### When is `setState` asynchronous? {#when-is-setstate-asynchronous} +### いつ `setState` は非同期になりますか？ {#when-is-setstate-asynchronous} -Currently, `setState` is asynchronous inside event handlers. +現在、`setState` はイベントハンドラの内側では非同期です。 -This ensures, for example, that if both `Parent` and `Child` call `setState` during a click event, `Child` isn't re-rendered twice. Instead, React "flushes" the state updates at the end of the browser event. This results in significant performance improvements in larger apps. +これは、例えばクリックイベントの間に `Parent` と `Child` の両方が `setState` を呼ぶとき、`Child` が2度レンダーされないことを保証しています。その代わりにReactはブラウザイベントの最後に state の更新を「フラッシュ (flush)」します。これにより大規模アプリのパフォーマンスが大幅に向上します。 -This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases. +これは実装の詳細ですので、この仕組みに直接依存しないようにしてください。将来のバージョンにおいて、Reactはより多くの場合にバッチ更新するようになります。 -### Why doesn't React update `this.state` synchronously? {#why-doesnt-react-update-thisstate-synchronously} +### どうして React は `this.state` を同期的に更新しないのですか？ {#why-doesnt-react-update-thisstate-synchronously} -As explained in the previous section, React intentionally "waits" until all components call `setState()` in their event handlers before starting to re-render. This boosts performance by avoiding unnecessary re-renders. +前項で説明したように、全てのコンポーネントがそのイベントハンドラ内で `setState()` を呼ぶまで、React は再レンダー前に意図的に「待つ」ようになっています。これにより不必要な再レンダーが防がれ、パフォーマンスが向上します。 -However, you might still be wondering why React doesn't just update `this.state` immediately without re-rendering. +とはいえ、React がどうして再レンダーなしに `this.state` を即時更新しないのか、まだ疑問に思っているかもしれません。 -There are two main reasons: +これには主に2つの理由があります。 -* This would break the consistency between `props` and `state`, causing issues that are very hard to debug. -* This would make some of the new features we're working on impossible to implement. +* 同期的更新が `props` と `state` の間の一貫性を破壊し、非常にデバッグが難しい問題を引き起こしうるため。 +* 同期的更新が、我々が取り組んでいる新機能のいくつかを実装不可能にしうるため。 -This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples. +この [GitHub コメント](https://github.com/facebook/react/issues/11527#issuecomment-360199710)は特定の例について詳しく解説しています。 -### Should I use a state management library like Redux or MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx} +### Redux や MobX のような state 管理ライブラリを使うべきでしょうか？ {#should-i-use-a-state-management-library-like-redux-or-mobx} -[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux) +[そうかもしれません。](https://redux.js.org/faq/general#when-should-i-use-redux) -It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React. +他のライブラリを追加する前にReactを理解することをお勧めします。React だけでも非常に複雑なアプリケーションを作り上げることができます。 From a3130d6ba49671f593f06d63ac8ac6543c42b23c Mon Sep 17 00:00:00 2001 From: ginpei Date: Sat, 9 Feb 2019 23:43:59 -0800 Subject: [PATCH 02/11] update words --- content/docs/faq-state.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index f16b381db..0f8cdab7e 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -39,7 +39,7 @@ handleSomething() { this.incrementCount(); // React がコンポーネントを再レンダーしても、 `this.state.count` は意図通りの 3 ではなく 1 になります。 - // これは上記の `incrementCount()` 関数は `this.state.count` の値を読むのですが、 + // これは、上記の `incrementCount()` 関数は `this.state.count` の値を読むのですが、 // しかしコンポーネントが再レンダーされるまで React が `this.state.count` を更新しないためです。 // そして `incrementCount()` は値が 0 のままの `this.state.count` を毎回読み、そして 1 をセットしてしまいます。 @@ -51,11 +51,11 @@ handleSomething() { ### どうやって現在の state に依存する値を更新したらいいですか？ {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -`setState` へオブジェクトを渡す代わりに関数を渡してください。常に最新の状態の state を使ってその関数が呼ばれることが保証されています。（次項参照） +`setState` へオブジェクトを渡す代わりに関数を渡してください。その関数は常に最新の状態の state を使って呼ばれることが保証されています。（次項参照） ### `setState` へオブジェクトを渡すのと関数を渡すのとのでは何が違いますか？ {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} -更新関数を与えると、その関数内で現在の state の値へアクセスできるようになります。`setState` 呼び出しはバッチ処理されるため、更新処理を連結して、それぞれの更新が競合せずに順序だって動作することが保証されます。 +更新関数を渡すと、その関数内で現在の state の値へアクセスできるようになります。`setState` 呼び出しはバッチ処理されるため、更新処理を連結して、それぞれの更新が競合せずに順序だって動作することが保証されます。 ```jsx incrementCount() { @@ -82,7 +82,7 @@ handleSomething() { 現在、`setState` はイベントハンドラの内側では非同期です。 -これは、例えばクリックイベントの間に `Parent` と `Child` の両方が `setState` を呼ぶとき、`Child` が2度レンダーされないことを保証しています。その代わりにReactはブラウザイベントの最後に state の更新を「フラッシュ (flush)」します。これにより大規模アプリのパフォーマンスが大幅に向上します。 +例えばクリックイベントの間に `Parent` と `Child` の両方が `setState` を呼ぶとき、非同期処理のおかげで `Child` が2度レンダーされないことが保証されます。その代わりにReactはブラウザイベントの最後に state の更新を「フラッシュ (flush)」します。これにより大規模アプリのパフォーマンスが大幅に向上します。 これは実装の詳細ですので、この仕組みに直接依存しないようにしてください。将来のバージョンにおいて、Reactはより多くの場合にバッチ更新するようになります。 From 4de5a4188e90420a50960430ad053bad16a5c5f1 Mon Sep 17 00:00:00 2001 From: ginpei Date: Sat, 9 Feb 2019 23:50:29 -0800 Subject: [PATCH 03/11] misc --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 0f8cdab7e..55c0a734b 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -103,4 +103,4 @@ handleSomething() { [そうかもしれません。](https://redux.js.org/faq/general#when-should-i-use-redux) -他のライブラリを追加する前にReactを理解することをお勧めします。React だけでも非常に複雑なアプリケーションを作り上げることができます。 +まずは他のライブラリを追加する前にReactを理解することをお勧めします。React だけでも非常に複雑なアプリケーションを作り上げることができます。 From 2dd794868f1d94d56df20249a596952ddb082e28 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 10 Feb 2019 21:54:02 -0800 Subject: [PATCH 04/11] Update content/docs/faq-state.md Co-Authored-By: ginpei --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 55c0a734b..aabda4dc6 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -12,7 +12,7 @@ category: FAQ ### `state` と `props` の違いは何ですか？ {#what-is-the-difference-between-state-and-props} -[`props`](/docs/components-and-props.html)（"properties" を短くしたもの）と [`state`](/docs/state-and-lifecycle.html) は、両方ともプレーンなJavaScriptのオブジェクトです。どちらもレンダー結果に影響を及ぼす情報を持ってはいますが、ある重要な一点が異なっています。つまり、`props` は（関数引数のように）コンポーネント*へ*渡されるのに対し、`state` は（関数内で宣言された変数のように）コンポーネント*の内部*で制御されます。 +[`props`](/docs/components-and-props.html)（"properties" を短くしたもの）と [`state`](/docs/state-and-lifecycle.html) は、両方ともプレーンな JavaScript のオブジェクトです。どちらもレンダー結果に影響を及ぼす情報を持ってはいますが、ある重要な一点が異なっています。つまり、`props` は（関数引数のように）コンポーネント*へ*渡されるのに対し、`state` は（関数内で宣言された変数のように）コンポーネント*の内部*で制御されます。 `props` と `state` のどちらをいつ使うべきかについて、こちらでより詳しく読むことができます。 * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) From 354f997bd18d16be4f48177a641719c99608f22d Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 10 Feb 2019 21:55:11 -0800 Subject: [PATCH 05/11] Update content/docs/faq-state.md Co-Authored-By: ginpei --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index aabda4dc6..03d5c16f7 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -37,7 +37,7 @@ handleSomething() { this.incrementCount(); this.incrementCount(); this.incrementCount(); - // React がコンポーネントを再レンダーしても、 `this.state.count` は意図通りの 3 ではなく 1 になります。 + // React がコンポーネントを再レンダーしても、`this.state.count` は意図通りの 3 ではなく 1 になります。 // これは、上記の `incrementCount()` 関数は `this.state.count` の値を読むのですが、 // しかしコンポーネントが再レンダーされるまで React が `this.state.count` を更新しないためです。 From 76c5c22e3f4647989025ac2a3e59d87649c8d4d7 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 10 Feb 2019 21:55:30 -0800 Subject: [PATCH 06/11] Update content/docs/faq-state.md Co-Authored-By: ginpei --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 03d5c16f7..257086687 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -84,7 +84,7 @@ handleSomething() { 例えばクリックイベントの間に `Parent` と `Child` の両方が `setState` を呼ぶとき、非同期処理のおかげで `Child` が2度レンダーされないことが保証されます。その代わりにReactはブラウザイベントの最後に state の更新を「フラッシュ (flush)」します。これにより大規模アプリのパフォーマンスが大幅に向上します。 -これは実装の詳細ですので、この仕組みに直接依存しないようにしてください。将来のバージョンにおいて、Reactはより多くの場合にバッチ更新するようになります。 +これは実装の詳細ですので、この仕組みに直接依存しないようにしてください。将来のバージョンにおいて、React はより多くの場合にバッチ更新するようになります。 ### どうして React は `this.state` を同期的に更新しないのですか？ {#why-doesnt-react-update-thisstate-synchronously} From 1d62c97218d66feab5437cb97d9e3c8dea3885be Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 10 Feb 2019 21:56:58 -0800 Subject: [PATCH 07/11] Update content/docs/faq-state.md Co-Authored-By: ginpei --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 257086687..180ca9661 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -101,6 +101,6 @@ handleSomething() { ### Redux や MobX のような state 管理ライブラリを使うべきでしょうか？ {#should-i-use-a-state-management-library-like-redux-or-mobx} -[そうかもしれません。](https://redux.js.org/faq/general#when-should-i-use-redux) +[時には必要かもしれません。](https://redux.js.org/faq/general#when-should-i-use-redux) まずは他のライブラリを追加する前にReactを理解することをお勧めします。React だけでも非常に複雑なアプリケーションを作り上げることができます。 From 8ff6c3038278b131cd5ba9e0b3cf8cc78fb601a8 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 10 Feb 2019 21:57:05 -0800 Subject: [PATCH 08/11] Update content/docs/faq-state.md Co-Authored-By: ginpei --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 180ca9661..cccb91928 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -103,4 +103,4 @@ handleSomething() { [時には必要かもしれません。](https://redux.js.org/faq/general#when-should-i-use-redux) -まずは他のライブラリを追加する前にReactを理解することをお勧めします。React だけでも非常に複雑なアプリケーションを作り上げることができます。 +まずは他のライブラリを追加する前に React を理解することをお勧めします。React だけでも非常に複雑なアプリケーションを作り上げることができます。 From 5de8becffa97ee4ff90e50f36bcfc334438fe454 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 10 Feb 2019 21:57:32 -0800 Subject: [PATCH 09/11] Update content/docs/faq-state.md Co-Authored-By: ginpei --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index cccb91928..21ad23ae3 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -20,7 +20,7 @@ category: FAQ ### `setState` が誤った値を返すのはなぜですか？ {#why-is-setstate-giving-me-the-wrong-value} -Reactでは、`this.props` の `this.state` いずれも*レンダーされた*もの、つまりスクリーン上の値を表しています。 +React では、`this.props` と `this.state` のいずれも、*レンダーされた*もの、つまりスクリーン上の値を表しています。 `setState` 呼び出しは非同期です。呼び出し直後から `this.state` が新しい値を反映することを期待しないでください。もし現在の state に基づいた値を計算する必要がある場合は、オブジェクトの代わりに更新関数を渡してください。（詳しくは以下を参照） From aeb2b088547cfc34485c3d0c2db89a61bd677200 Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Wed, 13 Feb 2019 16:50:52 -0800 Subject: [PATCH 10/11] Update content/docs/faq-state.md Co-Authored-By: ginpei --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 21ad23ae3..7531d77bc 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -33,7 +33,7 @@ incrementCount() { } handleSomething() { - // `this.state.count` は 0 から始まるとしす。 + // `this.state.count` は 0 から始まるとします。 this.incrementCount(); this.incrementCount(); this.incrementCount(); From 2adb438c3062a3b2b5db82e90dbc5230474ea1f7 Mon Sep 17 00:00:00 2001 From: ginpei Date: Wed, 13 Feb 2019 18:16:06 -0800 Subject: [PATCH 11/11] spaces between en and ja --- content/docs/faq-state.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 7531d77bc..ef166c865 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -8,7 +8,7 @@ category: FAQ ### `setState` は何をしているのですか？ {#what-does-setstate-do} -`setState()` はコンポーネントの `state` オブジェクト更新をスケジュールします。 state が更新されると、コンポーネントはそれに再レンダーで応じます。 +`setState()` はコンポーネントの `state` オブジェクト更新をスケジュールします。state が更新されると、コンポーネントはそれに再レンダーで応じます。 ### `state` と `props` の違いは何ですか？ {#what-is-the-difference-between-state-and-props} @@ -82,7 +82,7 @@ handleSomething() { 現在、`setState` はイベントハンドラの内側では非同期です。 -例えばクリックイベントの間に `Parent` と `Child` の両方が `setState` を呼ぶとき、非同期処理のおかげで `Child` が2度レンダーされないことが保証されます。その代わりにReactはブラウザイベントの最後に state の更新を「フラッシュ (flush)」します。これにより大規模アプリのパフォーマンスが大幅に向上します。 +例えばクリックイベントの間に `Parent` と `Child` の両方が `setState` を呼ぶとき、非同期処理のおかげで `Child` が 2 度レンダーされないことが保証されます。その代わりに React はブラウザイベントの最後に state の更新を「フラッシュ (flush)」します。これにより大規模アプリのパフォーマンスが大幅に向上します。 これは実装の詳細ですので、この仕組みに直接依存しないようにしてください。将来のバージョンにおいて、React はより多くの場合にバッチ更新するようになります。 @@ -92,7 +92,7 @@ handleSomething() { とはいえ、React がどうして再レンダーなしに `this.state` を即時更新しないのか、まだ疑問に思っているかもしれません。 -これには主に2つの理由があります。 +これには主に 2 つの理由があります。 * 同期的更新が `props` と `state` の間の一貫性を破壊し、非常にデバッグが難しい問題を引き起こしうるため。 * 同期的更新が、我々が取り組んでいる新機能のいくつかを実装不可能にしうるため。