Merge branch 'master' into implementation_notes

potato4d · web-flow · commit 15c381128ed4 · 2019-08-06T12:24:03.000+09:00
diff --git a/TRANSLATION.md b/TRANSLATION.md
@@ -4,7 +4,7 @@
 
 - [Is React Translated Yet? ¡Sí! Sim! はい！](https://reactjs.org/blog/2019/02/23/is-react-translated-yet.html)
 
-オリジナル reactjs.org は Gatzby にって生成される静的サイトであり、英語ドキュメントおよびブログ記事が含まれています。本リポジトリはそのフォークです。`content` 内にあるドキュメントが日本語化されているほか（一部除く）、一部のレイアウト要素に対する JavaScript レベルでのいくつかのパッチ、日本語版でのみ使う textlint などが含まれています。現時点では大部分のドキュメントの翻訳が完了しているため、最新版ドキュメントへの追随を主に行っています。日本語訳や日本語版特有の問題を見つけた場合はこのリポジトリの Issue / Pull Request を使って報告ないし改善を提案してください。
+オリジナル reactjs.org は Gatsby にって生成される静的サイトであり、英語ドキュメントおよびブログ記事が含まれています。本リポジトリはそのフォークです。`content` 内にあるドキュメントが日本語化されているほか（一部除く）、一部のレイアウト要素に対する JavaScript レベルでのいくつかのパッチ、日本語版でのみ使う textlint などが含まれています。現時点では大部分のドキュメントの翻訳が完了しているため、最新版ドキュメントへの追随を主に行っています。日本語訳や日本語版特有の問題を見つけた場合はこのリポジトリの Issue / Pull Request を使って報告ないし改善を提案してください。
 
 メンテナ（3 名）
 
diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -23,7 +23,7 @@ In the past, React community members have created unofficial translations for [C
 
 If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language.
 
-Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)!
+Can't find your language? If you'd like to maintain your language's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)!
 
 ## Backstory {#backstory}
 
diff --git a/content/community/conferences.md b/content/community/conferences.md
@@ -12,36 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### ReactEurope 2019 {#reacteurope-2019}
-May 23-24, 2019 in Paris, France
-
-[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
-
-### React Conf Armenia 2019 {#react-conf-am-19}
-May 25, 2019 in Yerevan, Armenia
-
-[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact)
-
-### ReactNext 2019 {#react-next-2019}
-June 11, 2019. Tel Aviv, Israel
-
-[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w)
-
-### React Norway 2019 {#react-norway-2019}
-June 12, 2019. Larvik, Norway
-
-[Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway)
-
-### React Loop 2019 {#react-loop-2019}
-June 21, 2019 Chicago, Illinois USA
-
-[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)
-
-### Chain React 2019 {#chain-react-2019}
-July 11-12, 2019. Portland, OR, USA.
-
-[Website](https://infinite.red/ChainReactConf)
-
 ### React Rally 2019 {#react-rally-2019}
 August 22-23, 2019. Salt Lake City, USA.
 
@@ -82,6 +52,11 @@ September 26-28, 2019 in Alicante, Spain
 
 [Website](http://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) - [Facebook](https://www.facebook.com/ReactAlicante)
 
+### React Conf 2019 {#react-conf-2019}
+October 24-25, 2019 in Henderson, Nevada USA
+
+[Website](https://conf.reactjs.org/) - [Twitter](https://twitter.com/reactjs)
+
 ### React Advanced 2019 {#react-advanced-2019}
 October 25, 2019 in London, UK
 
@@ -92,6 +67,16 @@ December 6, 2019 in Berlin, Germany
 
 [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/reactdayberlin)
 
+### ReactConf AU 2020 {#reactconfau}
+February 27 & 28, 2020 in Sydney, Australia
+
+[Website](https://reactconfau.com/) - [Twitter](https://twitter.com/reactconfau) - [Facebook](https://www.facebook.com/reactconfau) - [Instagram](https://www.instagram.com/reactconfau/)
+
+### Render-Atlanta 2020 {#render-atlanta-2020}
+May 4-6, 2020. Atlanta, GA, USA.
+
+[Website](https://renderatl.com)
+
 ## Past Conferences {#past-conferences}
 
 ### React.js Conf 2015 {#reactjs-conf-2015}
@@ -395,3 +380,34 @@ May 3, 2019 in London, UK
 May 11 in Sofia, Bulgaria
 
 [Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/events/780891358936156)
+
+### ReactEurope 2019 {#reacteurope-2019}
+May 23-24, 2019 in Paris, France
+
+[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
+
+### React Conf Armenia 2019 {#react-conf-am-19}
+May 25, 2019 in Yerevan, Armenia
+
+[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact)
+
+### ReactNext 2019 {#react-next-2019}
+June 11, 2019. Tel Aviv, Israel
+
+[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w)
+
+### React Norway 2019 {#react-norway-2019}
+June 12, 2019. Larvik, Norway
+
+[Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway)
+
+### React Loop 2019 {#react-loop-2019}
+June 21, 2019 Chicago, Illinois USA
+
+[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)
+
+### Chain React 2019 {#chain-react-2019}
+July 11-12, 2019. Portland, OR, USA.
+
+[Website](https://infinite.red/ChainReactConf)
+
diff --git a/content/community/meetups.md b/content/community/meetups.md
@@ -55,6 +55,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Düsseldorf](https://www.meetup.com/de-DE/ReactJS-Meetup-Dusseldorf/)
 * [Hamburg](https://www.meetup.com/Hamburg-React-js-Meetup/)
 * [Karlsruhe](https://www.meetup.com/react_ka/)
+* [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/)
 * [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/)
 * [React Berlin](https://www.meetup.com/React-Berlin/)
 * [React.JS Girls Berlin](https://www.meetup.com/ReactJS-Girls-Berlin/)
diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md
@@ -72,6 +72,7 @@ permalink: community/ui-components.html
 ## Fee Based Components {#fee-based-components}
 
 * **[ag-Grid](https://www.ag-grid.com)** Advanced data grid / data table for React.
+* **[DevExtreme Reactive](https://devexpress.github.io/devextreme-reactive/react/)** High-performance plugin-based Data Grid, Scheduler and Chart components for Bootstrap and Material Design.
 * **[ExtReact components](https://www.sencha.com/products/extreact//)**: 115+ Ready-to-Use UI Components.
 * **[Grapecity Wijmo UI Components for React](https://www.grapecity.com/en/react/)**: Expand your React UI options with Wijmo’s complete collection of JavaScript components.
 * **[jQWidgets React components](https://www.jqwidgets.com/react/)**: Enterprise Ready 70+ UI Components.
diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
@@ -463,7 +463,7 @@ Deque System はアプリケーションの自動化された E2E アクセシ
 一部のブラウザではアクセシビリティツリー内の各要素のアクセシビリティに関する情報を簡単に見ることができます：
 
 - [Using the Accessibility Inspector in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
-- [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
+- [Using the Accessibility Inspector in Chrome](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane)
 - [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
 
 ### スクリーンリーダ {#screen-readers}
diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
@@ -70,7 +70,7 @@ React バージョン 16.8.0 より、以下においてフックの安定版の
 
 **フックを利用するには、すべての React のパッケージが 16.8.0 以上である必要があります**。例えば React DOM の更新を忘れた場合、フックは動作しません。
 
-React Native は次の安定版リリースでフックを全面的にサポートします。
+React Native はバージョン 0.59 以降でフックをサポートします。
 
 ### クラスコンポーネントを全部書き換える必要があるのですか？ {#do-i-need-to-rewrite-all-my-class-components}
 
@@ -617,7 +617,7 @@ function ProductPage({ productId }) {
       const json = await response.json();
       if (!ignore) setProduct(json);
     }
-    
+
     fetchProduct();
     return () => { ignore = true };
   }, [productId]);
@@ -674,7 +674,9 @@ function Counter() {
 }
 ```
 
-依存のリストとして `[count]` を指定すればバグは起きなくなりますが、その場合値が変化するたびに interval がリセットされることになります。これは望ましい動作ではありません。これを修正するため、[`setState` 関数形式による更新](/docs/hooks-reference.html#functional-updates)を利用することができます。これにより state の*現在値*を参照せずに state が*どのように*更新されるべきかを指定できます。
+依存のリストが空であるということ (`[]`) は、コンポーネントのマウント時に副作用が一度のみ実行され、毎回の再レンダー時には実行されないということを意味します。ここでの問題は、副作用コールバックが実行された時点で `count` の値が `0` に設定されたクロージャを作成したため、`setInterval` 内のコールバックで `count` の値が変わらなくなってしまう、ということです。毎秒ごとにこのコールバックは `setCount(0 + 1)` を呼び出すので、カウントは 1 のまま変わらなくなってしまいます。
+
+依存のリストとして `[count]` を指定すればバグは起きなくなりますが、その場合値が変化するたびにタイマーがリセットされることになります。事実上それぞれの `setInterval` は一度しか実行されずに（`setTimeout` のように）クリアされてしまうのです。これは望ましい動作ではありません。これを修正するため、[`setState` 関数形式による更新](/docs/hooks-reference.html#functional-updates)を利用することができます。これにより state の*現在値*を参照せずに state が*どのように*更新されるべきかを指定できます。
 
 ```js{6,9}
 function Counter() {
@@ -693,6 +695,8 @@ function Counter() {
 
 （`setCount` 関数については同一性が保たれることが保証されているので、省略して構いません）
 
+これで、`setInterval` のコールバックは 1 秒に 1 回実行されますが、内部の `setCount` は `count` の最新の値（この例では `c`）を参照できるようになります。
+
 より複雑なケース（ある state が別の state に依存している場合など）においては、state 更新のロジックを [`useReducer` フック](/docs/hooks-reference.html#usereducer)を使って副作用の外部に移動することを考慮してください。[こちらの記事](https://adamrackis.dev/state-and-use-reducer/)にこのやり方についての例があります。**`useReducer` から返される `dispatch` 関数は常に同一性が保たれます**。これはリデューサ (reducer) 関数がコンポーネント内で宣言されており props を読み出している場合でも同様です。
 
 最終手段として、クラスにおける `this` のようなものが欲しい場合は、[ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) を使ってミュータブルな値を保持させることができます。そうすればその値を読み書き可能です。例えば：
@@ -834,7 +838,7 @@ function Image(props) {
 
 * フックをうまく用いたコードは、高階コンポーネントやレンダープロップやコンテクストを多用するコードベースで見られるような**深いコンポーネントのネストを必要としません**。コンポーネントツリーが小さければ、React がやるべき仕事も減ります。
 
-過去には、インライン関数によるパフォーマンスの懸念というのは、レンダー毎に新しいコールバック関数を作って渡すと子コンポーネントでの `souldComponentUpdate` による最適化が動かなくなる、という問題と関連していました。フックではこの問題について 3 つの側面から対応します。
+過去には、インライン関数によるパフォーマンスの懸念というのは、レンダー毎に新しいコールバック関数を作って渡すと子コンポーネントでの `shouldComponentUpdate` による最適化が動かなくなる、という問題と関連していました。フックではこの問題について 3 つの側面から対応します。
 
 * [`useCallback`](/docs/hooks-reference.html#usecallback) フックを使えば再レンダーをまたいで同じコールバックを保持できるので、`shouldComponentUpdate` がうまく動作し続けます
 
diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
@@ -179,7 +179,7 @@ useEffect(
 const value = useContext(MyContext);
 ```
 
-コンテクストオブジェクト（`React.createContext` からの戻り値）を受け取り、そのコンテクストの現在値をを返します。コンテクストの現在値は、ツリー内でこのフックを呼んだコンポーネントの直近にある `<MyContext.Provider>` の `value` の値によって決定されます。
+コンテクストオブジェクト（`React.createContext` からの戻り値）を受け取り、そのコンテクストの現在値を返します。コンテクストの現在値は、ツリー内でこのフックを呼んだコンポーネントの直近にある `<MyContext.Provider>` の `value` の値によって決定されます。
 
 直近の `<MyContext.Provider>` が更新された場合、このフックはその `MyContext` プロバイダに渡された最新の `value` の値を使って再レンダーを発生させます。
 
diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md
@@ -12,7 +12,7 @@ prev: hooks-effect.html
 
 ### フックを呼び出すのはトップレベルのみ {#only-call-hooks-at-the-top-level}
 
-**フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。**代わりに、あなたの React の関数のトップレベルでのみ呼び出してください。これを守ることで、コンポーネントがレンダーされる際に毎回同じ順番で呼び出されるということが保証されます。これが、複数回 `useState` や `useEffect` が呼び出された場合でも Raect がフックの状態を正しく保持するための仕組みです。（興味がある場合は[ページ下部](#explanation)で詳しく説明しています）
+**フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。**代わりに、あなたの React の関数のトップレベルでのみ呼び出してください。これを守ることで、コンポーネントがレンダーされる際に毎回同じ順番で呼び出されるということが保証されます。これが、複数回 `useState` や `useEffect` が呼び出された場合でも React がフックの状態を正しく保持するための仕組みです。（興味がある場合は[ページ下部](#explanation)で詳しく説明しています）
 
 ### フックを呼び出すのは React の関数内のみ {#only-call-hooks-from-react-functions}
 
diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md
@@ -31,7 +31,7 @@ class Welcome extends React.Component {
 
 `React.Component` サブクラスで*必ず*定義しなければならない唯一のメソッドは [`render()`](#render) です。このページで説明されている他のすべてのメソッドは任意です。
 
-**独自の基底コンポーネントクラスを作成しないことを強くおすすめします。**React コンポーネントでは、[コードの再利用は主に継承ではなく合成によって行われます]((/docs/composition-vs-inheritance.html))。
+**独自の基底コンポーネントクラスを作成しないことを強くおすすめします。**React コンポーネントでは、[コードの再利用は主に継承ではなく合成によって行われます](/docs/composition-vs-inheritance.html)。
 
 >補足:
 >
diff --git a/content/docs/render-props.md b/content/docs/render-props.md
@@ -239,7 +239,7 @@ function withMouse(Component) {
 
 このパターンが「レンダープロップ」という名前だからといって、必ずしも *`render` という名前の props を使う必要はない*ということを念頭に置いてください。実際、[コンポーネントがレンダーするものを知るために使う関数の props は、*その名前が何であれ*、技術的には「レンダープロップ」と呼ぶことができます](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)。
 
-上記の例では `rendrer` を用いていますが、`children` プロパティを使っても同じくらい簡単です！
+上記の例では `render` を用いていますが、`children` プロパティを使っても同じくらい簡単です！
 
 ```js
 <Mouse children={mouse => (
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
@@ -244,7 +244,7 @@ class Clock extends React.Component {
   }
 ```
 
-タイマー ID を直接 `this` 上に格納したことに注目してください。
+タイマー ID を直接 `this` 上に（`this.timerID` として）格納したことに注目してください。
 
 `this.props` は React 自体によって設定され、また `this.state` は特別な意味を持っていますが、何かデータフローに影響しないデータ（タイマー ID のようなもの）を保存したい場合に、追加のフィールドを手動でクラスに追加することは自由です。
 
diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md
@@ -76,7 +76,7 @@ JSON のデータモデルをユーザーに向けて表示することはよく
 
 ### 幕間：Props vs State {#a-brief-interlude-props-vs-state}
 
-React には 2 種類の「モデル」データが存在します。props と state です。このふたつの相違を理解するのは重要なことです。違いについて自信がない場合は、[公式の React ドキュメント](/docs/interactivity-and-dynamic-uis.html)に目を通すとよいでしょう。
+React には 2 種類の「モデル」データが存在します。props と state です。このふたつの相違を理解するのは重要なことです。違いについて自信がない場合は、[公式の React ドキュメント](/docs/state-and-lifecycle.html)に目を通すとよいでしょう。[FAQ: state と props の違いは何ですか？](/docs/faq-state.html#what-is-the-difference-between-state-and-props) もご覧ください。
 
 ## Step 3: UI 状態を表現する必要かつ十分な state を決定する {#step-3-identify-the-minimal-but-complete-representation-of-ui-state}
 
diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md
diff --git a/content/languages.yml b/content/languages.yml

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ class Welcome extends React.Component {`
`31`	`31`
`32`	`32`	`React.Component` サブクラスで必ず定義しなければならない唯一のメソッドは [`render()`](#render) です。このページで説明されている他のすべてのメソッドは任意です。
`33`	`33`
`34`		`-独自の基底コンポーネントクラスを作成しないことを強くおすすめします。React コンポーネントでは、[コードの再利用は主に継承ではなく合成によって行われます]((/docs/composition-vs-inheritance.html))。`
	`34`	`+独自の基底コンポーネントクラスを作成しないことを強くおすすめします。React コンポーネントでは、[コードの再利用は主に継承ではなく合成によって行われます](/docs/composition-vs-inheritance.html)。`
`35`	`35`
`36`	`36`	`>補足:`
`37`	`37`	`>`