#4 react-v16.13.0.md add japanese transration

Author: PeterTakahashi

content/blog/2020-02-26-react-v16.13.0.md

@@ -5,25 +5,25 @@ redirect_from:
   - "blog/2020/03/02/react-v16.13.0.html"
 ---
 
-Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.
+本日、React 16.13.0 をリリースします。このリリースには、今後のメジャーリリースに備えて、バグ修正と新しい非推奨の警告が含まれています。
 
 ## New Warnings {#new-warnings}
 
-### Warnings for some updates during render {#warnings-for-some-updates-during-render}
+###  Warnings for some updates during render {#warnings-for-some-updates-during-render}
 
-A React component should not cause side effects in other components during rendering.
+React コンポーネントは、レンダリング中に他のコンポーネントに副作用を与えてはいけません。
 
-It is supported to call `setState` during render, but [only for *the same component*](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). If you call `setState` during a render on a different component, you will now see a warning:
+レンダリング中に `setState` を呼び出すことはサポートされていますが [同じコンポーネントに対してのみ*](/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops). 別のコンポーネントでレンダリング中に `setState` を呼び出すと、警告が表示されるようになりました。
 
 ```
 Warning: Cannot update a component from inside the function body of a different component.
 ```
 
-**This warning will help you find application bugs caused by unintentional state changes.** In the rare case that you intentionally want to change the state of another component as a result of rendering, you can wrap the `setState` call into `useEffect`.
+**この警告は、意図しない状態変更によって引き起こされるアプリケーションのバグを見つけるのに役立ちます。**レンダリングの結果として他のコンポーネントの状態を意図的に変更したい場合は、`setState`呼び出しを`useEffect`にラップすることができます。
 
 ### Warnings for conflicting style rules {#warnings-for-conflicting-style-rules}
 
-When dynamically applying a `style` that contains longhand and shorthand versions of CSS properties, particular combinations of updates can cause inconsistent styling. For example: 
+CSSプロパティのlonghandとshorthandを含む `style` を動的に適用する場合、特定の更新の組み合わせにより、スタイリングの一貫性が失われることがあります。例えば、以下のようになります。
 
 ```js
 <div style={toggle ? 
@@ -34,23 +34,26 @@ When dynamically applying a `style` that contains longhand and shorthand version
 </div> 
 ```
 
