Polish "Adding Interacrtivity" and pages below

src/content/learn/adding-interactivity.md

@@ -4,7 +4,7 @@ title: インタラクティビティの追加
 
 <Intro>
 
-画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、イメージギャラリをクリックするとアクティブなイメージが切り替わります。React では、時間の経過とともに変化するデータのことを *state* と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することができます。この章では、インタラクションを処理し、state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
+画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、画像ギャラリをクリックするとアクティブな画像が切り替わります。React では、時間の経過とともに変化するデータのことを *state* と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することができます。この章では、インタラクションを処理し、state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
 
 </Intro>
 
@@ -22,9 +22,9 @@ title: インタラクティビティの追加
 
 ## イベントへの応答 {/*responding-to-events*/}
 
-React では、JSX に*イベントハンドラ*を追加することができます。イベントハンドラは、クリック、ホバー、フォーム入力へのフォーカスなどのユーザインタラクションに応答して起動する独自の関数です。
+React では、JSX に*イベントハンドラ*を追加することができます。イベントハンドラはあなた自身で書く関数であり、クリック、ホバー、フォーム入力へのフォーカスといったユーザインタラクションに応答してトリガされます。
 
-`<button>` のような組み込みコンポーネントは `onClick` のような組み込みのブラウザイベントのみをサポートします。しかし、独自のコンポーネントを作成し、そのイベントハンドラ props に任意のアプリケーション固有の名前を付けることもできます。
+`<button>` のような組み込みコンポーネントは `onClick` のような組み込みのブラウザイベントのみをサポートします。しかし、独自のコンポーネントを作成し、そのイベントハンドラ props にアプリケーション固有の自由な名前を付けることもできます。
 
 <Sandpack>
 
@@ -74,16 +74,16 @@ button { margin-right: 10px; }
 
 ## state：コンポーネントのメモリ {/*state-a-components-memory*/}
 
-コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があるのです。React では、このようなコンポーネント固有の記憶を *state* と呼びます。
+コンポーネントによっては、ユーザ操作の結果として画面上の表示内容を変更する必要があります。フォーム上でタイプすると入力欄が更新される、画像カルーセルで「次」をクリックすると表示される画像が変わる、「購入」をクリックすると買い物かごに商品が入る、といったものです。コンポーネントは、現在の入力値、現在の画像、ショッピングカートの状態といったものを「覚えておく」必要があります。React では、このようなコンポーネント固有のメモリのことを *state* と呼びます。
 
-[`useState`](/reference/react/useState) フックを使用すると、コンポーネントに state を追加することができます。*フック*とはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックで state 変数を宣言できます。これは初期 state を受け取り、現在の state と、それを更新するための state セッタ関数のペアを返します。
+[`useState`](/reference/react/useState) フックを使用すると、コンポーネントに state を追加することができます。*フック*とはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックを使うと state 変数を宣言できます。このフックは初期値 (initial state) を受け取り、現在の state と、それを更新するための state セッタ関数のペアを返します。
 
 ```js
 const [index, setIndex] = useState(0);
 const [showMore, setShowMore] = useState(false);
 ```
 
-以下は、イメージギャラリがクリックされたときに state を更新する方法です：
+以下は、画像ギャラリが state を使用して、クリック時に state を更新する方法です：
 
 <Sandpack>
 
