From 77dc0182cdeab9f1d0a683a43d3852a957468a81 Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Sun, 3 Feb 2019 11:51:45 +0900
Subject: [PATCH 01/15] Translate first section

---
 content/docs/render-props.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index ba396ce12..79e9f310b 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -1,12 +1,13 @@
 ---
 id: render-props
-title: Render Props
+title: レンダープロップ
 permalink: docs/render-props.html
 ---
 
-The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a technique for sharing code between React components using a prop whose value is a function.
+[「レンダープロップ」](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)とは、値が関数となる props を持ったコンポーネント間でコードを共有するためのテクニックの1つです。
+
+レンダープロップを持つコンポーネントは、自身のレンダーロジックを実装する代わりに、React 要素を返す関数を受け取ってそれを呼び出します。
 
-A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
 
 ```jsx
 <DataProvider render={data => (
@@ -14,9 +15,9 @@ A component with a render prop takes a function that returns a React element and
 )}/>
 ```
 
-Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift).
+レンダープロップを用いたライブラリとしては、[React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) や [Downshift](https://github.com/paypal/downshift) などがあります。
 
-In this document, we’ll discuss why render props are useful, and how to write your own.
+このドキュメントでは、レンダープロップが役立つ理由と、その記述法について解説します。
 
 ## Use Render Props for Cross-Cutting Concerns
 

From 12445ab9f6ae84638bde1b8b4fac38fcd0405360 Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Sun, 3 Feb 2019 18:00:25 +0900
Subject: [PATCH 02/15] Translate second section

---
 content/docs/render-props.md | 64 +++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 79e9f310b..7a3809c23 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -19,12 +19,14 @@ permalink: docs/render-props.html
 
 このドキュメントでは、レンダープロップが役立つ理由と、その記述法について解説します。
 
-## Use Render Props for Cross-Cutting Concerns
+## 横断的関心事にレンダープロップを使う
 
-Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.
+コンポーネントは、React でコードを再利用するための主要な構成用要素ですが、あるコンポーネントがカプセル化した state や振る舞いを、同じ state を必要とする別のコンポーネントに共有する方法については、いつも明らかであるとは限りません。
 
 For example, the following component tracks the mouse position in a web app:
 
+たとえば、以下のコンポーネントは、ウェブアプリケーション内でのマウスの位置を追跡します。
+
 ```js
 class MouseTracker extends React.Component {
   constructor(props) {
@@ -43,22 +45,22 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>Move the mouse around!</h1>
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        <h1>マウスを動かしてみましょう！</h1>
+        <p>現在のマウスの位置は ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
 }
 ```
 
-As the cursor moves around the screen, the component displays its (x, y) coordinates in a `<p>`.
+画面上でカーソルが移動すると、コンポーネントはその (x, y) 座標を `<p>` 内に表示します。
 
-Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component?
+ここで疑問となるのは、この振る舞いを他のコンポーネントで再利用する方法です。つまり、他のコンポーネントもカーソルの位置を知る必要がある時、この振る舞いだけをカプセル化し、そのコンポーネントと簡単に共有することは可能でしょうか？
 
-Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `<Mouse>` component that encapsulates the behavior we need to reuse elsewhere.
+コンポーネントは React におけるコード再利用の基本構成要素ですので、コードを少しリファクタリングして、他で再利用する必要のあるこの振る舞いをカプセル化するための `<Mouse>` コンポーネントを使ってみましょう。
 
 ```js
-// The <Mouse> component encapsulates the behavior we need...
+// <Mouse> コンポーネントは必要な振る舞いだけをカプセル化します...
 class Mouse extends React.Component {
   constructor(props) {
     super(props);
@@ -77,8 +79,8 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...but how do we render something other than a <p>? */}
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        {/* ...しかし、どのようにして <p> 以外のものをレンダーするのでしょうか？ */}
+        <p>現在のマウスの位置は ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -88,7 +90,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>マウスを動かしてみましょう！</h1>
         <Mouse />
       </div>
     );
@@ -96,11 +98,11 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now the `<Mouse>` component encapsulates all behavior associated with listening for `mousemove` events and storing the (x, y) position of the cursor, but it's not yet truly reusable.
+これで `<Mouse>` コンポーネントは、 `mousemove` イベントに応答しカーソルの (x, y) 座標を保持することで構成される全ての振る舞いをカプセル化できましたが、まだ再利用可能と言うには不十分です。
 
-For example, let's say we have a `<Cat>` component that renders the image of a cat chasing the mouse around the screen. We might use a `<Cat mouse={{ x, y }}>` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen.
+たとえば、 猫の画像が画面中のマウスを追いかけるという `<Cat>` コンポーネントがあるとしましょう。`<Cat mouse={{ x, y }}>` props を使って、このコンポーネントにマウスの座標を受け渡し、画面上のどこに猫の画像を配置すれば良いかを知らせたいでしょう。
 
-As a first pass, you might try rendering the `<Cat>` *inside `<Mouse>`'s `render` method*, like this:
+手始めに、*`<Mouse>` の `render` メソッド内* で、以下のように `<Cat>` をレンダーしようとするかもしれません。 
 
 ```js
 class Cat extends React.Component {
@@ -131,10 +133,10 @@ class MouseWithCat extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          We could just swap out the <p> for a <Cat> here ... but then
-          we would need to create a separate <MouseWithSomethingElse>
-          component every time we need to use it, so <MouseWithCat>
-          isn't really reusable yet.
+          ここで <p> を <Cat> に差し替えることができますが...
+          それを使用するたびに別途 <MouseWithSomethingElse>
+          コンポーネントを作成する必要があるため、
+          <MouseWithCat> はまだ真に再利用可能になったとは言えません。 
         */}
         <Cat mouse={this.state} />
       </div>
@@ -146,7 +148,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>マウスを動かしてみましょう！</h1>
         <MouseWithCat />
       </div>
     );
