#329 @smikitky さん追加修正箇所

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

@@ -34,26 +34,22 @@ Warning: Cannot update a component from inside the function body of a different
 </div> 
 ```
 
-この `<div>` は `toggle` の値に関係なく常に背景色が赤になると思っていたかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle` の値を `true` と `false` の間で交互に変更すると、背景色は `red` から始まり、その後 `transparent` と `blue` の間で交互に変更されます。
-
+この`<div>`は`toggle`の値に関係なく常に背景色が赤になると思われるかもしれません。しかし、[このデモを見てわかるように](https://codesandbox.io/s/suspicious-sunset-g3jub)、`toggle`の値を `true`と`false`の間で切り替えると、背景色は`red`から始まり、その後`transparent`と`blue`の間で交互に切り替わります。
 
-**Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。**
-警告が検出されたソースコードを修正するには、同じCSSプロパティのshortandとlonghandのバージョンを`style`プロップに混在させないようにしてください。
+**Reactは、スタイルルールの競合を検出し、警告をログに記録するようになりました。**この問題を修正するには、同一の CSS プロパティの短い記法と長い記法のバージョンを `style` プロパティ内で混在させないようにしてください。
 
 ### 一部の非推奨 string ref に関する注意点 {#warnings-for-some-deprecated-string-refs}
 
-[String Refs は古いバージョンのAPI](/docs/refs-and-the-dom.html#legacy-api-string-refs)は開発者に気に入れられておらず、将来的には非推奨になりそうです。
+[String ref（文字列形式の ref）は古いレガシー API](/docs/refs-and-the-dom.html#legacy-api-string-refs)であり、既に勧められておらず、将来的に正式に非推奨となる予定です。
 
 ```js
 <Button ref="myRef" />
 ```
 
-(String Refs と一般的な refs を混同しないでください。)
-
-
-将来的には、String Refsからの移行を自動化するスクリプト(a "codemod")を提供する予定です。しかし、まれに自動移行できないケースがあります。このリリースでは、非推奨となるケースに先立ち、**そのようなケースにのみ**警告を追加しています。
+(String ref と異なり、一般的なref自体は**完全にサポートされ続けます**ので混同しないようにしてください。）
+将来的には、string ref からの移行を自動化するスクリプト ("codemod") を提供する予定です。しかし、まれに自動移行できないケースがあります。このリリースでは、非推奨化に先立ち、**そのようなケースにのみ**警告を追加しています。
 
-例えば、Render Prop パターンと一緒に String Refs を使用した場合に発生します。
+例えば、レンダープロップパターンと一緒に string ref を使用した場合に発生します。
 
 ```jsx
 class ClassWithRenderProp extends React.Component {
@@ -76,11 +72,9 @@ class ClassParent extends React.Component {
 }
 ```
 
+このようなコードはしばしばバグを示します。(ref は `ClassParent` で利用できると思われるかもしれませんが、代わりに `ClassWithRenderProp` に置かれてしまいます)。
 
-このようなコードはしばしばバグを示します。(参照は `ClassParent` で利用できると思っていたかもしれませんが、代わりに `ClassWithRenderProp` に置かれてしまいます)。
-
-**このようなコードを持っていない可能性が高いです**。もし持っていて、それが意図的なものであれば、それを [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) の代わりに:
-
+**このようなコードはお持ちでない可能性が高いでしょう**。もしそのようなコードがあって、それが意図的なものであれば、代わりに [`React.createRef()`](/docs/refs-and-the-dom.html#creating-refs) を使うよう変更してください:
 ```jsx
 class ClassWithRenderProp extends React.Component {
   myRef = React.createRef();
@@ -109,33 +103,33 @@ class ClassParent extends React.Component {
 > 
 > If you use Create React App or have the "react" preset with Babel 7+, you already have this plugin installed by default.
 
-### `React.createFactory`は推奨しない{#deprecating-reactcreatefactory}
+### `React.createFactory`の非推奨化{#deprecating-reactcreatefactory}
 
-[`React.createFactory`](/docs/react-api.html#createfactory) はReact要素を作成するための旧版のルパーです。このリリースでは、メソッドに非推奨の警告が追加されています。これは将来のメジャーバージョンで削除される予定です。
+[`React.createFactory`](/docs/react-api.html#createfactory) は React 要素を作成するためのレガシーのヘルパです。このリリースでは、このメソッドに非推奨の警告が追加されています。これは将来のメジャーバージョンで削除される予定です。
 
-`React.createFactory` の使用法を通常の JSX で置き換えてください。代わりに、この一行ヘルパーをコピー＆ペーストするか、ライブラリとして公開することもできます。
+`React.createFactory` の使用法を通常の JSX で置き換えてください。代わりに、この 1 行ヘルパをコピー＆ペーストするか、ライブラリとして公開することもできます。
 
 ```jsx
 let createFactory = type => React.createElement.bind(null, type);
 ```
 
 全く同じことをしています。
 
-### `ReactDOM.unstable_createPortal`を`ReactDOM.createPortal`に変更することを推奨しない{#deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal}
+### `ReactDOM.unstable_createPortal` の非推奨化（`ReactDOM.createPortal` に変更を） {#deprecating-reactdomunstable_createportal-in-favor-of-reactdomcreateportal}
 
 React 16がリリースされたとき、`createPortal`は公式にサポートされるAPIになりました。
 
-しかし、`unstable_createPortal`を採用している少数のライブラリが動作するように、`unstable_createPortal`をサポートされたエイリアスとして残していました。現在、この不安定なエイリアスは非推奨となっています。`unstable_createPortal` の代わりに `createPortal` を直接使ってください。これは全く同じシグネチャを持っています。
+しかし、`unstable_createPortal`を採用している少数のライブラリが動作するように、`unstable_createPortal`をサポートされたエイリアスとして残していました。今後この不安定なエイリアスは非推奨とします。`unstable_createPortal` の代わりに `createPortal` を直接使ってください。これは全く同じシグネチャを持っています。
 
 ## その他の改良事項 {#other-improvements}
 
 ### hydrationの警告におけるコンポーネントスタック{#component-stacks-in-hydration-warnings}
 
-React は開発警告にコンポーネントスタックを追加し、開発者がバグを分離してプログラムをデバッグできるようにします。今回のリリースでは、以前はなかった多くの開発警告にコンポーネントスタックが追加されました。例として、以前のバージョンにあったこのハイドレーション警告を考えてみましょう。
+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)
 
-コードのエラーを指摘していますが、どこにエラーが存在しているのか、次に何をすればいいのかが明確ではありません。このリリースでは、この警告にコンポーネントスタックが追加され、以下のようになりました。
+コードとともにエラーを指摘していますが、どこにエラーが存在しているのか、次に何をすればいいのかが明確ではありません。このリリースでは、この警告にコンポーネントスタックが追加され、以下のようになりました。
 
 ![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)
 
@@ -145,9 +139,9 @@ React は開発警告にコンポーネントスタックを追加し、開発
 
 このリリースには、他にもいくつかの注目すべき改善点が含まれています。
 
-- 厳密な開発モードでは、React はライフサイクルメソッドを2回呼び出し、不要な副作用の可能性を洗い出すようにしています。このリリースでは、その動作を `shouldComponentUpdate` に追加しています。これは、`shouldComponentUpdate`に副作用がない限り、ほとんどのコードには影響しないはずです。これを修正するには、副作用のあるコードを `componentDidUpdate` に移動してください。
+- Strict 開発モードでは、React はライフサイクルメソッドを 2 回呼び出し、不要な副作用の可能性を洗い出すようにしています。このリリースでは、その動作を `shouldComponentUpdate` に追加しています。これは、`shouldComponentUpdate` に副作用がない限り、ほとんどのコードには影響しないはずです。これを修正するには、副作用のあるコードを `componentDidUpdate` に移動してください。
 
-- 厳密な開発モードでは、レガシーコンテキストAPIの使用に関する警告には、警告のトリガーとなったコンポーネントのスタックが含まれていませんでした。このリリースでは、不足していたスタックが警告に追加されます。
+- Strict 開発モードでは、レガシーコンテクスト API の使用に関する警告には、警告のトリガとなったコンポーネントのスタックが含まれていませんでした。このリリースでは、欠けていたスタックが警告に追加されます。
 
 - 無効な（disabled の）`<button>` 要素に対して `onMouseEnter` がトリガされないようになりました。
 
@@ -162,26 +156,26 @@ React は開発警告にコンポーネントスタックを追加し、開発
 
 React v16.13.0 はnpmで利用可能です。
 
-YarnでReact 16をインストールするには、下記を実行します
+YarnでReact 16をインストールするには、下記を実行します:
 
 ```bash
 yarn add react@^16.13.0 react-dom@^16.13.0
 ```
 
-npmでReact 16をインストールするには、下記を実行します
+npmでReact 16をインストールするには、下記を実行します:
 
 ```bash
 npm install --save react@^16.13.0 react-dom@^16.13.0
 ```
 
-また、CDN経由でReactのUMDビルドも提供しています
+また、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>
 ```
 
-[詳細のスクリプト設置方法](/docs/installation.html)については、説明書を参照してください。
+[詳細なインストール方法](/docs/installation.html)については、ドキュメントを参照してください。
 
 ## 変更履歴 {#changelog}