@@ -235,18 +235,18 @@ button {
 
 ## レンダーとコミット {/*render-and-commit*/}
 
-コンポーネントは、画面で表示される前に React によってレンダーされる必要があります。このプロセスのステップを理解することで、コードの実行方法について考え、その動作を説明することができるようになります。
+コンポーネントは、画面上に表示される前に React によってレンダーされる必要があります。このプロセスが踏む段階を理解すると、コードがどのように実行されるのか考える際や、コードの振る舞いを説明する際に役立ちます。
 
-コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。注文を受けて UI 要素を「配膳」するプロセスには、次の 3 つのステップが存在します：
+コンポーネントが料理人として厨房に立ち、食材を調理して美味しい料理を作っている様子をイメージしてみてください。このシナリオにおいて React はウェイターです。お客様の注文を伝えて、できた料理をお客様に渡します。この UI の「注文」と「提供」のプロセスは、次の 3 つのステップからなります：
 
-1. レンダーの**トリガ**（お客様の注文を厨房に届ける）
-2. コンポーネントの**レンダー**（厨房で注文された料理を準備する）
-3. DOM への**コミット**（テーブルに注文を置く）
+1. レンダーの**トリガ**（お客様の注文を厨房に伝える）
+2. コンポーネントの**レンダー**（厨房で注文の品を料理する）
+3. DOM への**コミット**（テーブルに注文の品を提供する）
 
 <IllustrationBlock sequential>
-  <Illustration caption="Trigger" alt="React をレストランのウェイターに見立てて、ユーザーからの注文を取り、それをコンポーネント厨房 (Component Kitchen) に届ける。" src="/images/docs/illustrations/i_render-and-commit1.png" />
-  <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
-  <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
+  <Illustration caption="Trigger" alt="レストランのウェイター役の React が、ユーザから注文を聞き取って、コンポーネントの厨房に渡している。" src="/images/docs/illustrations/i_render-and-commit1.png" />
+  <Illustration caption="Render" alt="Card シェフが React に出来立ての Card コンポーネントを渡している。" src="/images/docs/illustrations/i_render-and-commit2.png" />
+  <Illustration caption="Commit" alt="React がユーザの座っているテーブルに Card を提供している。" src="/images/docs/illustrations/i_render-and-commit3.png" />
 </IllustrationBlock>
 
 <LearnMore path="/learn/render-and-commit">
@@ -257,15 +257,15 @@ button {
 
 ## state はスナップショットである {/*state-as-a-snapshot*/}
 
-通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダーがトリガされます。このような動作に最初は驚くかもしれませんね。
+通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。セットしても既存の state 変数は変更されず、代わりに再レンダーがトリガされます。初見ではびっくりするかもしれません。
 
 ```js
 console.log(count);  // 0
 setCount(count + 1); // Request a re-render with 1
 console.log(count);  // Still 0!
 ```
 
-React はこのような仕組みになっているので、微妙なバグを回避することができます。ここに小さなチャットアプリがあります。まず「送信」を押して、*次に*受信者を「ボブ」に変更したら何が起こるか、推測してみてください。5 秒後の `alert` には誰の名前が表示されるでしょうか？
+このおかげで、見逃しやすい小さなバグを回避することができます。ここに小さなチャットアプリがあります。まず「送信」を押して、*次に*受信者を「ボブ」に変更したら何が起こるか、推測してみてください。5 秒後の `alert` には誰の名前が表示されるでしょうか？
 
 <Sandpack>
 
@@ -354,7 +354,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 </Sandpack>
 
-[state はスナップショットである](/learn/state-as-a-snapshot)で、なぜこのようなことが起こってしまうのかを説明しています。state を設定すると、新しい再レンダーが要求されますが、すでに実行されているコード内の state は変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
+[state はスナップショットである](/learn/state-as-a-snapshot)で、なぜこのようなことが起こってしまうのかを説明しています。state をセットすると、新しい再レンダーが要求されますが、すでに実行されているコード内の state は変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
 
 ```js
 console.log(score);  // 0
@@ -366,7 +366,7 @@ setScore(score + 1); // setScore(0 + 1);
 console.log(score);  // 0
 ```
 
-state を設定する際に*更新用関数*を渡すことでこれを修正することができます。`setScore(score + 1)` を  `setScore(s => s + 1)` に置き換えることで、"+3" ボタンが修正されることに注目してください。これは、複数の state の更新をキューに入れる必要がある場合に便利です。
+state を設定する際に*更新用関数*を渡すことでこれを修正することができます。`setScore(score + 1)` を  `setScore(s => s + 1)` に置き換えることで、"+3" ボタンが修正されることに注目してください。こうすることで、複数回の state の更新がキューに入れられます。
 
 <Sandpack>
 
@@ -408,7 +408,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 ## state 内のオブジェクトの更新 {/*updating-objects-in-state*/}
 
-state にはオブジェクトを含むあらゆる種類の JavaScript の値を保持することができます。しかし、React の state 内で保持するオブジェクトや配列を直接変更してはいけません。その代わり、オブジェクトや配列を更新したい場合、既存のもののコピーを作るなどして新しい値を作成し、その新しい値を使って state を変更する必要があります。
+state にはどのような JavaScript の値でも保持することができます。これにはオブジェクトも含まれます。しかし、React の state に保持されたオブジェクトと配列を直接書き換えるべきではありません。オブジェクトを更新したい場合、代わりに新しいオブジェクトを作成（または既存のもののコピーを作成）し、それを使って state をセットする必要があります。
 
 通常、変更したいオブジェクトや配列をコピーするには `...` というスプレッド構文を使用します。例えば、ネストされたオブジェクトを更新する場合、次のようになります：
 
@@ -639,7 +639,7 @@ img { width: 200px; height: 200px; }
 
 ## state 内の配列の更新 {/*updating-arrays-in-state*/}
 
-配列もまた、state 内で保持できるミュータブル（mutable; 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）、state が新しい配列を使用するようにセットする必要があります：
+配列もまた、state 内で保持できるミュータブル（mutable, 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に、state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）、state が新しい配列を使用するようにセットする必要があります：
 
 <Sandpack>