From 2547b2dc2d56d0d66108dab28b34ece5a38314a4 Mon Sep 17 00:00:00 2001
From: pasteisdenata <yasakatomoko@gmail.com>
Date: Fri, 1 Apr 2022 11:01:04 +0200
Subject: [PATCH 01/30] Update sharing-state-between-components.md

test fork
---
 beta/src/pages/learn/sharing-state-between-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md
index a068a6ea9..fdf564288 100644
--- a/beta/src/pages/learn/sharing-state-between-components.md
+++ b/beta/src/pages/learn/sharing-state-between-components.md
@@ -4,7 +4,7 @@ title: Sharing State Between Components
 
 <Intro>
 
-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
+時々, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
 
 </Intro>
 

From 0bd3ce1c1372f148ff31795487f8bef671d1d08e Mon Sep 17 00:00:00 2001
From: pasteisdenata <yasakatomoko@gmail.com>
Date: Fri, 1 Apr 2022 11:06:17 +0200
Subject: [PATCH 02/30] Update sharing-state-between-components.md

revert sometimes
---
 beta/src/pages/learn/sharing-state-between-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/sharing-state-between-components.md b/beta/src/pages/learn/sharing-state-between-components.md
index f07ce3cc1..1b0661f5f 100644
--- a/beta/src/pages/learn/sharing-state-between-components.md
+++ b/beta/src/pages/learn/sharing-state-between-components.md
@@ -4,7 +4,7 @@ title: Sharing State Between Components
 
 <Intro>
 
-時々, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
+Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
 
 </Intro>
 

From b0bb6f6c177233b14faed2b416de2672b5249de8 Mon Sep 17 00:00:00 2001
From: pasteisdenata <yasakatomoko@gmail.com>
Date: Sun, 10 Apr 2022 22:18:50 +0200
Subject: [PATCH 03/30] Update adding-interactivity.md

first commit for review
---
 beta/src/pages/learn/adding-interactivity.md | 92 ++++++++++----------
 1 file changed, 46 insertions(+), 46 deletions(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 73b7e0597..cf7961e7e 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -1,30 +1,30 @@
 ---
-title: Adding Interactivity
+title: インタラクティビティの追加
 ---
 
 <Intro>
 
-Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called state. You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time.
+ユーザの入力に反応して更新されるものが画面上にあります。例えば、イメージギャラリーをクリックするとアクティブなイメージが切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することが出来ます。この章では、インタラクションを処理し、その state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to handle user-initiated events](/learn/responding-to-events)
-* [How to make components "remember" information with state](/learn/state-a-components-memory)
-* [How React updates the UI in two phases](/learn/render-and-commit)
-* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot)
-* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates)
-* [How to update an object in state](/learn/updating-objects-in-state)
-* [How to update an array in state](/learn/updating-arrays-in-state)
+* [ユーザー起動イベントの扱い方](/learn/responding-to-events)
+* [state でコンポーネントに情報を 「記憶」させる方法](/learn/state-a-components-memory)
+* [React が 2 段階で UI を更新する仕組み](/learn/render-and-commit)
+* [変更後すぐに state が更新されない理由](/learn/state-as-a-snapshot)
+* [複数の state の更新をキューに入れる方法](/learn/queueing-a-series-of-state-updates)
+* [state 内のオブジェクトを更新する方法](/learn/updating-objects-in-state)
+* [state 内の配列を更新する方法](/learn/updating-arrays-in-state)
 
 </YouWillLearn>
 
-## Responding to events {/*responding-to-events*/}
+## イベント対応 {/*responding-to-events*/}
 
-React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.
+React では、JSX にイベントハンドラを追加することができます。イベントハンドラは、クリック、ホバー、フォーム入力へのフォーカスなどのユーザインタラクションに応答して起動する独自の関数です。
 
-Built-in components like `<button>` only support built-in browser events like `onClick`. However, you can also create your own components, and give their event handler props any application-specific names that you like.
+`<button>` のような組み込みコンポーネントは `onClick` のような組み込みのブラウザイベントのみをサポートします。しかし、独自のコンポーネントを作成し、そのイベントハンドラ props に任意のアプリケーション固有の名前を付けることもできます。
 
 <Sandpack>
 
@@ -68,22 +68,22 @@ button { margin-right: 10px; }
 
 <LearnMore path="/learn/responding-to-events">
 
-Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers.
+イベントハンドラの追加方法を学ぶには **[イベント対応](/learn/responding-to-events)** を読んでみましょう。
 
 </LearnMore>
 
