docs(thinking-in-react): Thinking in React - Step 4

Author: Nkzn

content/docs/thinking-in-react.md

@@ -105,30 +105,30 @@ UI をインタラクティブなものにするにあたり、UIを構築する
   * ユーザーが入力した検索文字列
   * チェックボックスの値
 
-## Step 4: Identify Where Your State Should Live
+## Step 4：state をどこに配置するべきなのかを明確にする
 
 <p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="http://codepen.io">CodePen</a>.</p>
 
-OK, so we've identified what the minimal set of app state is. Next, we need to identify which component mutates, or *owns*, this state.
+さて、state の最小構成が明確になりました。次は、どのコンポーネントを変化させるのか、そして*どのコンポーネントが state を持つのか*を明確にしましょう。
 
-Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
+復習：React は、コンポーネントの階層構造をデータが下っていく、単方向データフローで成り立っています。もしかすると、どのコンポーネントがどんな state を持つべきなのかが、すぐにはわからないかもしれません。**これは、初学者がReactへの理解を深める上で、最も難しい問題になりがちなところ** なので、ステップを踏みながら理解していきましょう。
 
-For each piece of state in your application:
+アプリの各 state について、次の各項目を確認していきます。
 
-  * Identify every component that renders something based on that state.
-  * Find a common owner component (a single component above all the components that need the state in the hierarchy).
-  * Either the common owner or another component higher up in the hierarchy should own the state.
-  * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
+  * その state を使って表示を行う、すべてのコンポーネントを確認する
+  * 共通の親コンポーネントを見つける（その階層構造の中で、ある state を必要としているすべてのコンポーネントの真上にある単一のコンポーネントのことです）
+  * 共通の親コンポーネントか、その階層構造でさらに上位の別のコンポーネントが state を持っているべきである
+  * もし state を持つにふさわしいコンポーネントを見つけられなかった場合は、state を保持するためのコンポーネントを作り、そこに state を置いた上で、階層構造の中ですでに見つけていた共通の親コンポーネントの上に配置する
 
-Let's run through this strategy for our application:
+それでは、この戦術をサンプルアプリにも適用してみましょう。
 
-  * `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
-  * The common owner component is `FilterableProductTable`.
-  * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
+  * `ProductTable` は商品リストをフィルタする必要があり、`SearchBar` は検索文字列とチェック状態を表示する必要がある
+  * 共通の親コンポーネントは `FilterableProductTable` である
+  * 概念的にも、検索文字列とチェック状態が `FilterableProductTable` に配置されることは妥当である
 
-Cool, so we've decided that our state lives in `FilterableProductTable`. First, add an instance property `this.state = {filterText: '', inStockOnly: false}` to `FilterableProductTable`'s `constructor` to reflect the initial state of your application. Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`.
+いいですね。 state を `FilterableProductTable` の中に配置することが決まりました。では早速、インスタンス変数として `this.state = {filterText: '', inStockOnly: false}` を `FilterableProductTable` の `constructor` に追加して、初期状態をアプリに反映しましょう。その次は、`filterText` と `inStockOnly` を `ProductTable` と `SearchBar` に props として渡します。最後に、これらの props を使って `ProductTable` のフィルタ処理を行い、`SearchBar` のフォームにも値を埋めます。
 
-You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see that the data table is updated correctly.
+これで、このアプリがどんな振る舞いをするのか見られるようになってきました。`filterText` に `"ball"` と入力した状態でアプリを更新すると、データの表が正しく更新されたことが確認できるはずです。
 
 ## Step 5: Add Inverse Data Flow