-You might expect this `<div>` to always have a red background, no matter the value of `toggle`. However, on alternating the value of `toggle` between `true` and `false`, the background color start as `red`, then alternates between `transparent` and `blue`, [as you can see in this demo](https://codesandbox.io/s/suspicious-sunset-g3jub).
+この `<div>` は `toggle` の値に関係なく常に背景色が赤になると思っていたかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle` の値を `true` と `false` の間で交互に変更すると、背景色は `red` から始まり、その後 `transparent` と `blue` の間で交互に変更されます。
+
 
-**React now detects conflicting style rules and logs a warning.** To fix the issue, don't mix shorthand and longhand versions of the same CSS property in the `style` prop.
+**Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。**
+警告が検出されたソースコードを修正するには、同じCSSプロパティのshortandとlonghandのバージョンを`style`プロップに混在させないようにしてください。
 
 ### Warnings for some deprecated string refs {#warnings-for-some-deprecated-string-refs}
 
-[String Refs is an old legacy API](/docs/refs-and-the-dom.html#legacy-api-string-refs) which is discouraged and is going to be deprecated in the future:
+[String Refs は古いバージョンのAPI](/docs/refs-and-the-dom.html#legacy-api-string-refs)は開発者に気に入れられておらず、将来的には非推奨になりそうです。
 
 ```js
 <Button ref="myRef" />
 ```
 
-(Don't confuse String Refs with refs in general, which **remain fully supported**.)
+(String Refs と一般的な refs を混同しないでください。)
+
 
-In the future, we will provide an automated script (a "codemod") to migrate away from String Refs. However, some rare cases can't be migrated automatically. This release adds a new warning **only for those cases** in advance of the deprecation.
+将来的には、String Refsからの移行を自動化するスクリプト(a "codemod")を提供する予定です。しかし、まれに自動移行できないケースがあります。このリリースでは、非推奨となるケースに先立ち、**そのようなケースにのみ**警告を追加しています。
 
-For example, it will fire if you use String Refs together with the Render Prop pattern:
+例えば、Render Prop パターンと一緒に String Refs を使用した場合に発生します。
 
 ```jsx
 class ClassWithRenderProp extends React.Component {
@@ -73,9 +76,10 @@ class ClassParent extends React.Component {
 }
 ```
 
-Code like this often indicates bugs. (You might expect the ref to be available on `ClassParent`, but instead it gets placed on `ClassWithRenderProp`).
 
-**You most likely don't have code like this**. If you do and it is intentional, convert it to [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) instead:
+このようなコードはしばしばバグを示します。(参照は `ClassParent` で利用できると思っていたかもしれませんが、代わりに `ClassWithRenderProp` に置かれてしまいます)。
+
+**このようなコードを持っていない可能性が高いです**。もし持っていて、それが意図的なものであれば、それを [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) の代わりに:
 
 ```jsx
 class ClassWithRenderProp extends React.Component {
@@ -107,76 +111,77 @@ class ClassParent extends React.Component {
 
 ### Deprecating `React.createFactory` {#deprecating-reactcreatefactory}
 
-[`React.createFactory`](/docs/react-api.html#createfactory) is a legacy helper for creating React elements. This release adds a deprecation warning to the method. It will be removed in a future major version.
+[`React.createFactory`](/docs/react-api.html#createfactory) はReact要素を作成するための旧版のルパーです。このリリースでは、メソッドに非推奨の警告が追加されています。これは将来のメジャーバージョンで削除される予定です。
 
-Replace usages of `React.createFactory` with regular JSX. Alternately, you can copy and paste this one-line helper or publish it as a library:
+`React.createFactory` の使用法を通常の JSX で置き換えてください。代わりに、この一行ヘルパーをコピー＆ペーストするか、ライブラリとして公開することもできます。
 
 ```jsx
 let createFactory = type => React.createElement.bind(null, type);
 ```
 
-It does exactly the same thing.
+全く同じことをしています。
 
 ### Deprecating `ReactDOM.unstable_createPortal` in favor of `ReactDOM.createPortal` {#deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal}
 
-When React 16 was released, `createPortal` became an officially supported API.
+React 16がリリースされたとき、`createPortal`は公式にサポートされるAPIになりました。
 
-However, we kept `unstable_createPortal` as a supported alias to keep the few libraries that adopted it working. We are now deprecating the unstable alias. Use `createPortal` directly instead of `unstable_createPortal`. It has exactly the same signature.
+しかし、`unstable_createPortal`を採用している少数のライブラリが動作するように、`unstable_createPortal`をサポートされたエイリアスとして残していました。現在、この不安定なエイリアスは非推奨となっています。`unstable_createPortal` の代わりに `createPortal` を直接使ってください。これは全く同じシグネチャを持っています。
 
 ## Other Improvements {#other-improvements}
 
 ### Component stacks in hydration warnings {#component-stacks-in-hydration-warnings}
 
-React adds component stacks to its development warnings, enabling developers to isolate bugs and debug their programs. This release adds component stacks to a number of development warnings that didn't previously have them. As an example, consider this hydration warning from the previous versions:
+React は開発警告にコンポーネントスタックを追加し、開発者がバグを分離してプログラムをデバッグできるようにします。今回のリリースでは、以前はなかった多くの開発警告にコンポーネントスタックが追加されました。例として、以前のバージョンにあったこのハイドレーション警告を考えてみましょう。
 
 ![A screenshot of the console warning, simply stating the nature of the hydration mismatch: "Warning: Expected server HTML to contain a matching div in div."](../images/blog/react-v16.13.0/hydration-warning-before.png)
 
-While it's pointing out an error with the code, it's not clear where the error exists, and what to do next. This release adds a component stack to this warning, which makes it look like this:
+コードのエラーを指摘していますが、どこにエラーが存在しているのか、次に何をすればいいのかが明確ではありません。このリリースでは、この警告にコンポーネントスタックが追加され、以下のようになりました。
 
 ![A screenshot of the console warning, stating the nature of the hydration mismatch, but also including a component stack : "Warning: Expected server HTML to contain a matching div in div, in div (at pages/index.js:4)..."](../images/blog/react-v16.13.0/hydration-warning-after.png)
 
-This makes it clear where the problem is, and lets you locate and fix the bug faster. 
+これにより、問題がどこにあるのかが明確になり、より早くバグの場所を特定して修正することができます。
 
 ### Notable bugfixes {#notable-bugfixes}
 
-This release contains a few other notable improvements:
+このリリースには、他にもいくつかの注目すべき改善点が含まれています。
+
+- 厳密な開発モードでは、React はライフサイクルメソッドを2回呼び出し、不要な副作用の可能性を洗い出すようにしています。このリリースでは、その動作を `shouldComponentUpdate` に追加しています。これは、`shouldComponentUpdate`に副作用がない限り、ほとんどのコードには影響しないはずです。これを修正するには、副作用のあるコードを `componentDidUpdate` に移動してください。
 
-- In Strict Development Mode, React calls lifecycle methods twice to flush out any possible unwanted side effects. This release adds that behaviour to `shouldComponentUpdate`. This shouldn't affect most code, unless you have side effects in `shouldComponentUpdate`. To fix this, move the code with side effects into `componentDidUpdate`.
+- 厳密な開発モードでは、レガシーコンテキストAPIの使用に関する警告には、警告のトリガーとなったコンポーネントのスタックが含まれていませんでした。このリリースでは、不足していたスタックが警告に追加されます。
 
-- In Strict Development Mode, the warnings for usage of the legacy context API didn't include the stack for the component that triggered the warning. This release adds the missing stack to the warning.
+- 無効な `<button>` 要素に対して `onMouseEnter` がトリガーされないようになりました。
 
-- `onMouseEnter` now doesn't trigger on disabled `<button>` elements.
+- ReactDOM は v16 を公開して以来、`version` のエクスポートがありませんでした。このリリースではそれが追加されました。アプリケーションロジックでの使用はお勧めしませんが、同じページ上のReactDOMのバージョンの不一致や複数のバージョンの問題をデバッグする際に便利です。
 
-- ReactDOM was missing a `version` export since we published v16. This release adds it back. We don't recommend using it in your application logic, but it's useful when debugging issues with mismatching / multiple versions of ReactDOM on the same page.
+これらの問題やその他の問題を解決してくれた貢献者に感謝します。完全なchangelog [下記](#changelog)を参照してください。
 
-We’re thankful to all the contributors who helped surface and fix these and other issues. You can find the full changelog [below](#changelog).
 
 ## Installation {#installation}
 
 ### React {#react}
 
-React v16.13.0 is available on the npm registry.
+React v16.13.0 はnpmで利用可能です。
 
-To install React 16 with Yarn, run:
+YarnでReact 16をインストールするには、下記を実行します
 
 ```bash
 yarn add react@^16.13.0 react-dom@^16.13.0
 ```
 
-To install React 16 with npm, run:
+npmでReact 16をインストールするには、下記を実行します
 
 ```bash
 npm install --save react@^16.13.0 react-dom@^16.13.0
 ```
 
-We also provide UMD builds of React via a CDN:
+また、CDN経由でReactのUMDビルドも提供しています
 
 ```html
 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 ```
 
-Refer to the documentation for [detailed installation instructions](/docs/installation.html).
+[詳細のスクリプト設置方法](/docs/installation.html)については、説明書を参照してください。
 
 ## Changelog {#changelog}