@@ -154,9 +156,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another `<MouseWithCat>`) that renders something specifically for that use case.
+これだけが目的であればで正しく動作しますが、再利用可能な方法でこの振る舞いをカプセル化するという目的はまだ果たせていません。その他のユースケースでもマウス位置を知りたい場合、毎回新しいコンポーネント（つまり、別の `<MouseWithCat>` のようなもの）を作成して、そのユースケース固有のレンダー処理を行う必要があります。
 
-Here's where the render prop comes in: Instead of hard-coding a `<Cat>` inside a `<Mouse>` component, and effectively changing its rendered output, we can provide `<Mouse>` with a function prop that it uses to dynamically determine what to render–a render prop.
+ここでレンダープロップの出番となります。`<Mouse>` コンポーネント内でハードコードされた `<Cat>` でレンダーの出力を変更する代わりに、`<Mouse>` コンポーネントに関数型の props を渡して、 何をレンダーすべきかを動的に決定することが可能です。これがレンダープロップの役割です。
 
 ```js
 class Cat extends React.Component {
@@ -187,8 +189,8 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          Instead of providing a static representation of what <Mouse> renders,
-          use the `render` prop to dynamically determine what to render.
+          <Mouse> がレンダーするものを静的に表現する代わりに、
+          propsとしての `render` を使うことでレンダーするものを動的に決定します。
         */}
         {this.props.render(this.state)}
       </div>
@@ -200,7 +202,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>マウスを動かしてみましょう！</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -210,17 +212,19 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
+これで特定のユースケースを解決するために、`<Mouse>` コンポーネントを複製してレンダーメソッド内で何か他のものをハードコードする代わりに、`<Mouse>` が動的にレンダーの内容を決定するためのpropsとしての `render` が提供可能になります。
 
 More concretely, **a render prop is a function prop that a component uses to know what to render.**
 
-This technique makes the behavior that we need to share extremely portable. To get that behavior, render a `<Mouse>` with a `render` prop that tells it what to render with the current (x, y) of the cursor.
+より具体的には、**レンダープロップは関数型 props であり、それによってコンポーネントがレンダリングするものを知ることができます。**
+
+このテクニックによって、再利用可能な振る舞いの移植性が極めて高くなります。この振る舞いが必要な時には、現在のカーソルの (x, y) からレンダリングするものを示す `render` props を使って `<Mouse>` をレンダーすれば良いのです。  
 
-One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `<Mouse>` component, you could easily create one using a regular `<Mouse>` with a render prop:
+レンダープロップの興味深い点として、多くの[高階コンポーネント](/docs/higher-order-components.html) (HOC) がレンダープロップを使った通常のコンポーネントによって実装可能ということが挙げられます。たとえば、`<Mouse>` コンポーネントよりも `withMouse` HOCが好みであれば、レンダープロップを有する `<Mouse>` を使って簡単に作成可能です。 
 
 ```js