-## State: a component's memory {/*state-a-components-memory*/}
+## コンポーネントのメモリ {/*state-a-components-memory*/}
 
-Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state.
+コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があります。React では、このようなコンポーネント固有の記憶を state と呼びます。
 
-You can add state to a component with a [`useState`](/apis/usestate) Hook. Hooks are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
+[`useState`](/apis/usestate) フックを使用すると、コンポーネントに state を追加することが出来ます。フックとはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックで state 変数を宣言できます。これは初期 state を取り、現在の state と、それを更新するための state setter 関数のペアを返します。
 
 ```js
 const [index, setIndex] = useState(0);
 const [showMore, setShowMore] = useState(false);
 ```
 
-Here is how an image gallery uses and updates state on click:
+以下は、イメージギャラリーがクリックされた時に state を更新する方法です：
 
 <Sandpack>
 
@@ -224,19 +224,19 @@ button {
 
 <LearnMore path="/learn/state-a-components-memory">
 
-Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction.
+値を記憶し、インタラクションでその値を更新するには **[State: コンポーネントのメモリ](/learn/state-a-components-memory)** を読んでみましょう。
 
 </LearnMore>
 
-## Render and commit {/*render-and-commit*/}
+## レンダーとコミット {/*render-and-commit*/}
 
-Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+コンポーネントが画面で表示される前に React でレンダーされる必要があります。このプロセスのステップを理解することで、コードの実行方法について考え、その動作を説明することが出来るようになります。
 
-Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。リクエストと UI へのサービスのプロセスには次の 3 つのステップがあります：
 
-1. **Triggering** a render (delivering the diner's order to the kitchen)
-2. **Rendering** the component (getting the order from the kitchen)
-3. **Committing** to the DOM (placing the order on the table)
+1. レンダーの**トリガー**（お客様の注文を厨房に届ける）
+2. コンポーネントの**レンダリング**（厨房から注文された料理を受け取る）
+3. DOM への**コミット**（テーブルに注文を置く）
 
 <IllustrationBlock sequential>
   <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
@@ -246,13 +246,13 @@ Imagine that your components are cooks in the kitchen, assembling tasty dishes f
 
 <LearnMore path="/learn/render-and-commit">
 
-Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update.
+UI 更新のライフサイクルを学ぶには **[レンダーとコミット](/learn/render-and-commit)** を読んでみましょう。
 
 </LearnMore>
 
-## State as a snapshot {/*state-as-a-snapshot*/}
+## スナップショットとしての state {/*state-as-a-snapshot*/}
 
-Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first!
+通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダリングがトリガーされます。これに対して最初は驚くかもしれませんね。
 
 ```js
 console.log(count);  // 0
@@ -260,7 +260,7 @@ setCount(count + 1); // Request a re-render with 1
 console.log(count);  // Still 0!
 ```
 
-React works this way to help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
+React はこのような仕組みになっているので、微妙なバグを回避することができます。ここに小さなチャットアプリがあります。まず「送信」を押して、*次に*受信者を「ボブ」に変更したら何が起こるか、推測してみてください。5 秒後の `alert` には誰の名前が表示されるでしょうか？
 
 <Sandpack>
 
@@ -309,13 +309,13 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 <LearnMore path="/learn/state-as-a-snapshot">
 
-Read **[State as a Snapshot](/learn/state-as-a-snapshot)** to learn why state appears "fixed" and unchanging inside the event handlers.
+イベントハンドラ内で state が「固定」され、変化していないように見える理由を学ぶには **[スナップショットとしての state](/learn/state-as-a-snapshot)** を読んでみましょう。
 
 </LearnMore>
 
-## Queueing a series of state changes {/*queueing-a-series-of-state-changes*/}
+## 一連の state の変更をキューに入れる {/*queueing-a-series-of-state-changes*/}
 
-This component is buggy: clicking "+3" increments the score only once.
+このコンポーネントにはバグがあります：  "+3"  をクリックすると 1 回だけスコアが増えます
 
 <Sandpack>
 
@@ -349,7 +349,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 </Sandpack>
 
-[State as a Snapshot](/learn/state-as-a-snapshot) explains why this is happening. Setting state requests a new re-render, but does not change it in the already running code. So `score` continues to be `0` right after you call `setScore(score + 1)`.
+[スナップショットとしての state](/learn/state-as-a-snapshot) はなぜこのようなことが起こるのかを説明しています。state を設定すると、新しい再レンダリングが要求されますが、すでに実行されているコードでは変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
 
 ```js
 console.log(score);  // 0
@@ -361,7 +361,7 @@ setScore(score + 1); // setScore(0 + 1);
 console.log(score);  // 0
 ```
 
-You can fix this by passing an *updater function* when setting state. Notice how replacing `setScore(score + 1)` with `setScore(s => s + 1)` fixes the "+3" button. This is handy if you need to queue multiple state updates.
+state を設定する際に *updater function* を渡すことでこれを修正することができます。`setScore(score + 1)` を  `setScore(s => s + 1)` に置き換えることで、"+3"  ボタンが修正されることに注目してください。これは、複数の state の更新をキューに入れる必要がある場合に便利です。
 
 <Sandpack>
 
@@ -397,15 +397,15 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 <LearnMore path="/learn/queueing-a-series-of-state-changes">
 
-Read **[Queueing a Series of State Changes](/learn/queueing-a-series-of-state-changes)** to learn how to queue multiple updates before the next render.
+次のレンダリングの前に複数の更新をキューに入れる方法を学ぶには **[一連の state の変更をキューに入れる](/learn/queueing-a-series-of-state-changes)** を読んでみましょう。
 
 </LearnMore>
 
-## Updating objects in state {/*updating-objects-in-state*/}
+## state 内のオブジェクトを更新する方法 {/*updating-objects-in-state*/}
 
-State can hold any kind of JavaScript value, including objects. But you shouldn't change objects and arrays that you hold in the React state directly. Instead, when you want to update an object and array, you need to create a new one (or make a copy of an existing one), and then update the state to use that copy.
+State はオブジェクトを含むあらゆる種類の JavaScript の値を保持することが出来ます。しかし、React の state 内で保持するオブジェクトや配列を直接変更してはいけません。その代わり、オブジェクトや配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）、そのコピーを使用するために state を変更する必要があります。
 
-Usually, you will use the `...` spread syntax to copy objects and arrays that you want to change. For example, updating a nested object could look like this:
+通常、変更したいオブジェクトや配列をコピーするには `...` というスプレッド構文を使用します。例えば、ネストされたオブジェクトを更新する場合、次のようになります：
 
 <Sandpack>
 
@@ -513,7 +513,7 @@ img { width: 200px; height: 200px; }
 
 </Sandpack>
 
-If copying objects in code gets tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code:
+コード内のオブジェクトのコピーが面倒になったら [Immer](https://github.com/immerjs/use-immer) のようなライブラリを使うと、繰り返しのコードを減らすことができます：
 
 <Sandpack>
 
@@ -628,13 +628,13 @@ img { width: 200px; height: 200px; }
 
 <LearnMore path="/learn/updating-objects-in-state">
 
-Read **[Updating Objects in State](/learn/updating-objects-in-state)** to learn how to update objects correctly.
+オブジェクトを正しく更新する方法を学ぶために **[state 内のオブジェクトを更新する方法](/learn/updating-objects-in-state)** を読んでみましょう。
 
 </LearnMore>
 
-## Updating arrays in state {/*updating-arrays-in-state*/}
+## state 内の配列を更新する方法 {/*updating-arrays-in-state*/}
 
-Arrays are another type of mutable JavaScript objects you can store in state and should treat as read-only. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array:
+配列もまたミュータブルな JavaScript オブジェクトの一種であり、state 内で保存することができ、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）state が新しい配列を使用するように設定する必要があります：
 
 <Sandpack>
 
@@ -701,7 +701,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-If copying arrays in code gets tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code:
+コード内の配列のコピーが面倒になったら [Immer](https://github.com/immerjs/use-immer) のようなライブラリを使うと、繰り返しのコードを減らすことができます：
 
 <Sandpack>
 
@@ -786,12 +786,12 @@ function ItemList({ artworks, onToggle }) {
 
 <LearnMore path="/learn/updating-arrays-in-state">
 
-Read **[Updating Arrays in State](/learn/updating-arrays-in-state)** to learn how to update arrays correctly.
+配列を正しく更新する方法を学ぶには **[state 内の配列を更新する方法](/learn/updating-arrays-in-state)** を読んでみましょう。
 
 </LearnMore>
 
-## What's next? {/*whats-next*/}
+## 次は何? {/*whats-next*/}
 
-Head over to [Responding to Events](/learn/responding-to-events) to start reading this chapter page by page!
+この章を 1 ページずつ読み始めるには [イベント対応](/learn/responding-to-events)に移動しましょう!
 
-Or, if you're already familiar with these topics, why not read about [Managing State](/learn/managing-state)?
+また、すでにこれらのトピックをご存知の方は [state の管理](/learn/managing-state)を読んでみてはいかがでしょうか。
\ No newline at end of file

From 206492152e5686cd793707a6f0a865dd02939774 Mon Sep 17 00:00:00 2001
From: pasteisdenata <yasakatomoko@gmail.com>
Date: Mon, 11 Apr 2022 10:02:49 +0200
Subject: [PATCH 04/30] Update adding-interactivity.md

minor word change
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index cf7961e7e..2cbd553ad 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -252,7 +252,7 @@ UI 更新のライフサイクルを学ぶには **[レンダーとコミット]
 
 ## スナップショットとしての state {/*state-as-a-snapshot*/}
 
-通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダリングがトリガーされます。これに対して最初は驚くかもしれませんね。
+通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダリングがトリガーされます。このような動作に最初は驚くかもしれませんね。
 
 ```js
 console.log(count);  // 0

From 107469d5023487e4601e89e97f8e1fb5e84ae34b Mon Sep 17 00:00:00 2001
From: pasteisdenata <yasakatomoko@gmail.com>
Date: Mon, 11 Apr 2022 10:30:10 +0200
Subject: [PATCH 05/30] Update adding-interactivity.md

Illustration caption translated
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 2cbd553ad..470bfba41 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -239,7 +239,7 @@ button {
 3. DOM への**コミット**（テーブルに注文を置く）
 
 <IllustrationBlock sequential>
-  <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
+  <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" />
 </IllustrationBlock>

From ed042674438de47fc530413844ee6a98958acd2b Mon Sep 17 00:00:00 2001
From: pasteisdenata <yasakatomoko@gmail.com>
Date: Tue, 12 Apr 2022 09:03:43 +0200
Subject: [PATCH 06/30] Update adding-interactivity.md

---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 470bfba41..8d30f061d 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -74,7 +74,7 @@ button { margin-right: 10px; }
 
 ## コンポーネントのメモリ {/*state-a-components-memory*/}
 
-コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があります。React では、このようなコンポーネント固有の記憶を state と呼びます。
+コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があるのです。React では、このようなコンポーネント固有の記憶を state と呼びます。
 
 [`useState`](/apis/usestate) フックを使用すると、コンポーネントに state を追加することが出来ます。フックとはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックで state 変数を宣言できます。これは初期 state を取り、現在の state と、それを更新するための state setter 関数のペアを返します。
 

From 5957b101e98a746a0a9928cfcde1ed7a1f9bc9eb Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:45:28 +0200
Subject: [PATCH 07/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 8d30f061d..be883334d 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -4,7 +4,7 @@ title: インタラクティビティの追加
 
 <Intro>
 
-ユーザの入力に反応して更新されるものが画面上にあります。例えば、イメージギャラリーをクリックするとアクティブなイメージが切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することが出来ます。この章では、インタラクションを処理し、その state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
+画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、イメージギャラリをクリックするとアクティブなイメージが切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することが出来ます。この章では、インタラクションを処理し、state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
 
 </Intro>
 

From ebd054f7c0822b4cdec470f225c47bf45199fae2 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:47:24 +0200
Subject: [PATCH 08/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index be883334d..683bd4a99 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -20,7 +20,7 @@ title: インタラクティビティの追加
 
 </YouWillLearn>
 
-## イベント対応 {/*responding-to-events*/}
+## イベントへの応答 {/*responding-to-events*/}
 
 React では、JSX にイベントハンドラを追加することができます。イベントハンドラは、クリック、ホバー、フォーム入力へのフォーカスなどのユーザインタラクションに応答して起動する独自の関数です。
 

From 264c9b56bd0303fafe7ccae37141f45ded53c3e8 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:47:52 +0200
Subject: [PATCH 09/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 683bd4a99..414c2604d 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -72,7 +72,7 @@ button { margin-right: 10px; }
 
 </LearnMore>
 
-## コンポーネントのメモリ {/*state-a-components-memory*/}
+## State：コンポーネントのメモリ {/*state-a-components-memory*/}
 
 コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があるのです。React では、このようなコンポーネント固有の記憶を state と呼びます。
 

From 2e9420be2748695a3fdb7b261ccdac5e9ddaf230 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:48:57 +0200
Subject: [PATCH 10/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 414c2604d..d293fdae2 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -76,7 +76,7 @@ button { margin-right: 10px; }
 
 コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があるのです。React では、このようなコンポーネント固有の記憶を state と呼びます。
 
-[`useState`](/apis/usestate) フックを使用すると、コンポーネントに state を追加することが出来ます。フックとはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックで state 変数を宣言できます。これは初期 state を取り、現在の state と、それを更新するための state setter 関数のペアを返します。
+[`useState`](/apis/usestate) フックを使用すると、コンポーネントに state を追加することが出来ます。フックとはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックで state 変数を宣言できます。これは初期 state を受け取り、現在の state と、それを更新するための state セッタ関数のペアを返します。
 
 ```js
 const [index, setIndex] = useState(0);

From f839ad5c95912983651af9a2990c8a825900dcec Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:50:42 +0200
Subject: [PATCH 11/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index d293fdae2..c768af00c 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -634,7 +634,7 @@ img { width: 200px; height: 200px; }
 
 ## state 内の配列を更新する方法 {/*updating-arrays-in-state*/}
 
-配列もまたミュータブルな JavaScript オブジェクトの一種であり、state 内で保存することができ、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）state が新しい配列を使用するように設定する必要があります：
+配列もまた、state 内で保持できるミュータブル（mutable; 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）state が新しい配列を使用するように設定する必要があります：
 
 <Sandpack>
 

From 76f9c9613e23f6914ea4c6a59d33affc2bfc5f1e Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:51:15 +0200
Subject: [PATCH 12/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index c768af00c..5bc38f509 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -83,7 +83,7 @@ const [index, setIndex] = useState(0);
 const [showMore, setShowMore] = useState(false);
 ```
 
-以下は、イメージギャラリーがクリックされた時に state を更新する方法です：
+以下は、イメージギャラリがクリックされた時に state を更新する方法です：
 
 <Sandpack>
 

From 7692d8113fee8fd825d0b3219eef3aaaa5484481 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:51:25 +0200
Subject: [PATCH 13/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 5bc38f509..bbac26270 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -792,6 +792,6 @@ function ItemList({ artworks, onToggle }) {
 
 ## 次は何? {/*whats-next*/}
 
-この章を 1 ページずつ読み始めるには [イベント対応](/learn/responding-to-events)に移動しましょう!
+この章を 1 ページずつ読み始めるには [イベントへの応答](/learn/responding-to-events)に移動しましょう!
 
 また、すでにこれらのトピックをご存知の方は [state の管理](/learn/managing-state)を読んでみてはいかがでしょうか。
\ No newline at end of file

From e1f1f5fca1a263a6b336ec1c2677624c9832bfaa Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:51:38 +0200
Subject: [PATCH 14/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index bbac26270..c2f7ce606 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -790,7 +790,7 @@ function ItemList({ artworks, onToggle }) {
 
 </LearnMore>
 
-## 次は何? {/*whats-next*/}
+## 次は何？ {/*whats-next*/}
 
 この章を 1 ページずつ読み始めるには [イベントへの応答](/learn/responding-to-events)に移動しましょう!
 

From 5a52a3b6a86f7e8d2ba3d8dc80365edd914df7d0 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:51:53 +0200
Subject: [PATCH 15/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index c2f7ce606..40816e91d 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -10,7 +10,7 @@ title: インタラクティビティの追加
 
 <YouWillLearn isChapter={true}>
 
-* [ユーザー起動イベントの扱い方](/learn/responding-to-events)
+* [ユーザが発生させるイベントの扱い方](/learn/responding-to-events)
 * [state でコンポーネントに情報を 「記憶」させる方法](/learn/state-a-components-memory)
 * [React が 2 段階で UI を更新する仕組み](/learn/render-and-commit)
 * [変更後すぐに state が更新されない理由](/learn/state-as-a-snapshot)

From 825a297b429e905f6913b61920c9faf97537974e Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:52:24 +0200
Subject: [PATCH 16/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 40816e91d..bdc51969a 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -701,7 +701,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-コード内の配列のコピーが面倒になったら [Immer](https://github.com/immerjs/use-immer) のようなライブラリを使うと、繰り返しのコードを減らすことができます：
+コード内の配列のコピーが面倒になったら [Immer](https://github.com/immerjs/use-immer) のようなライブラリを使うと、コードの繰り返しを減らすことができます：
 
 <Sandpack>
 

From 1564d6689ab3f8e0cec6f3d81d158ce168ef61d3 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:53:48 +0200
Subject: [PATCH 17/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index bdc51969a..f6ae176cb 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -224,7 +224,7 @@ button {
 
 <LearnMore path="/learn/state-a-components-memory">
 
-値を記憶し、インタラクションでその値を更新するには **[State: コンポーネントのメモリ](/learn/state-a-components-memory)** を読んでみましょう。
+値を記憶し、インタラクションに応答してその値を更新するには **[State: コンポーネントのメモリ](/learn/state-a-components-memory)** を読んでみましょう。
 
 </LearnMore>
 

From 3446268f1451411ae8432d0f46a3754c9c539fc9 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:54:52 +0200
Subject: [PATCH 18/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index f6ae176cb..c2fe35242 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -230,7 +230,7 @@ button {
 
 ## レンダーとコミット {/*render-and-commit*/}
 
-コンポーネントが画面で表示される前に React でレンダーされる必要があります。このプロセスのステップを理解することで、コードの実行方法について考え、その動作を説明することが出来るようになります。
+コンポーネントは、画面で表示される前に React によってレンダーされる必要があります。このプロセスのステップを理解することで、コードの実行方法について考え、その動作を説明することが出来るようになります。
 
 コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。リクエストと UI へのサービスのプロセスには次の 3 つのステップがあります：
 

From e8eebdbe425519b70514ac9cdd24e8aa9e66068d Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:56:15 +0200
Subject: [PATCH 19/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index c2fe35242..582ec64ec 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -232,7 +232,7 @@ button {
 
 コンポーネントは、画面で表示される前に React によってレンダーされる必要があります。このプロセスのステップを理解することで、コードの実行方法について考え、その動作を説明することが出来るようになります。
 
-コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。リクエストと UI へのサービスのプロセスには次の 3 つのステップがあります：
+コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。注文を受けて UI 要素を「配膳」するプロセスには、次の 3 つのステップが存在します：
 
 1. レンダーの**トリガー**（お客様の注文を厨房に届ける）
 2. コンポーネントの**レンダリング**（厨房から注文された料理を受け取る）

From 504c5c4e22d29a639076bbef5b1bfa5912f22b4d Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:56:42 +0200
Subject: [PATCH 20/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 582ec64ec..c0065a9d7 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -234,8 +234,8 @@ button {
 
 コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。注文を受けて UI 要素を「配膳」するプロセスには、次の 3 つのステップが存在します：
 
-1. レンダーの**トリガー**（お客様の注文を厨房に届ける）
-2. コンポーネントの**レンダリング**（厨房から注文された料理を受け取る）
+1. レンダーの**トリガ**（お客様の注文を厨房に届ける）
+2. コンポーネントの**レンダー**（厨房から注文された料理を受け取る）
 3. DOM への**コミット**（テーブルに注文を置く）
 
 <IllustrationBlock sequential>

From 4c5d3db31343e68fb8eef936da35a0466d877032 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:57:34 +0200
Subject: [PATCH 21/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index c0065a9d7..630bd8e8f 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -239,7 +239,7 @@ button {
 3. DOM への**コミット**（テーブルに注文を置く）
 
 <IllustrationBlock sequential>
-  <Illustration caption="Trigger" alt="React をレストランのサーバーに見立てて、ユーザーからの注文を取り、それをコンポーネント厨房（Component Kitchen）に届ける。" src="/images/docs/illustrations/i_render-and-commit1.png" />
+  <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" />
 </IllustrationBlock>

From f69f59c5f4c122a625760d00b0de62b6748533cd Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:58:12 +0200
Subject: [PATCH 22/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 630bd8e8f..81e8304d4 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -250,7 +250,7 @@ UI 更新のライフサイクルを学ぶには **[レンダーとコミット]
 
 </LearnMore>
 
-## スナップショットとしての state {/*state-as-a-snapshot*/}
+## State とはスナップショットである {/*state-as-a-snapshot*/}
 
 通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダリングがトリガーされます。このような動作に最初は驚くかもしれませんね。
 

From e957ccb25c78b5b868047b8845646d1337036a2a Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:58:54 +0200
Subject: [PATCH 23/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 81e8304d4..7376d52cc 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -252,7 +252,7 @@ UI 更新のライフサイクルを学ぶには **[レンダーとコミット]
 
 ## State とはスナップショットである {/*state-as-a-snapshot*/}
 
-通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダリングがトリガーされます。このような動作に最初は驚くかもしれませんね。
+通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダーがトリガーされます。このような動作に最初は驚くかもしれませんね。
 
 ```js
 console.log(count);  // 0

From c15039017edcb7e52d21cf3b622cd28f19daa9ab Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 14:59:23 +0200
Subject: [PATCH 24/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 7376d52cc..054395828 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -309,7 +309,7 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 <LearnMore path="/learn/state-as-a-snapshot">
 
-イベントハンドラ内で state が「固定」され、変化していないように見える理由を学ぶには **[スナップショットとしての state](/learn/state-as-a-snapshot)** を読んでみましょう。
+イベントハンドラ内で state が「固定」され、変化していないように見える理由を学ぶには **[State はスナップショットである](/learn/state-as-a-snapshot)** を読んでみましょう。
 
 </LearnMore>
 

From efed1666edb3601ff4d7315dd97846191295e7e6 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:01:19 +0200
Subject: [PATCH 25/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 054395828..2484f95ed 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -315,7 +315,7 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 ## 一連の state の変更をキューに入れる {/*queueing-a-series-of-state-changes*/}
 
-このコンポーネントにはバグがあります：  "+3"  をクリックすると 1 回だけスコアが増えます
+このコンポーネントにはバグがあります："+3" をクリックしても 1 しかスコアが増えません。
 
 <Sandpack>
 

From b4747fe0d65ec62f029302fd474069cb089bebeb Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:02:32 +0200
Subject: [PATCH 26/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 2484f95ed..7555bdf41 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -349,7 +349,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; }
 
 </Sandpack>
 
-[スナップショットとしての state](/learn/state-as-a-snapshot) はなぜこのようなことが起こるのかを説明しています。state を設定すると、新しい再レンダリングが要求されますが、すでに実行されているコードでは変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
+[State はスナップショットである](/learn/state-as-a-snapshot) で、なぜこのようなことが起こってしまうのかを説明しています。state を設定すると、新しい再レンダーが要求されますが、すでに実行されているコード内の state は変更されません。そのため `setScore(score + 1)` を呼び出した直後は `score` が `0` であり続けます。
 
 ```js
 console.log(score);  // 0

From fe1629e6dd651e41284e9a6cd48e763450c04812 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:03:45 +0200
Subject: [PATCH 27/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 7555bdf41..e162f9b68 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -361,7 +361,7 @@ setScore(score + 1); // setScore(0 + 1);
 console.log(score);  // 0
 ```
 
-state を設定する際に *updater function* を渡すことでこれを修正することができます。`setScore(score + 1)` を  `setScore(s => s + 1)` に置き換えることで、"+3"  ボタンが修正されることに注目してください。これは、複数の state の更新をキューに入れる必要がある場合に便利です。
+state を設定する際に*更新用関数*を渡すことでこれを修正することができます。`setScore(score + 1)` を  `setScore(s => s + 1)` に置き換えることで、"+3" ボタンが修正されることに注目してください。これは、複数の state の更新をキューに入れる必要がある場合に便利です。
 
 <Sandpack>
 

From e3a4575fe0fe1a55c8d7a3c8ba7f579ae2f4fa44 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:05:07 +0200
Subject: [PATCH 28/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index e162f9b68..3b7709f0f 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -403,7 +403,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 を変更する必要があります。
 
 通常、変更したいオブジェクトや配列をコピーするには `...` というスプレッド構文を使用します。例えば、ネストされたオブジェクトを更新する場合、次のようになります：
 

From 7b4757f3bc88090e5cb604039e5b98ca75de4af2 Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:05:32 +0200
Subject: [PATCH 29/30] Update beta/src/pages/learn/adding-interactivity.md

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 3b7709f0f..8ce52f32e 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -513,7 +513,7 @@ img { width: 200px; height: 200px; }
 
 </Sandpack>
 
-コード内のオブジェクトのコピーが面倒になったら [Immer](https://github.com/immerjs/use-immer) のようなライブラリを使うと、繰り返しのコードを減らすことができます：
+コード内のオブジェクトのコピーが面倒になったら [Immer](https://github.com/immerjs/use-immer) のようなライブラリを使うと、コードの繰り返しを減らすことができます：
 
 <Sandpack>
 

From ffa21ef722e279caae171e09423208c10d2bc6ee Mon Sep 17 00:00:00 2001
From: pasteisdenata <79905902+pasteisdenata@users.noreply.github.com>
Date: Wed, 13 Apr 2022 09:34:27 +0200
Subject: [PATCH 30/30] Apply suggestions from code review

Co-authored-by: Soichiro Miki <smiki-tky@umin.ac.jp>
---
 beta/src/pages/learn/adding-interactivity.md | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/beta/src/pages/learn/adding-interactivity.md b/beta/src/pages/learn/adding-interactivity.md
index 8ce52f32e..2a9e814a2 100644
--- a/beta/src/pages/learn/adding-interactivity.md
+++ b/beta/src/pages/learn/adding-interactivity.md
@@ -4,7 +4,7 @@ title: インタラクティビティの追加
 
 <Intro>
 
-画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、イメージギャラリをクリックするとアクティブなイメージが切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することが出来ます。この章では、インタラクションを処理し、state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
+画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、イメージギャラリをクリックするとアクティブなイメージが切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することができます。この章では、インタラクションを処理し、state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
 
 </Intro>
 
@@ -72,11 +72,11 @@ button { margin-right: 10px; }
 
 </LearnMore>
 
-## State：コンポーネントのメモリ {/*state-a-components-memory*/}
+## state：コンポーネントのメモリ {/*state-a-components-memory*/}
 
 コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があるのです。React では、このようなコンポーネント固有の記憶を state と呼びます。
 
-[`useState`](/apis/usestate) フックを使用すると、コンポーネントに state を追加することが出来ます。フックとはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックで state 変数を宣言できます。これは初期 state を受け取り、現在の state と、それを更新するための state セッタ関数のペアを返します。
+[`useState`](/apis/usestate) フックを使用すると、コンポーネントに state を追加することができます。フックとはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState` フックで state 変数を宣言できます。これは初期 state を受け取り、現在の state と、それを更新するための state セッタ関数のペアを返します。
 
 ```js
 const [index, setIndex] = useState(0);
@@ -224,13 +224,13 @@ button {
 
 <LearnMore path="/learn/state-a-components-memory">
 
-値を記憶し、インタラクションに応答してその値を更新するには **[State: コンポーネントのメモリ](/learn/state-a-components-memory)** を読んでみましょう。
+値を記憶し、インタラクションに応答してその値を更新するには **[state: コンポーネントのメモリ](/learn/state-a-components-memory)** を読んでみましょう。
 
 </LearnMore>
 
 ## レンダーとコミット {/*render-and-commit*/}
 
-コンポーネントは、画面で表示される前に React によってレンダーされる必要があります。このプロセスのステップを理解することで、コードの実行方法について考え、その動作を説明することが出来るようになります。
+コンポーネントは、画面で表示される前に React によってレンダーされる必要があります。このプロセスのステップを理解することで、コードの実行方法について考え、その動作を説明することができるようになります。
 
 コンポーネントは厨房で材料から美味しい料理を作る料理人だと想像してください。このシナリオでは React はお客様のリクエストを受け付け、注文された料理を運ぶウェイターです。注文を受けて UI 要素を「配膳」するプロセスには、次の 3 つのステップが存在します：
 
@@ -250,9 +250,9 @@ UI 更新のライフサイクルを学ぶには **[レンダーとコミット]
 
 </LearnMore>
 
-## State とはスナップショットである {/*state-as-a-snapshot*/}
+## state はスナップショットである {/*state-as-a-snapshot*/}
 
-通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダーがトリガーされます。このような動作に最初は驚くかもしれませんね。
+通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダーがトリガされます。このような動作に最初は驚くかもしれませんね。
 
 ```js
 console.log(count);  // 0
@@ -309,7 +309,7 @@ label, textarea { margin-bottom: 10px; display: block; }
 
 <LearnMore path="/learn/state-as-a-snapshot">
 
-イベントハンドラ内で state が「固定」され、変化していないように見える理由を学ぶには **[State はスナップショットである](/learn/state-as-a-snapshot)** を読んでみましょう。
+イベントハンドラ内で state が「固定」され、変化していないように見える理由を学ぶには **[state はスナップショットである](/learn/state-as-a-snapshot)** を読んでみましょう。
 
 </LearnMore>
 
@@ -349,7 +349,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
@@ -403,7 +403,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 を変更する必要があります。
 
 通常、変更したいオブジェクトや配列をコピーするには `...` というスプレッド構文を使用します。例えば、ネストされたオブジェクトを更新する場合、次のようになります：
 
@@ -792,6 +792,6 @@ function ItemList({ artworks, onToggle }) {
 
 ## 次は何？ {/*whats-next*/}
 
-この章を 1 ページずつ読み始めるには [イベントへの応答](/learn/responding-to-events)に移動しましょう!
+この章を 1 ページずつ読み始めるには[イベントへの応答](/learn/responding-to-events)に移動しましょう!
 
 また、すでにこれらのトピックをご存知の方は [state の管理](/learn/managing-state)を読んでみてはいかがでしょうか。
\ No newline at end of file