-// If you really want a HOC for some reason, you can easily
-// create one using a regular component with a render prop!
+// HOCを選択する理由があれば、
+// 通常のコンポーネントとレンダープロップを使うことで簡単に作成可能です！
 function withMouse(Component) {
   return class extends React.Component {
     render() {
@@ -234,7 +238,7 @@ function withMouse(Component) {
 }
 ```
 
-So using a render prop makes it possible to use either pattern.
+つまり、レンダープロップによってどちらのパターンも可能になります。
 
 ## Using Props Other Than `render`
 

From a80130a11ce9e152cdfe195b70755ee0d7223c5a Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Sun, 3 Feb 2019 20:04:34 +0900
Subject: [PATCH 03/15] Translate third section

---
 content/docs/render-props.md | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 7a3809c23..2c8260db2 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -240,11 +240,11 @@ function withMouse(Component) {
 
 つまり、レンダープロップによってどちらのパターンも可能になります。
 
-## Using Props Other Than `render`
+## `render` 以外の props を使う
 
-It's important to remember that just because the pattern is called "render props" you don't *have to use a prop named `render` to use this pattern*. In fact, [*any* prop that is a function that a component uses to know what to render is technically a "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+「レンダープロップ」と呼ばれるパターンは、必ずしも*`render` という名前の props を使う必要はない*ということを念頭に置いてください。実際、[コンポーネントがレンダーするものを知るための関数型 props であれば、*その名前が何であれ*、技術的には「レンダープロップ」と呼ぶことができます](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)。
 
-Although the examples above use `render`, we could just as easily use the `children` prop!
+上記の例では `rendrer` を用いていますが、`children` props を使っても同じくらい簡単です！
 
 ```js
 <Mouse children={mouse => (
@@ -252,7 +252,7 @@ Although the examples above use `render`, we could just as easily use the `child
 )}/>
 ```
 
-And remember, the `children` prop doesn't actually need to be named in the list of "attributes" in your JSX element. Instead, you can put it directly *inside* the element!
+さらに、`children` props は実際には JSX 要素の「属性」の一覧内で名前を付ける必要がないことも忘れないでください。代わりに、要素*内部に*直接設定可能です！
 
 ```js
 <Mouse>
@@ -262,10 +262,13 @@ And remember, the `children` prop doesn't actually need to be named in the list
 </Mouse>
 ```
 
-You'll see this technique used in the [react-motion](https://github.com/chenglou/react-motion) API.
+このテクニックは、 [react-motion](https://github.com/chenglou/react-motion)  の API などで使用されています。
+
 
 Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this.
 
+このテクニックは若干珍しいため、このようなAPI設計時には、`children` が関数であることを `propTypes` で明示した方が良いでしょう。
+
 ```js
 Mouse.propTypes = {
   children: PropTypes.func.isRequired

From 431898befcba0dc87e8a040bb1604f99211e2283 Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Sun, 3 Feb 2019 21:23:46 +0900
Subject: [PATCH 04/15] Translate fourth section

---
 content/docs/render-props.md | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 2c8260db2..afe4cc078 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -275,13 +275,15 @@ Mouse.propTypes = {
 };
 ```
 
-## Caveats
+## 注意事項
 
 ### Be careful when using Render Props with React.PureComponent
 
-Using a render prop can negate the advantage that comes from using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) if you create the function inside a `render` method. This is because the shallow prop comparison will always return `false` for new props, and each `render` in this case will generate a new value for the render prop.
+### レンダープロップを React.PureComponent で使うときの注意点
 
-For example, continuing with our `<Mouse>` component from above, if `Mouse` were to extend `React.PureComponent` instead of `React.Component`, our example would look like this:
+レンダープロップを使う際、`render` メソッド内で関数を作成していると、 [`React.PureComponent`](/docs/react-api.html#reactpurecomponent)  を使う利点が相殺されます。これは新しい props については、浅い比較が常に `false` を返し、このような `render` は毎回レンダープロップとして新しい値を生成するためです。
+
+たとえば、上記の `<Mouse>` コンポーネントの場合、`Mouse` が `React.Component` ではなく `React.PureComponent` を継承していたとすると、次のようになります。 
 
 ```js
 class Mouse extends React.PureComponent {
@@ -307,9 +309,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In this example, each time `<MouseTracker>` renders, it generates a new function as the value of the `<Mouse render>` prop, thus negating the effect of `<Mouse>` extending `React.PureComponent` in the first place!
+この例では、`<MouseTracker>` がレンダーされるたび、`<Mouse render>` propsの値として新しい関数が生成されますので、冒頭で `React.PureComonent` を継承した `<Mouse>` の効果が相殺されます。
 
-To get around this problem, you can sometimes define the prop as an instance method, like so:
+この問題を回避するため、props をインスタンスメソッドとして次のように定義することもできます。
 
 ```js
 class MouseTracker extends React.Component {
@@ -330,4 +332,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) `<Mouse>` should extend `React.Component` instead.
+propsを静的に定義できない場合（たとえば、コンポーネントの props や state を閉じる必要があるなど）、`<Mouse>` は代わりに `React.Component` を継承すべきです。

From f7c7bac2341d4a6ea2dfe330f9b7676e3b01a8e1 Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Sun, 3 Feb 2019 21:34:18 +0900
Subject: [PATCH 05/15] Revert translation in code

---
 content/docs/render-props.md | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index afe4cc078..6d9d216ba 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -45,8 +45,8 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>マウスを動かしてみましょう！</h1>
-        <p>現在のマウスの位置は ({this.state.x}, {this.state.y})</p>
+        <h1>Move the mouse around!</h1>
+        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -60,7 +60,7 @@ class MouseTracker extends React.Component {
 コンポーネントは React におけるコード再利用の基本構成要素ですので、コードを少しリファクタリングして、他で再利用する必要のあるこの振る舞いをカプセル化するための `<Mouse>` コンポーネントを使ってみましょう。
 
 ```js
-// <Mouse> コンポーネントは必要な振る舞いだけをカプセル化します...
+// The <Mouse> component encapsulates the behavior we need...
 class Mouse extends React.Component {
   constructor(props) {
     super(props);
@@ -79,8 +79,8 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...しかし、どのようにして <p> 以外のものをレンダーするのでしょうか？ */}
-        <p>現在のマウスの位置は ({this.state.x}, {this.state.y})</p>
+        {/* ...but how do we render something other than a <p>? */}
+        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -90,7 +90,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>マウスを動かしてみましょう！</h1>
+        <h1>Move the mouse around!</h1>
         <Mouse />
       </div>
     );
@@ -133,10 +133,10 @@ class MouseWithCat extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          ここで <p> を <Cat> に差し替えることができますが...
-          それを使用するたびに別途 <MouseWithSomethingElse>
-          コンポーネントを作成する必要があるため、
-          <MouseWithCat> はまだ真に再利用可能になったとは言えません。 
+          We could just swap out the <p> for a <Cat> here ... but then
+          we would need to create a separate <MouseWithSomethingElse>
+          component every time we need to use it, so <MouseWithCat>
+          isn't really reusable yet.
         */}
         <Cat mouse={this.state} />
       </div>
@@ -148,7 +148,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>マウスを動かしてみましょう！</h1>
+        <h1>Move the mouse around!</h1>
         <MouseWithCat />
       </div>
     );
@@ -189,8 +189,8 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          <Mouse> がレンダーするものを静的に表現する代わりに、
-          propsとしての `render` を使うことでレンダーするものを動的に決定します。
+          Instead of providing a static representation of what <Mouse> renders,
+          use the `render` prop to dynamically determine what to render.
         */}
         {this.props.render(this.state)}
       </div>
@@ -223,8 +223,8 @@ More concretely, **a render prop is a function prop that a component uses to kno
 レンダープロップの興味深い点として、多くの[高階コンポーネント](/docs/higher-order-components.html) (HOC) がレンダープロップを使った通常のコンポーネントによって実装可能ということが挙げられます。たとえば、`<Mouse>` コンポーネントよりも `withMouse` HOCが好みであれば、レンダープロップを有する `<Mouse>` を使って簡単に作成可能です。 
 
 ```js
-// HOCを選択する理由があれば、
-// 通常のコンポーネントとレンダープロップを使うことで簡単に作成可能です！
+// If you really want a HOC for some reason, you can easily
+// create one using a regular component with a render prop!
 function withMouse(Component) {
   return class extends React.Component {
     render() {

From e47d7e553d1b2734bf7e5abbaf9ca4c1c6f9a82d Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Sun, 3 Feb 2019 21:35:33 +0900
Subject: [PATCH 06/15] Revert translation in code

---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 6d9d216ba..103052ce7 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -202,7 +202,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>マウスを動かしてみましょう！</h1>
+        <h1>Move the mouse around!</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>

From 32ca9d07682378c343f3997820e91ffcc7fae60c Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Sun, 3 Feb 2019 21:37:23 +0900
Subject: [PATCH 07/15] Remove unnecessary empty line

---
 content/docs/render-props.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 103052ce7..98c622fdb 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -8,7 +8,6 @@ permalink: docs/render-props.html
 
 レンダープロップを持つコンポーネントは、自身のレンダーロジックを実装する代わりに、React 要素を返す関数を受け取ってそれを呼び出します。
 
-
 ```jsx
 <DataProvider render={data => (
   <h1>Hello {data.target}</h1>

From f2dd51076ed7103758ed5b98214f893a76f09139 Mon Sep 17 00:00:00 2001
From: Daiki Ihara <sasurau4@gmail.com>
Date: Tue, 5 Feb 2019 15:54:39 +0900
Subject: [PATCH 08/15] Apply suggestions from code review

Co-Authored-By: ossan-engineer <bodega1123@gmail.com>
---
 content/docs/render-props.md | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 98c622fdb..709dd46e7 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,7 +4,7 @@ title: レンダープロップ
 permalink: docs/render-props.html
 ---
 
-[「レンダープロップ」](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)とは、値が関数となる props を持ったコンポーネント間でコードを共有するためのテクニックの1つです。
+[「レンダープロップ」](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)とは、値が関数となる props を持ったコンポーネント間でコードを共有するためのテクニックを表す用語です。
 
 レンダープロップを持つコンポーネントは、自身のレンダーロジックを実装する代わりに、React 要素を返す関数を受け取ってそれを呼び出します。
 
@@ -20,9 +20,8 @@ permalink: docs/render-props.html
 
 ## 横断的関心事にレンダープロップを使う
 
-コンポーネントは、React でコードを再利用するための主要な構成用要素ですが、あるコンポーネントがカプセル化した state や振る舞いを、同じ state を必要とする別のコンポーネントに共有する方法については、いつも明らかであるとは限りません。
+コンポーネントは、React でコードを再利用するための主な要素ですが、あるコンポーネントがカプセル化した state や振る舞いを、同じ state を必要とする別のコンポーネントに共有する方法については、いつも明らかであるとは限りません。
 
-For example, the following component tracks the mouse position in a web app:
 
 たとえば、以下のコンポーネントは、ウェブアプリケーション内でのマウスの位置を追跡します。
 
@@ -97,11 +96,11 @@ class MouseTracker extends React.Component {
 }
 ```
 
-これで `<Mouse>` コンポーネントは、 `mousemove` イベントに応答しカーソルの (x, y) 座標を保持することで構成される全ての振る舞いをカプセル化できましたが、まだ再利用可能と言うには不十分です。
+これで `<Mouse>` コンポーネントは、 `mousemove` イベントとカーソルの (x, y) 座標に紐付けられた全ての振る舞いをカプセル化できましたが、まだ再利用可能と言うには不十分です。
 
-たとえば、 猫の画像が画面中のマウスを追いかけるという `<Cat>` コンポーネントがあるとしましょう。`<Cat mouse={{ x, y }}>` props を使って、このコンポーネントにマウスの座標を受け渡し、画面上のどこに猫の画像を配置すれば良いかを知らせたいでしょう。
+たとえば、画面の中でマウスを追いかける猫の画像をレンダーする `<Cat>` コンポーネントがあるとしましょう。`<Cat mouse={{ x, y }}>` props を使って、このコンポーネントにマウスの座標を受け渡し、画面上のどこに猫の画像を配置すれば良いかを知らせたいでしょう。
 
-手始めに、*`<Mouse>` の `render` メソッド内* で、以下のように `<Cat>` をレンダーしようとするかもしれません。 
+手始めに、*`<Mouse>` の `render` メソッド内* で、以下のように `<Cat>` をレンダーしてみましょう。
 
 ```js
 class Cat extends React.Component {
@@ -155,7 +154,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-これだけが目的であればで正しく動作しますが、再利用可能な方法でこの振る舞いをカプセル化するという目的はまだ果たせていません。その他のユースケースでもマウス位置を知りたい場合、毎回新しいコンポーネント（つまり、別の `<MouseWithCat>` のようなもの）を作成して、そのユースケース固有のレンダー処理を行う必要があります。
+これだけが目的であれば正しく動作しますが、再利用可能な方法でこの振る舞いをカプセル化するという目的はまだ果たせていません。他の異なるユースケースでもマウスの位置を知りたい場合、毎回そのユースケースに沿ったものをレンダーする新しいコンポーネント（つまり、本質的に別の `<MouseWithCat>`）を作成する必要があります。
 
 ここでレンダープロップの出番となります。`<Mouse>` コンポーネント内でハードコードされた `<Cat>` でレンダーの出力を変更する代わりに、`<Mouse>` コンポーネントに関数型の props を渡して、 何をレンダーすべきかを動的に決定することが可能です。これがレンダープロップの役割です。
 
@@ -211,15 +210,14 @@ class MouseTracker extends React.Component {
 }
 ```
 
-これで特定のユースケースを解決するために、`<Mouse>` コンポーネントを複製してレンダーメソッド内で何か他のものをハードコードする代わりに、`<Mouse>` が動的にレンダーの内容を決定するためのpropsとしての `render` が提供可能になります。
+これで特定のユースケースを解決するために、`<Mouse>` コンポーネントを複製したり、`render` メソッド内で何か他のものをハードコードする代わりに、`<Mouse>` が動的に何をレンダーするかを決定するための `render` プロパティが使えるようになります。
 
-More concretely, **a render prop is a function prop that a component uses to know what to render.**
 
-より具体的には、**レンダープロップは関数型 props であり、それによってコンポーネントがレンダリングするものを知ることができます。**
+より具体的には、**レンダープロップはあるコンポーネントが何をレンダーすべきかを知るための関数型 props なのです。**
 
 このテクニックによって、再利用可能な振る舞いの移植性が極めて高くなります。この振る舞いが必要な時には、現在のカーソルの (x, y) からレンダリングするものを示す `render` props を使って `<Mouse>` をレンダーすれば良いのです。  
 
-レンダープロップの興味深い点として、多くの[高階コンポーネント](/docs/higher-order-components.html) (HOC) がレンダープロップを使った通常のコンポーネントによって実装可能ということが挙げられます。たとえば、`<Mouse>` コンポーネントよりも `withMouse` HOCが好みであれば、レンダープロップを有する `<Mouse>` を使って簡単に作成可能です。 
+レンダープロップの興味深い点として、多くの[高階コンポーネント](/docs/higher-order-components.html) (HOC) がレンダープロップを使った通常のコンポーネントによって実装可能ということが挙げられます。たとえば、`<Mouse>` コンポーネントよりも `withMouse` HOC が好みであれば、レンダープロップを持つ `<Mouse>` を使って簡単に作成可能です。 
 
 ```js
 // If you really want a HOC for some reason, you can easily
@@ -264,7 +262,6 @@ function withMouse(Component) {
 このテクニックは、 [react-motion](https://github.com/chenglou/react-motion)  の API などで使用されています。
 
 
-Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this.
 
 このテクニックは若干珍しいため、このようなAPI設計時には、`children` が関数であることを `propTypes` で明示した方が良いでしょう。
 
@@ -276,11 +273,10 @@ Mouse.propTypes = {
 
 ## 注意事項
 
-### Be careful when using Render Props with React.PureComponent
 
 ### レンダープロップを React.PureComponent で使うときの注意点
 
-レンダープロップを使う際、`render` メソッド内で関数を作成していると、 [`React.PureComponent`](/docs/react-api.html#reactpurecomponent)  を使う利点が相殺されます。これは新しい props については、浅い比較が常に `false` を返し、このような `render` は毎回レンダープロップとして新しい値を生成するためです。
+レンダープロップを使う際、`render` メソッド内で関数を作成していると、 [`React.PureComponent`](/docs/react-api.html#reactpurecomponent)  を使う利点が相殺されます。これは新しい props については、props 同士の浅い (shallow) 比較が常に `false` を返し、このような `render` は毎回レンダープロップとして新しい値を生成するためです。
 
 たとえば、上記の `<Mouse>` コンポーネントの場合、`Mouse` が `React.Component` ではなく `React.PureComponent` を継承していたとすると、次のようになります。 
 

From 654c468274fbae2962f0910d706e29163ae1f61e Mon Sep 17 00:00:00 2001
From: Daiki Ihara <sasurau4@gmail.com>
Date: Tue, 5 Feb 2019 16:04:00 +0900
Subject: [PATCH 09/15] Apply suggestions from code review

Co-Authored-By: ossan-engineer <bodega1123@gmail.com>
---
 content/docs/render-props.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 709dd46e7..e20db38a2 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -215,7 +215,7 @@ class MouseTracker extends React.Component {
 
 より具体的には、**レンダープロップはあるコンポーネントが何をレンダーすべきかを知るための関数型 props なのです。**
 
-このテクニックによって、再利用可能な振る舞いの移植性が極めて高くなります。この振る舞いが必要な時には、現在のカーソルの (x, y) からレンダリングするものを示す `render` props を使って `<Mouse>` をレンダーすれば良いのです。  
+このテクニックによって、再利用する必要がある振る舞いの移植性が極めて高くなります。その振る舞いをさせるためには、現在のカーソルの (x, y) 座標からレンダーするものを示す `render` プロパティ を使って `<Mouse>` をレンダーすれば良いのです。  
 
 レンダープロップの興味深い点として、多くの[高階コンポーネント](/docs/higher-order-components.html) (HOC) がレンダープロップを使った通常のコンポーネントによって実装可能ということが挙げられます。たとえば、`<Mouse>` コンポーネントよりも `withMouse` HOC が好みであれば、レンダープロップを持つ `<Mouse>` を使って簡単に作成可能です。 
 
@@ -241,7 +241,7 @@ function withMouse(Component) {
 
 「レンダープロップ」と呼ばれるパターンは、必ずしも*`render` という名前の props を使う必要はない*ということを念頭に置いてください。実際、[コンポーネントがレンダーするものを知るための関数型 props であれば、*その名前が何であれ*、技術的には「レンダープロップ」と呼ぶことができます](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)。
 
-上記の例では `rendrer` を用いていますが、`children` props を使っても同じくらい簡単です！
+上記の例では `rendrer` を用いていますが、`children` プロパティを使っても同じくらい簡単です！
 
 ```js
 <Mouse children={mouse => (
@@ -249,7 +249,7 @@ function withMouse(Component) {
 )}/>
 ```
 
-さらに、`children` props は実際には JSX 要素の「属性」の一覧内で名前を付ける必要がないことも忘れないでください。代わりに、要素*内部に*直接設定可能です！
+さらに、`children` プロパティは実際には JSX 要素の「属性」の一覧内で名前を付ける必要がないことも忘れないでください。代わりに、要素*内部に*直接設定可能です！
 
 ```js
 <Mouse>
@@ -304,9 +304,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-この例では、`<MouseTracker>` がレンダーされるたび、`<Mouse render>` propsの値として新しい関数が生成されますので、冒頭で `React.PureComonent` を継承した `<Mouse>` の効果が相殺されます。
+この例では、`<MouseTracker>` がレンダーされるたびに `<Mouse render>` プロパティの値として新しい関数が生成されますので、冒頭で `React.PureComonent` を継承した `<Mouse>` の効果が相殺されます。
 
-この問題を回避するため、props をインスタンスメソッドとして次のように定義することもできます。
+この問題を回避するため、レンダープロップをインスタンスメソッドとして次のように定義することもできます。
 
 ```js
 class MouseTracker extends React.Component {

From 6be0d6f57960f011ab1bacfe3109cd3a23d08b77 Mon Sep 17 00:00:00 2001
From: Kiichi Tachibana <>
Date: Tue, 5 Feb 2019 16:07:08 +0900
Subject: [PATCH 10/15] Apply textlint

---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index e20db38a2..b4708ea91 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -215,7 +215,7 @@ class MouseTracker extends React.Component {
 
 より具体的には、**レンダープロップはあるコンポーネントが何をレンダーすべきかを知るための関数型 props なのです。**
 
-このテクニックによって、再利用する必要がある振る舞いの移植性が極めて高くなります。その振る舞いをさせるためには、現在のカーソルの (x, y) 座標からレンダーするものを示す `render` プロパティ を使って `<Mouse>` をレンダーすれば良いのです。  
+このテクニックによって、再利用する必要がある振る舞いの移植性が極めて高くなります。その振る舞いをさせるためには、現在のカーソルの (x, y) 座標からレンダーするものを示す `render` プロパティを使って `<Mouse>` をレンダーすれば良いのです。  
 
 レンダープロップの興味深い点として、多くの[高階コンポーネント](/docs/higher-order-components.html) (HOC) がレンダープロップを使った通常のコンポーネントによって実装可能ということが挙げられます。たとえば、`<Mouse>` コンポーネントよりも `withMouse` HOC が好みであれば、レンダープロップを持つ `<Mouse>` を使って簡単に作成可能です。 
 

From 02fdce9e50fe59576eac66e9a5f4e9871cc57f53 Mon Sep 17 00:00:00 2001
From: Kiichi Tachibana <bodega1123@gmail.com>
Date: Wed, 6 Feb 2019 11:04:42 +0900
Subject: [PATCH 11/15] Apply suggestions from code review

Co-Authored-By: ossan-engineer <bodega1123@gmail.com>
---
 content/docs/render-props.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index b4708ea91..706f59a78 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,7 +4,7 @@ title: レンダープロップ
 permalink: docs/render-props.html
 ---
 
-[「レンダープロップ」](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)とは、値が関数となる props を持ったコンポーネント間でコードを共有するためのテクニックを表す用語です。
+["レンダープロップ (render prop)"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)という用語は、値が関数である props を使って、コンポーネント間でコードを共有するためのテクニックを指します。
 
 レンダープロップを持つコンポーネントは、自身のレンダーロジックを実装する代わりに、React 要素を返す関数を受け取ってそれを呼び出します。
 
@@ -16,11 +16,11 @@ permalink: docs/render-props.html
 
 レンダープロップを用いたライブラリとしては、[React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) や [Downshift](https://github.com/paypal/downshift) などがあります。
 
-このドキュメントでは、レンダープロップが役立つ理由と、その記述法について解説します。
+このドキュメントでは、レンダープロップが役立つ理由と、その実装手順について解説します。
 
 ## 横断的関心事にレンダープロップを使う
 
-コンポーネントは、React でコードを再利用するための主な要素ですが、あるコンポーネントがカプセル化した state や振る舞いを、同じ state を必要とする別のコンポーネントに共有する方法については、いつも明らかであるとは限りません。
+コンポーネントは、React でコードを再利用するための主な要素ですが、あるコンポーネントがカプセル化した state や振る舞いを、同じ state を必要とする別のコンポーネントと共有する方法については、あまり自明ではありません。
 
 
 たとえば、以下のコンポーネントは、ウェブアプリケーション内でのマウスの位置を追跡します。
@@ -55,7 +55,7 @@ class MouseTracker extends React.Component {
 
 ここで疑問となるのは、この振る舞いを他のコンポーネントで再利用する方法です。つまり、他のコンポーネントもカーソルの位置を知る必要がある時、この振る舞いだけをカプセル化し、そのコンポーネントと簡単に共有することは可能でしょうか？
 
-コンポーネントは React におけるコード再利用の基本構成要素ですので、コードを少しリファクタリングして、他で再利用する必要のあるこの振る舞いをカプセル化するための `<Mouse>` コンポーネントを使ってみましょう。
+コンポーネントは React でコードを再利用するための基本要素ですので、コードを少しリファクタリングし、他の場所で再利用したい振る舞いをカプセル化した `<Mouse>` というコンポーネントを作って、それを使うようにしてみましょう。
 
 ```js
 // The <Mouse> component encapsulates the behavior we need...
@@ -96,7 +96,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-これで `<Mouse>` コンポーネントは、 `mousemove` イベントとカーソルの (x, y) 座標に紐付けられた全ての振る舞いをカプセル化できましたが、まだ再利用可能と言うには不十分です。
+これで `<Mouse>` コンポーネントは、`mousemove` イベントとカーソルの (x, y) 座標に紐付けられた全ての振る舞いをカプセル化していますが、まだ再利用可能と言うには不十分です。
 
 たとえば、画面の中でマウスを追いかける猫の画像をレンダーする `<Cat>` コンポーネントがあるとしましょう。`<Cat mouse={{ x, y }}>` props を使って、このコンポーネントにマウスの座標を受け渡し、画面上のどこに猫の画像を配置すれば良いかを知らせたいでしょう。
 
@@ -156,7 +156,7 @@ class MouseTracker extends React.Component {
 
 これだけが目的であれば正しく動作しますが、再利用可能な方法でこの振る舞いをカプセル化するという目的はまだ果たせていません。他の異なるユースケースでもマウスの位置を知りたい場合、毎回そのユースケースに沿ったものをレンダーする新しいコンポーネント（つまり、本質的に別の `<MouseWithCat>`）を作成する必要があります。
 
-ここでレンダープロップの出番となります。`<Mouse>` コンポーネント内でハードコードされた `<Cat>` でレンダーの出力を変更する代わりに、`<Mouse>` コンポーネントに関数型の props を渡して、 何をレンダーすべきかを動的に決定することが可能です。これがレンダープロップの役割です。
+ここでレンダープロップの出番となります。`<Mouse>` コンポーネント内でハードコードされた `<Cat>` でレンダーの出力を変更する代わりに、`<Mouse>` コンポーネントに関数型の props を渡し、コンポーネントはその関数を使って何をレンダーすべきか動的に知るのです。これがレンダープロップの役割です。
 
 ```js
 class Cat extends React.Component {
@@ -210,12 +210,12 @@ class MouseTracker extends React.Component {
 }
 ```
 
-これで特定のユースケースを解決するために、`<Mouse>` コンポーネントを複製したり、`render` メソッド内で何か他のものをハードコードする代わりに、`<Mouse>` が動的に何をレンダーするかを決定するための `render` プロパティが使えるようになります。
+ここでは、特定のユースケースを解決するために `<Mouse>` コンポーネントを複製して `render` メソッドに他のものをハードコードする代わりに、`<Mouse>` に `render` プロパティを渡して、何をレンダーするか動的に決定できるようにしています。
 
 
-より具体的には、**レンダープロップはあるコンポーネントが何をレンダーすべきかを知るための関数型 props なのです。**
+より具体的に述べると、**レンダープロップとは、あるコンポーネントが何をレンダーすべきかを知るために使う関数型 props です。**
 
-このテクニックによって、再利用する必要がある振る舞いの移植性が極めて高くなります。その振る舞いをさせるためには、現在のカーソルの (x, y) 座標からレンダーするものを示す `render` プロパティを使って `<Mouse>` をレンダーすれば良いのです。  
+このテクニックによって、再利用する必要がある振る舞いの移植性が極めて高くなります。その振る舞いをさせるためには、現在のカーソルの (x, y) 座標にレンダーするものを示す `render` プロパティを使って `<Mouse>` をレンダーすれば良いのです。  
 
 レンダープロップの興味深い点として、多くの[高階コンポーネント](/docs/higher-order-components.html) (HOC) がレンダープロップを使った通常のコンポーネントによって実装可能ということが挙げられます。たとえば、`<Mouse>` コンポーネントよりも `withMouse` HOC が好みであれば、レンダープロップを持つ `<Mouse>` を使って簡単に作成可能です。 
 
@@ -239,7 +239,7 @@ function withMouse(Component) {
 
 ## `render` 以外の props を使う
 
-「レンダープロップ」と呼ばれるパターンは、必ずしも*`render` という名前の props を使う必要はない*ということを念頭に置いてください。実際、[コンポーネントがレンダーするものを知るための関数型 props であれば、*その名前が何であれ*、技術的には「レンダープロップ」と呼ぶことができます](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)。
+このパターンが「レンダープロップ」という名前だからといって、必ずしも *`render` という名前の props を使う必要はない*ということを念頭に置いてください。実際、[コンポーネントがレンダーするものを知るために使う関数型 props は、*その名前が何であれ*、技術的には「レンダープロップ」と呼ぶことができます](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)。
 
 上記の例では `rendrer` を用いていますが、`children` プロパティを使っても同じくらい簡単です！
 
@@ -259,11 +259,11 @@ function withMouse(Component) {
 </Mouse>
 ```
 
-このテクニックは、 [react-motion](https://github.com/chenglou/react-motion)  の API などで使用されています。
+このテクニックは、[react-motion](https://github.com/chenglou/react-motion) の API などで使用されています。
 
 
 
-このテクニックは若干珍しいため、このようなAPI設計時には、`children` が関数であることを `propTypes` で明示した方が良いでしょう。
+このテクニックは若干珍しいため、このような API 設計時には、`children` が関数であることを `propTypes` で明示した方が良いでしょう。
 
 ```js
 Mouse.propTypes = {
@@ -276,7 +276,7 @@ Mouse.propTypes = {
 
 ### レンダープロップを React.PureComponent で使うときの注意点
 
-レンダープロップを使う際、`render` メソッド内で関数を作成していると、 [`React.PureComponent`](/docs/react-api.html#reactpurecomponent)  を使う利点が相殺されます。これは新しい props については、props 同士の浅い (shallow) 比較が常に `false` を返し、このような `render` は毎回レンダープロップとして新しい値を生成するためです。
+レンダープロップを使う際、`render` メソッド内で関数を作成していると、[`React.PureComponent`](/docs/react-api.html#reactpurecomponent) を使う利点が相殺されます。これは props の浅い (shallow) 比較は新しい props の値に対して常に `false` を返し、そして `render` は毎回レンダープロップとして新しい値を生成するためです。
 
 たとえば、上記の `<Mouse>` コンポーネントの場合、`Mouse` が `React.Component` ではなく `React.PureComponent` を継承していたとすると、次のようになります。 
 
@@ -304,7 +304,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-この例では、`<MouseTracker>` がレンダーされるたびに `<Mouse render>` プロパティの値として新しい関数が生成されますので、冒頭で `React.PureComonent` を継承した `<Mouse>` の効果が相殺されます。
+この例では、`<MouseTracker>` がレンダーされるたびに `<Mouse render>` プロパティの値として新しい関数が生成されるので、`<Mouse>` が `React.PureComonent` を継承している効果がそもそもなくなってしまいます！
 
 この問題を回避するため、レンダープロップをインスタンスメソッドとして次のように定義することもできます。
 

From e32a20e578675b637a75ce775c08e6658a147409 Mon Sep 17 00:00:00 2001
From: ossan-engineer <bodega1123@gmail.com>
Date: Wed, 6 Feb 2019 12:00:23 +0900
Subject: [PATCH 12/15] Remove unnecessary empty lines

---
 content/docs/render-props.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 706f59a78..f1182bc34 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -22,7 +22,6 @@ permalink: docs/render-props.html
 
 コンポーネントは、React でコードを再利用するための主な要素ですが、あるコンポーネントがカプセル化した state や振る舞いを、同じ state を必要とする別のコンポーネントと共有する方法については、あまり自明ではありません。
 
-
 たとえば、以下のコンポーネントは、ウェブアプリケーション内でのマウスの位置を追跡します。
 
 ```js
@@ -212,7 +211,6 @@ class MouseTracker extends React.Component {
 
 ここでは、特定のユースケースを解決するために `<Mouse>` コンポーネントを複製して `render` メソッドに他のものをハードコードする代わりに、`<Mouse>` に `render` プロパティを渡して、何をレンダーするか動的に決定できるようにしています。
 
-
 より具体的に述べると、**レンダープロップとは、あるコンポーネントが何をレンダーすべきかを知るために使う関数型 props です。**
 
 このテクニックによって、再利用する必要がある振る舞いの移植性が極めて高くなります。その振る舞いをさせるためには、現在のカーソルの (x, y) 座標にレンダーするものを示す `render` プロパティを使って `<Mouse>` をレンダーすれば良いのです。  

From 53dd9843df5c1d4336026771075a313713736dc7 Mon Sep 17 00:00:00 2001
From: Soichiro Miki <smiki-tky@umin.ac.jp>
Date: Wed, 6 Feb 2019 16:19:51 +0900
Subject: [PATCH 13/15] Update content/docs/render-props.md

Co-Authored-By: ossan-engineer <bodega1123@gmail.com>
---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index f1182bc34..2a92c417e 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -325,4 +325,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-propsを静的に定義できない場合（たとえば、コンポーネントの props や state を閉じる必要があるなど）、`<Mouse>` は代わりに `React.Component` を継承すべきです。
+propsを静的に定義できない場合（たとえば、コンポーネントの props や state をクロージャで囲む場合など）、`<Mouse>` は代わりに `React.Component` を継承すべきです。

From dee41b5567356bd4110e87825771f1136a1a0730 Mon Sep 17 00:00:00 2001
From: Kiichi Tachibana <bodega1123@gmail.com>
Date: Wed, 6 Feb 2019 21:12:22 +0900
Subject: [PATCH 14/15] Apply suggestions from code review

Co-Authored-By: ossan-engineer <bodega1123@gmail.com>
---
 content/docs/render-props.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 2a92c417e..2139f9541 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -155,7 +155,7 @@ class MouseTracker extends React.Component {
 
 これだけが目的であれば正しく動作しますが、再利用可能な方法でこの振る舞いをカプセル化するという目的はまだ果たせていません。他の異なるユースケースでもマウスの位置を知りたい場合、毎回そのユースケースに沿ったものをレンダーする新しいコンポーネント（つまり、本質的に別の `<MouseWithCat>`）を作成する必要があります。
 
-ここでレンダープロップの出番となります。`<Mouse>` コンポーネント内でハードコードされた `<Cat>` でレンダーの出力を変更する代わりに、`<Mouse>` コンポーネントに関数型の props を渡し、コンポーネントはその関数を使って何をレンダーすべきか動的に知るのです。これがレンダープロップの役割です。
+ここでレンダープロップの出番となります。`<Mouse>` コンポーネント内でハードコードされた `<Cat>` でレンダーの出力を変更する代わりに、`<Mouse>` コンポーネントに関数の props を渡し、コンポーネントはその関数を使って何をレンダーすべきか動的に知るのです。これがレンダープロップの役割です。
 
 ```js
 class Cat extends React.Component {
@@ -211,7 +211,7 @@ class MouseTracker extends React.Component {
 
 ここでは、特定のユースケースを解決するために `<Mouse>` コンポーネントを複製して `render` メソッドに他のものをハードコードする代わりに、`<Mouse>` に `render` プロパティを渡して、何をレンダーするか動的に決定できるようにしています。
 
-より具体的に述べると、**レンダープロップとは、あるコンポーネントが何をレンダーすべきかを知るために使う関数型 props です。**
+より具体的に述べると、**レンダープロップとは、あるコンポーネントが何をレンダーすべきかを知るために使う関数の props です。**
 
 このテクニックによって、再利用する必要がある振る舞いの移植性が極めて高くなります。その振る舞いをさせるためには、現在のカーソルの (x, y) 座標にレンダーするものを示す `render` プロパティを使って `<Mouse>` をレンダーすれば良いのです。  
 
@@ -237,7 +237,7 @@ function withMouse(Component) {
 
 ## `render` 以外の props を使う
 
-このパターンが「レンダープロップ」という名前だからといって、必ずしも *`render` という名前の props を使う必要はない*ということを念頭に置いてください。実際、[コンポーネントがレンダーするものを知るために使う関数型 props は、*その名前が何であれ*、技術的には「レンダープロップ」と呼ぶことができます](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)。
+このパターンが「レンダープロップ」という名前だからといって、必ずしも *`render` という名前の props を使う必要はない*ということを念頭に置いてください。実際、[コンポーネントがレンダーするものを知るために使う関数の props は、*その名前が何であれ*、技術的には「レンダープロップ」と呼ぶことができます](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)。
 
 上記の例では `rendrer` を用いていますが、`children` プロパティを使っても同じくらい簡単です！
 
@@ -325,4 +325,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-propsを静的に定義できない場合（たとえば、コンポーネントの props や state をクロージャで囲む場合など）、`<Mouse>` は代わりに `React.Component` を継承すべきです。
+props を静的に定義できない場合（たとえば、コンポーネントの props や state をクロージャで囲む場合など）、`<Mouse>` は代わりに `React.Component` を継承すべきです。

From 26d692e035248f8a235f58b4e421c2a37ffc9db7 Mon Sep 17 00:00:00 2001
From: Kiichi Tachibana <>
Date: Wed, 6 Feb 2019 21:14:42 +0900
Subject: [PATCH 15/15] Remove unnecessary empty lines

---
 content/docs/render-props.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 2139f9541..0f5ebe733 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -259,8 +259,6 @@ function withMouse(Component) {
 
 このテクニックは、[react-motion](https://github.com/chenglou/react-motion) の API などで使用されています。
 
-
-
 このテクニックは若干珍しいため、このような API 設計時には、`children` が関数であることを `propTypes` で明示した方が良いでしょう。
 
 ```js
@@ -271,7 +269,6 @@ Mouse.propTypes = {
 
 ## 注意事項
 
-
 ### レンダープロップを React.PureComponent で使うときの注意点
 
 レンダープロップを使う際、`render` メソッド内で関数を作成していると、[`React.PureComponent`](/docs/react-api.html#reactpurecomponent) を使う利点が相殺されます。これは props の浅い (shallow) 比較は新しい props の値に対して常に `false` を返し、そして `render` は毎回レンダープロップとして新しい値を生成するためです。