diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md
index 9b04c8878..8d50df3f4 100644
--- a/src/content/learn/adding-interactivity.md
+++ b/src/content/learn/adding-interactivity.md
@@ -68,7 +68,7 @@ button { margin-right: 10px; }
 
 <LearnMore path="/learn/responding-to-events">
 
-イベントハンドラの追加方法を学ぶには **[イベント対応](/learn/responding-to-events)** を読んでみましょう。
+イベントハンドラの追加方法を学ぶには **[イベントへの応答](/learn/responding-to-events)** を読んでみましょう。
 
 </LearnMore>
 
diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md
index 84bf904cd..1cc78405b 100644
--- a/src/content/learn/render-and-commit.md
+++ b/src/content/learn/render-and-commit.md
@@ -1,44 +1,44 @@
 ---
-title: Render and Commit
+title: レンダーとコミット
 ---
 
 <Intro>
 
-Before your components are displayed on 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 によってレンダーされる必要があります。このプロセスを段階ごとに理解すると、コードがどのように実行されるのか考える際や、コードの振る舞いを説明する際に役立ちます。
 
 </Intro>
 
 <YouWillLearn>
 
-* What rendering means in React
-* When and why React renders a component
-* The steps involved in displaying a component on screen
-* Why rendering does not always produce a DOM update
+* React での「レンダー」の意味
+* いつ、なぜ React はコンポーネントをレンダーするのか
+* 画面上にコンポーネントが表示されるステップ
+* なぜレンダーしても必ずしも DOM 更新が起きないのか
 
 </YouWillLearn>
 
-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 guest's order to the kitchen)
-2. **Rendering** the component (preparing the order in 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" />
-  <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="トリガ" alt="レストランのウェイターとしての React が、ユーザからの注文を取って、Component Kitchen に運んでいる。" src="/images/docs/illustrations/i_render-and-commit1.png" />
+  <Illustration caption="レンダー" alt="Card Chef が React に新鮮な Card コンポーネントを渡している。" src="/images/docs/illustrations/i_render-and-commit2.png" />
+  <Illustration caption="コミット" alt="React がテーブルのユーザに Card を配っている。" src="/images/docs/illustrations/i_render-and-commit3.png" />
 </IllustrationBlock>
 
-## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
+## ステップ 1：レンダーのトリガ {/*step-1-trigger-a-render*/}
 
-There are two reasons for a component to render:
+コンポーネントがレンダーされる理由には 2 つあります。
 
-1. It's the component's **initial render.**
-2. The component's (or one of its ancestors') **state has been updated.**
+1. コンポーネントの**初回レンダー**。
+2. コンポーネント（またはその祖先のいずれか）の **state の更新**。
 
-### Initial render {/*initial-render*/}
+### 初回レンダー {/*initial-render*/}
 
-When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component:
+アプリが開始するときには、初回のレンダーをトリガする必要があります。フレームワークやサンドボックスでは、このコードが隠されたりすることがありますが、これはターゲットとなる DOM ノードで [`createRoot`](/reference/react-dom/client/createRoot) を呼び出し、コンポーネントでその `render` メソッドを呼び出すことによって行われます。
 
 <Sandpack>
 
@@ -63,28 +63,28 @@ export default function Image() {
 
 </Sandpack>
 
-Try commenting out the `root.render()` call and see the component disappear!
+`root.render()` の呼び出しをコメントアウトして、コンポーネントが消えるのを確認してみてください！
 
-### Re-renders when state updates {/*re-renders-when-state-updates*/}
+### state 更新後の再レンダー {/*re-renders-when-state-updates*/}
 
-Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
+コンポーネントが最初にレンダーされた後、[`set` 関数](/reference/react/useState#setstate)を使って state を更新することで、さらなるレンダーをトリガすることができます。コンポーネントの state を更新すると、自動的にレンダーがキューイングされます。（これは、レストランの客が最初の注文の後に、喉の渇きや空腹の状態に応じてお茶やデザートなどいろいろなものを注文するようなものだと考えることができます。）
 
 <IllustrationBlock sequential>
-  <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
-  <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
-  <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
+  <Illustration caption="state の更新..." alt="レストランのウェイターとしての React が Card UI を提供したところ。矢印頭の顧客は、黒ではなく、ピンクのカードが欲しいのだと注文している。" src="/images/docs/illustrations/i_rerender1.png" />
+  <Illustration caption="... トリガ ..." alt="React は Component Kitchenに戻り、ピンクの Card が必要だとシェフに伝える。" src="/images/docs/illustrations/i_rerender2.png" />
+  <Illustration caption="... レンダー！" alt="Card シェフはピンクのカードを React に渡している。" src="/images/docs/illustrations/i_rerender3.png" />
 </IllustrationBlock>
 
-## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
+## ステップ 2：React がコンポーネントをレンダー {/*step-2-react-renders-your-components*/}
 
-After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
+あなたがレンダーをトリガした後、React はコンポーネントを呼び出して画面に表示する内容を把握します。**「レンダー」とは、React がコンポーネントを呼び出すことです。**
 
-* **On initial render,** React will call the root component.
-* **For subsequent renders,** React will call the function component whose state update triggered the render.
+* **初回レンダー時**、React はルート (root) コンポーネントを呼び出します。
+* **次回以降のレンダー**では、state の更新によってレンダーのトリガが起きた関数コンポーネントを、React がコールします。
 
-This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
+このプロセスは再帰的に発生します。更新されたコンポーネントが他のコンポーネントを返す場合、次に*その*コンポーネントを React がレンダーし、そのコンポーネントも何かコンポーネントを返す場合、*その*コンポーネントも次にレンダーし、といった具合に続きます。このプロセスは、ネストされたコンポーネントがなくなり、React が画面に表示されるべき内容を正確に把握するまで続きます。
 
-In the following example, React will call `Gallery()` and  `Image()` several times:
+次の例では、React は `Gallery()` を呼び出した後、`Image()` を何度も呼び出します。
 
 <Sandpack>
 
@@ -124,36 +124,36 @@ img { margin: 0 10px 10px 0; }
 
 </Sandpack>
 
-* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags. 
-* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
+* **初回レンダー時には**、React は `<section>`、`<h1>`、および 3 つの `<img>` タグの [DOM ノードを作成](https://developer.mozilla.org/docs/Web/API/Document/createElement)します。
+* **再レンダー時には**、React は前回のレンダーからどの部分が変わったのか、あるいは変わらなかったのかを計算します。次のステップであるコミットフェーズまでこの情報は使われません。
 
 <Pitfall>
 
-Rendering must always be a [pure calculation](/learn/keeping-components-pure):
+レンダーは常に[純粋な計算](/learn/keeping-components-pure)であるべきです。
 
-* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
-* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
+* **同じ入力には同じ出力**。同じ入力が与えられた場合、コンポーネントは常に同じ JSX を返す必要がある。（トマトサラダを注文した人がオニオンサラダを受け取ってはいけない！）
+* **自分の仕事に専念する**。レンダー前に存在したオブジェクトや変数を変更しない。（ある注文が他の誰かの注文を変更してはいけない。）
 
-Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
+さもないと、コードベースが複雑になるにつれて、混乱するバグや予測不能な挙動に遭遇することになります。"Strict Mode" で開発している場合、React は各コンポーネントの関数を 2 回呼び出し、純粋でない関数による誤りに気づきやすいようにしてくれます。
 
 </Pitfall>
 
 <DeepDive>
 
-#### Optimizing performance {/*optimizing-performance*/}
+#### パフォーマンスの最適化 {/*optimizing-performance*/}
 
-The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!**
+更新されたコンポーネントがツリー内で非常に高い位置にある場合、その内部にネストされたすべてのコンポーネントを再レンダーするというデフォルトの挙動は、パフォーマンスにとって理想的ではありません。パフォーマンスの問題に遭遇した場合、[パフォーマンス](https://reactjs.org/docs/optimizing-performance.html)セクションで述べられているいくつかのオプトインによる解決方法があります。**最適化は急いでやってはいけません！**
 
 </DeepDive>
 
-## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
+## ステップ 3：React が DOM への変更をコミットする {/*step-3-react-commits-changes-to-the-dom*/}
 
-After rendering (calling) your components, React will modify the DOM. 
+あなたのコンポーネントをレンダー（関数として呼び出し）した後、React は DOM を変更します。
 
-* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. 
-* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+* **初回レンダー時には**、React は [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API を使用して、作成したすべての DOM ノードを画面に表示します。
+* **再レンダー時には**、React は最新のレンダー出力に合わせて DOM を変更するため、必要な最小限の操作（レンダー中に計算されたもの！）を適用します。
 
-**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
+**React はレンダー間で違いがあった場合にのみ DOM ノードを変更します**。例えば、以下のコンポーネントは親から渡された異なる props で毎秒再レンダーされます。`<input>` にテキストを追加して `value` に変化があった場合でも、コンポーネントが再レンダーされたときにテキストが消えないことに注意してください：
 
 <Sandpack>
 
@@ -193,21 +193,21 @@ export default function App() {
 
 </Sandpack>
 
-This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its `value`!
-## Epilogue: Browser paint {/*epilogue-browser-paint*/}
+これが動作するのは、最終ステップの部分で React は、新しい `time` を使って `<h1>` の中身だけを更新するからです。`<input>` は JSX 内で前回と同じ場所にあるので、React は `<input>` やその `value` に触れません！
+## エピローグ：ブラウザのペイント {/*epilogue-browser-paint*/}
 
-After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.
+レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、ドキュメント全体での混乱を避けるために、我々は「ペイント」と呼ぶことにします。
 
-<Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />
+<Illustration alt="ブラウザが「カード要素と静物画」をペイントしている" src="/images/docs/illustrations/i_browser-paint.png" />
 
 <Recap>
 
-* Any screen update in a React app happens in three steps:
-  1. Trigger
-  2. Render
-  3. Commit
-* You can use Strict Mode to find mistakes in your components
-* React does not touch the DOM if the rendering result is the same as last time
+* React アプリでの画面更新は、以下の 3 つのステップで行われる：
+  1. トリガ
+  2. レンダー
+  3. コミット
+* Strict Mode を使って、コンポーネントの間違いを発見できる。
+* レンダー結果が前回と同一である場合、React は DOM を触らない。
 
 </Recap>
 
diff --git a/src/content/learn/responding-to-events.md b/src/content/learn/responding-to-events.md
index 782b6c0f1..c078f1244 100644
--- a/src/content/learn/responding-to-events.md
+++ b/src/content/learn/responding-to-events.md
@@ -1,24 +1,24 @@
 ---
-title: Responding to Events
+title: イベントへの応答
 ---
 
 <Intro>
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
+React では、JSX に*イベントハンドラ*を追加できます。イベントハンドラとは、クリック、ホバー、フォーム入力へのフォーカスといったユーザ操作に応答してトリガされる、あなた独自の関数です。
 
 </Intro>
 
 <YouWillLearn>
 
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* イベントハンドラを記述するさまざまな方法
+* 親コンポーネントからイベント処理ロジックを渡す方法
+* イベントの伝播のしかたとそれを停止する方法
 
 </YouWillLearn>
 
-## Adding event handlers {/*adding-event-handlers*/}
+## イベントハンドラの追加 {/*adding-event-handlers*/}
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+イベントハンドラを追加するには、まず関数を定義し、適切な JSX タグに [props の一部として渡します](/learn/passing-props-to-a-component)。例として、以下にまだ何もしないボタンを示します。
 
 <Sandpack>
 
@@ -34,11 +34,11 @@ export default function Button() {
 
 </Sandpack>
 
-You can make it show a message when a user clicks by following these three steps:
+ユーザがクリックするとメッセージが表示されるようにするには、以下の 3 つの手順を実行します。
 
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `<button>` JSX.
+1. `Button` コンポーネントの*内部*で `handleClick` という関数を宣言します。
+2. その関数内にロジックを実装します（ここでは `alert` を使ってメッセージを表示）。
+3. `<button>` の JSX に `onClick={handleClick}` を追加します。
 
 <Sandpack>
 
@@ -62,14 +62,14 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler.** Event handler functions:
+`handleClick` 関数を定義し、それを `<button>` に [props として渡しました](/learn/passing-props-to-a-component)。この `handleClick` が**イベントハンドラ**です。イベントハンドラ関数は：
 
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* 通常、コンポーネントの*内部*で定義されます。
+* イベント名の先頭に `handle` が付いた名前にします。
 
-By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+慣習的に、イベントハンドラは `handle` にイベント名を続けて命名することが一般的です。`onClick={handleClick}`、`onMouseEnter={handleMouseEnter}` などがよく見られます。
 
-Alternatively, you can define an event handler inline in the JSX:
+また、JSX の中でイベントハンドラをインラインで定義することもできます。
 
 ```jsx
 <button onClick={function handleClick() {
@@ -77,7 +77,7 @@ Alternatively, you can define an event handler inline in the JSX:
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+または、より簡潔にアロー関数を使って記述することもできます。
 
 ```jsx
 <button onClick={() => {
@@ -85,54 +85,54 @@ Or, more concisely, using an arrow function:
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+これらのスタイルはすべて同じです。インラインのイベントハンドラは、短い関数の場合に便利です。
 
 <Pitfall>
 
-Functions passed to event handlers must be passed, not called. For example:
+イベントハンドラに渡す関数は、渡すべきなのであって、呼び出すべきではありません。例えば：
 
-| passing a function (correct)     | calling a function (incorrect)     |
+| 関数を渡す（正しい）               | 関数を呼び出す（誤り）               |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+微妙に違いますね。最初の例では、`handleClick` 関数が `onClick` イベントハンドラとして渡されています。これは、React にこの関数を覚えておいて、ユーザーがボタンをクリックしたときにのみコールするように指示します。
 
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+2 つ目の例では、`handleClick()` の末尾に `()` があるため、クリックを必要とせず[レンダー](/learn/render-and-commit)の際に*すぐに*関数を実行します。これは、[JSX の `{` と `}`](/learn/javascript-in-jsx-with-curly-braces)の中の JavaScript はすぐに実行されるためです。
 
-When you write code inline, the same pitfall presents itself in a different way:
+インラインでコードを書くときにも、以下のように同様の落とし穴が別の形で現れます。
 
-| passing a function (correct)            | calling a function (incorrect)    |
+| 関数を渡す（正しい）                      | 関数を呼び出す（間違い）            |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Passing inline code like this won't fire on click—it fires every time the component renders:
+このようなインラインコードを渡すと、クリックしたときではなく、コンポーネントがレンダーされるたびに実行されます。
 
 ```jsx
 // This alert fires when the component renders, not when clicked!
 <button onClick={alert('You clicked me!')}>
 ```
 
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+イベントハンドラをインラインで定義したい場合は、以下のように無名関数でラップしてください。
 
 ```jsx
 <button onClick={() => alert('You clicked me!')}>
 ```
 
-Rather than executing the code inside with every render, this creates a function to be called later.
+これで、レンダーごとに中のコードが実行されるのではなく、後で呼び出してもらうための関数を作成したことになります。
 
-In both cases, what you want to pass is a function:
+どちらの場合であっても、渡したいのは関数です。
 
-* `<button onClick={handleClick}>` passes the `handleClick` function.
-* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+* `<button onClick={handleClick}>` は `handleClick` 関数を渡します。
+* `<button onClick={() => alert('...')}>` は、`() => alert('...')` という関数を渡します。
 
-[Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+[アロー関数についての詳細はこちら](https://javascript.info/arrow-functions-basics)。
 
 </Pitfall>
 
-### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+### イベントハンドラでの props の読み取り {/*reading-props-in-event-handlers*/}
 
-Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+イベントハンドラはコンポーネント内に宣言されているため、コンポーネントの props にアクセスできます。以下は、クリックされたときに `message` プロパティの内容をアラートで表示するボタンです。
 
 <Sandpack>
 
@@ -165,13 +165,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+これにより、これらの 2 つのボタンは異なるメッセージを表示できます。渡されるメッセージを変更してみてください。
 
-### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+### イベントハンドラを props として渡す {/*passing-event-handlers-as-props*/}
 
-Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. 
+よくあるケースとして、親コンポーネントが子のイベントハンドラを指定したい場合があります。ボタンを考えてみましょう：`Button` というコンポーネントには、使用する場所によって、動画を再生する、画像をアップロードするなど、異なる関数を実行させたいことでしょう。
 
-To do this, pass a prop the component receives from its parent as the event handler like so:
+これを行うには、以下のようにして、コンポーネントが親から受け取った props をイベントハンドラとして渡します：
 
 <Sandpack>
 
@@ -220,22 +220,22 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Here, the `Toolbar` component renders a `PlayButton` and an `UploadButton`:
+この例では、`Toolbar` コンポーネントは `PlayButton` と `UploadButton` をレンダーしています：
 
-- `PlayButton` passes `handlePlayClick` as the `onClick` prop to the `Button` inside.
-- `UploadButton` passes `() => alert('Uploading!')` as the `onClick` prop to the `Button` inside.
+- `PlayButton` は `handlePlayClick` を内部 `Button` の `onClick` プロパティとして渡しています。
+- `UploadButton` は `() => alert('Uploading!')` を内部 `Button` の `onClick` プロパティとして渡しています。
 
-Finally, your `Button` component accepts a prop called `onClick`. It passes that prop directly to the built-in browser `<button>` with `onClick={onClick}`. This tells React to call the passed function on click.
+最後に、`Button` コンポーネントは props として `onClick` を受け取ります。それを `onClick={onClick}` としてブラウザの組み込み `<button>` に直接渡しています。これにより、クリック時に React は渡された関数を呼び出すようになります。
 
-If you use a [design system](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969), it's common for components like buttons to contain styling but not specify behavior. Instead, components like `PlayButton` and `UploadButton` will pass event handlers down.
+[デザインシステム](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969)を使用している場合、ボタンなどのコンポーネントはスタイリングを含んでいるが振る舞いは指定されないことが一般的です。代わりに、`PlayButton` や `UploadButton` のようなコンポーネントがイベントハンドラを渡します。
 
-### Naming event handler props {/*naming-event-handler-props*/}
+### イベントハンドラの props の命名 {/*naming-event-handler-props*/}
 
-Built-in components like `<button>` and `<div>` only support [browser event names](/reference/react-dom/components/common#common-props) like `onClick`. However, when you're building your own components, you can name their event handler props any way that you like.
+`<button>` や `<div>` のような組み込みコンポーネントは、`onClick` のような[ブラウザのイベント名](/reference/react-dom/components/common#common-props)のみをサポートしています。ただし、独自のコンポーネントを作成する場合、イベントハンドラとなる props を、好きなように命名できます。
 
-By convention, event handler props should start with `on`, followed by a capital letter.
+慣習として、イベントハンドラのプロップは `on` で始まり、次に大文字の文字が続くようにします。
 
-For example, the `Button` component's `onClick` prop could have been called `onSmash`:
+たとえば、`Button` コンポーネントの props である `onClick` は `onSmash` と命名することも可能です：
 
 <Sandpack>
 
@@ -268,9 +268,9 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-In this example, `<button onClick={onSmash}>` shows that the browser `<button>` (lowercase) still needs a prop called `onClick`, but the prop name received by your custom `Button` component is up to you!
+この例の `<button onClick={onSmash}>` を見ると分かるように、ブラウザの `<button>`（小文字）は常に props として `onClick` が必要ですが、カスタム `Button` コンポーネントが受け取る props の名前はあなた次第です！
 
-When your component supports multiple interactions, you might name event handler props for app-specific concepts. For example, this `Toolbar` component receives `onPlayMovie` and `onUploadImage` event handlers:
+コンポーネントが複数種類のインタラクションをサポートする場合、イベントハンドラの props をアプリ固有の概念に基づいて名付けることができます。例えば、この `Toolbar` コンポーネントは `onPlayMovie` と `onUploadImage` というイベントハンドラを受け取ります：
 
 <Sandpack>
 
@@ -312,13 +312,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-Notice how the `App` component does not need to know *what* `Toolbar` will do with `onPlayMovie` or `onUploadImage`. That's an implementation detail of the `Toolbar`. Here, `Toolbar` passes them down as `onClick` handlers to its `Button`s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like `onPlayMovie` gives you the flexibility to change how they're used later.
+`App` コンポーネントは、 `Toolbar` が `onPlayMovie` や `onUploadImage` に対して*何*を行うかを知る必要がないことに注意してください。それは `Toolbar` の実装の詳細です。ここでは、 `Toolbar` はそれらを `Button` の `onClick` ハンドラとして渡していますが、後でキーボードショートカットでもそれらをトリガするようにすることができます。`onPlayMovie` のようなアプリ固有のインタラクションに基づいて props を名付けることで、後でどのように使用されるかを変更できるという柔軟性が得られます。
 
-## Event propagation {/*event-propagation*/}
+## イベント伝播 {/*event-propagation*/}
 
-Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
+イベントハンドラは、コンポーネントが持っている可能性のあるどの子からのイベントであってもそれをキャッチします。このことをイベントがツリーを "バブリング (bubble)" または "伝播 (propagate)" する、と表現します。イベントは発生した場所から始まり、ツリーを上に向かって進んでいきます。
 
-This `<div>` contains two buttons. Both the `<div>` *and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
+この `<div>` には 2 つのボタンが含まれています。 `<div>` とそれぞれのボタン、*両方が*独自の `onClick` ハンドラを持っていますね。ボタンをクリックすると、どのハンドラが実行されると思いますか？
 
 <Sandpack>
 
@@ -349,19 +349,19 @@ button { margin: 5px; }
 
 </Sandpack>
 
-If you click on either button, its `onClick` will run first, followed by the parent `<div>`'s `onClick`. So two messages will appear. If you click the toolbar itself, only the parent `<div>`'s `onClick` will run.
+どちらのボタンをクリックしても、最初にそれ自体の `onClick` が実行され、その後で親である `<div>` の `onClick` が実行されます。つまりメッセージが 2 つ表示されます。ツールバー自体をクリックすると、親の `<div>` の `onClick` のみが実行されます。
 
 <Pitfall>
 
-All events propagate in React except `onScroll`, which only works on the JSX tag you attach it to.
+React では `onScroll` 以外のすべてのイベントが伝播します。 `onScroll` は、それをアタッチした JSX タグでのみ機能します。
 
 </Pitfall>
 
-### Stopping propagation {/*stopping-propagation*/}
+### 伝播の停止 {/*stopping-propagation*/}
 
-Event handlers receive an **event object** as their only argument. By convention, it's usually called `e`, which stands for "event". You can use this object to read information about the event.
+イベントハンドラは、**イベントオブジェクト**を唯一の引数として受け取ります。慣習的に、それは "event" を意味する `e` と呼ばれています。このオブジェクトを使用して、イベントに関する情報を読み取ることができます。
 
-That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call `e.stopPropagation()` like this `Button` component does:
+このイベントオブジェクトを使い、伝播を止めることもできます。イベントが親コンポーネントに伝わらないようにしたい場合、以下の `Button` コンポーネントのようにして `e.stopPropagation()` を呼び出す必要があります：
 
 <Sandpack>
 
@@ -403,22 +403,22 @@ button { margin: 5px; }
 
 </Sandpack>
 
-When you click on a button:
+ボタンをクリックすると以下のことが起こります。
 
-1. React calls the `onClick` handler passed to `<button>`. 
-2. That handler, defined in `Button`, does the following:
-   * Calls `e.stopPropagation()`, preventing the event from bubbling further.
-   * Calls the `onClick` function, which is a prop passed from the `Toolbar` component.
-3. That function, defined in the `Toolbar` component, displays the button's own alert.
-4. Since the propagation was stopped, the parent `<div>`'s `onClick` handler does *not* run.
+1. React が `<button>` に渡された `onClick` ハンドラを呼び出す。
+2. そのハンドラは `Button` で定義されており、次のことを行う。
+   * `e.stopPropagation()` を呼び出し、イベントがさらにバブリングされるのを防ぐ。
+   * `Toolbar` コンポーネントから渡された props である `onClick` 関数を呼び出す。
+3. その関数は `Toolbar` コンポーネントで定義されており、そのボタン固有のアラートを表示する。
+4. 伝播が停止されたため、親の `<div>` の `onClick` ハンドラは*実行されない*。
 
-As a result of `e.stopPropagation()`, clicking on the buttons now only shows a single alert (from the `<button>`) rather than the two of them (from the `<button>` and the parent toolbar `<div>`). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.
+`e.stopPropagation()` の結果、ボタンをクリックすると、アラートが 2 つ（`<button>` と親のツールバーの `<div>` から）ではなく、1 つだけ（`<button>` のみから）表示されるようになります。ボタンをクリックすることと、周囲のツールバーの余白をクリックすることは別物なので、この UI では伝播を止めることが理にかなっています。
 
 <DeepDive>
 
-#### Capture phase events {/*capture-phase-events*/}
+#### キャプチャフェーズのイベント {/*capture-phase-events*/}
 
-In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
+まれに、*伝播が停止されても*子要素のすべてのイベントをキャッチしたいという場合があります。たとえば、伝播のロジックに関係なく、すべてのクリックを分析のため記録したい場合などです。これを行うには、イベント名の末尾に `Capture` を追加します。
 
 ```js
 <div onClickCapture={() => { /* this runs first */ }}>
@@ -427,19 +427,19 @@ In rare cases, you might need to catch all events on child elements, *even if th
 </div>
 ```
 
-Each event propagates in three phases: 
+すべてのイベントは 3 つのフェーズで伝播します。
 
-1. It travels down, calling all `onClickCapture` handlers.
-2. It runs the clicked element's `onClick` handler. 
-3. It travels upwards, calling all `onClick` handlers.
+1. 下方向に移動し、すべての `onClickCapture` ハンドラを呼び出す。
+2. クリックされた要素自体の `onClick` ハンドラを実行する。
+3. 上方向に移動し、すべての `onClick` ハンドラを呼び出す。
 
-Capture events are useful for code like routers or analytics, but you probably won't use them in app code.
+キャプチャイベントはルータや分析のようなコードで役立ちますが、アプリケーションコードで使用することはほとんどありません。
 
 </DeepDive>
 
-### Passing handlers as alternative to propagation {/*passing-handlers-as-alternative-to-propagation*/}
+### 伝播の代わりにハンドラを渡す {/*passing-handlers-as-alternative-to-propagation*/}
 
-Notice how this click handler runs a line of code _and then_ calls the `onClick` prop passed by the parent:
+このクリックハンドラは、親から渡された `onClick` を呼び出す*前に*、1 行コードを実行していることに注目してください。
 
 ```js {4,5}
 function Button({ onClick, children }) {
@@ -454,13 +454,13 @@ function Button({ onClick, children }) {
 }
 ```
 
-You could add more code to this handler before calling the parent `onClick` event handler, too. This pattern provides an *alternative* to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it's not automatic. But the benefit of this pattern is that you can clearly follow the whole chain of code that executes as a result of some event.
+親の `onClick` イベントハンドラを呼び出す前に、このハンドラにさらにコードを追加することもできるでしょう。このパターンは、伝播の*代替手段*になります。子コンポーネントにイベントを処理させつつ、親コンポーネントが追加の動作を指定できるようになるのです。伝播とは異なり、これは自動的に起こることではありません。しかし、このパターンの利点は、あるイベントが発生した結果として実行されるコードのすべての繋がりをはっきりと追跡できることです。
 
-If you rely on propagation and it's difficult to trace which handlers execute and why, try this approach instead.
+イベント伝播に依存していて、どのハンドラがどのような理由で実行されているのかを追跡することが困難な場合は、代わりにこのアプローチを試してください。
 
-### Preventing default behavior {/*preventing-default-behavior*/}
+### デフォルト動作を防ぐ {/*preventing-default-behavior*/}
 
-Some browser events have default behavior associated with them. For example, a `<form>` submit event, which happens when a button inside of it is clicked, will reload the whole page by default:
+ブラウザのイベントには、デフォルトの動作が関連付けられているものがあります。例えば、`<form>` の submit イベントは、その中のボタンがクリックされると、デフォルトではページ全体がリロードされます。
 
 <Sandpack>
 
@@ -481,7 +481,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-You can call `e.preventDefault()` on the event object to stop this from happening:
+イベントオブジェクトの `e.preventDefault()` を呼び出して、これを防ぐことができます。
 
 <Sandpack>
 
@@ -505,28 +505,28 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Don't confuse `e.stopPropagation()` and `e.preventDefault()`. They are both useful, but are unrelated:
+`e.stopPropagation()` と `e.preventDefault()` を混同しないでください。どちらも有用ですが、無関係です。
 
-* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) stops the event handlers attached to the tags above from firing.
-* [`e.preventDefault()` ](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) prevents the default browser behavior for the few events that have it.
+* [`e.stopPropagation()`](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation) は、ツリーの上側にあるタグにアタッチされたイベントハンドラが発火しないようにします。
+* [`e.preventDefault()`](https://developer.mozilla.org/docs/Web/API/Event/preventDefault) は、数は少ないですがイベントがブラウザデフォルトの動作を持っていた場合に、それを抑制します。
 
-## Can event handlers have side effects? {/*can-event-handlers-have-side-effects*/}
+## イベントハンドラは副作用を持っていても構わない？ {/*can-event-handlers-have-side-effects*/}
 
-Absolutely! Event handlers are the best place for side effects.
+もちろんです！ イベントハンドラは副作用のための最適な場所です。
 
-Unlike rendering functions, event handlers don't need to be [pure](/learn/keeping-components-pure), so it's a great place to *change* something—for example, change an input's value in response to typing, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. In React, this is done by using [state, a component's memory.](/learn/state-a-components-memory) You will learn all about it on the next page.
+レンダー関数とは異なり、イベントハンドラは[純関数 (pure function)](/learn/keeping-components-pure) である必要はないので、何かを*変更*するのに最適な場所です。たとえば、入力値をタイプに応じて変更する、ボタンの押下に応じてリストを変更する、などです。ただし、情報を変更するためには、まずそれを格納する方法が必要です。React では、これは [state、コンポーネントのメモリ](/learn/state-a-component-memory)を使用して行います。次のページでそのすべてを学びます。
 
 <Recap>
 
-* You can handle events by passing a function as a prop to an element like `<button>`.
-* Event handlers must be passed, **not called!** `onClick={handleClick}`, not `onClick={handleClick()}`.
-* You can define an event handler function separately or inline.
-* Event handlers are defined inside a component, so they can access props.
-* You can declare an event handler in a parent and pass it as a prop to a child.
-* You can define your own event handler props with application-specific names.
-* Events propagate upwards. Call `e.stopPropagation()` on the first argument to prevent that.
-* Events may have unwanted default browser behavior. Call `e.preventDefault()` to prevent that.
-* Explicitly calling an event handler prop from a child handler is a good alternative to propagation.
+* イベントは、`<button>` などの要素に関数を props として渡すことで処理できます。
+* イベントハンドラは渡す必要があります。**呼び出してはいけません！** `onClick={handleClick}` とするのであって、`onClick={handleClick()}` としてはいけません。
+* イベントハンドラ関数は別途定義することも、インラインで定義することもできます。
+* イベントハンドラはコンポーネント内に定義されているため、props にアクセスできます。
+* 親でイベントハンドラを宣言し、子に props として渡すことができます。
+* イベントハンドラ props を定義する際にアプリケーション固有の名前をつけることができます。
+* イベントは上方向に伝播します。これを防ぐには、最初の引数を使って `e.stopPropagation()` を呼び出します。
+* イベントは、望ましくないデフォルトのブラウザ動作を持つことがあります。これを防ぐには、`e.preventDefault()` を呼ぶ必要があります。
+* 子コンポーネントでイベントハンドラを定義して props から受け取ったハンドラを明示的に呼び出すことは、伝播の代替手段として良い方法です。
 
 </Recap>
 
@@ -534,9 +534,9 @@ Unlike rendering functions, event handlers don't need to be [pure](/learn/keepin
 
 <Challenges>
 
-#### Fix an event handler {/*fix-an-event-handler*/}
+#### イベントハンドラを修正 {/*fix-an-event-handler*/}
 
-Clicking this button is supposed to switch the page background between white and black. However, nothing happens when you click it. Fix the problem. (Don't worry about the logic inside `handleClick`—that part is fine.)
+このボタンをクリックすると、ページの背景が白と黒の間で切り替わることになっています。ただし、クリックしても何も起こりません。問題を修正してください（`handleClick` 内部のロジックについては心配無用です。そこは問題ありません）。
 
 <Sandpack>
 
@@ -563,7 +563,7 @@ export default function LightSwitch() {
 
 <Solution>
 
-The problem is that `<button onClick={handleClick()}>` _calls_ the `handleClick` function while rendering instead of _passing_ it. Removing the `()` call so that it's `<button onClick={handleClick}>` fixes the issue:
+問題は、`<button onClick={handleClick()}>` がレンダー時に `handleClick` 関数を*呼び出す*のではなく、*渡す*べきだということです。`()` の呼び出しを削除して `<button onClick={handleClick}>` にすることで、問題が修正されます。
 
 <Sandpack>
 
@@ -588,7 +588,7 @@ export default function LightSwitch() {
 
 </Sandpack>
 
-Alternatively, you could wrap the call into another function, like `<button onClick={() => handleClick()}>`:
+または、別の関数にラップして、`<button onClick={() => handleClick()}>` のようにすることもできます。
 
 <Sandpack>
 
@@ -615,11 +615,11 @@ export default function LightSwitch() {
 
 </Solution>
 
-#### Wire up the events {/*wire-up-the-events*/}
+#### イベントを接続 {/*wire-up-the-events*/}
 
-This `ColorSwitch` component renders a button. It's supposed to change the page color. Wire it up to the `onChangeColor` event handler prop it receives from the parent so that clicking the button changes the color.
+この `ColorSwitch` コンポーネントは、ボタンをレンダーしています。このボタンはページの色を変更することになっています。親から props として受け取っている `onChangeColor` イベントハンドラをボタンに接続して、ボタンをクリックすると色が変わるようにしてください。
 
-After you do this, notice that clicking the button also increments the page click counter. Your colleague who wrote the parent component insists that `onChangeColor` does not increment any counters. What else might be happening? Fix it so that clicking the button *only* changes the color, and does _not_ increment the counter.
+また、ボタンをクリックすると、ページのクリックカウンタも増加していることに注意してください。この親コンポーネントを書いた同僚は、`onChangeColor` 関数にはカウンタを増やすコードなどないと言い張っています。ではほかに何かが起こっているのでしょうか？ ボタンをクリックしても*色が変わるだけ*で、カウンタは*増えない*ように、修正してください。
 
 <Sandpack>
 
@@ -673,9 +673,9 @@ export default function App() {
 
 <Solution>
 
-First, you need to add the event handler, like `<button onClick={onChangeColor}>`.
+まずはイベントハンドラを追加する必要があります。`<button onClick={onChangeColor}>` のようになります。
 
-However, this introduces the problem of the incrementing counter. If `onChangeColor` does not do this, as your colleague insists, then the problem is that this event propagates up, and some handler above does it. To solve this problem, you need to stop the propagation. But don't forget that you should still call `onChangeColor`.
+ただし、これによりカウンターが増加する問題が発生します。同僚が主張している通り `onChangeColor` がこれをやっているのでないのであれば、このイベントが上に伝播して、どこかのハンドラがそれを行っているのでしょう。この問題を解決するには、伝播を停止する必要があります。ただし `onChangeColor` を呼び出すことを忘れないでください。
 
 <Sandpack>
 
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 1dbaab4a9..7f2cdd5b2 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -1,25 +1,25 @@
 ---
-title: "State: A Component's Memory"
+title: "state：コンポーネントのメモリ"
 ---
 
 <Intro>
 
-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" should put 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* と呼びます。
 
 </Intro>
 
 <YouWillLearn>
 
-* How to add a state variable with the [`useState`](/reference/react/useState) Hook
-* What pair of values the `useState` Hook returns
-* How to add more than one state variable
-* Why state is called local
+* [`useState`](/reference/react/useState) を使って state 変数を追加する方法
+* `useState` フックが返す 2 つの値
+* 複数の state 変数を追加する方法
+* state がローカルと呼ばれる理由
 
 </YouWillLearn>
 
-## When a regular variable isn’t enough {/*when-a-regular-variable-isnt-enough*/}
+## 通常の変数ではうまくいかない例 {/*when-a-regular-variable-isnt-enough*/}
 
-Here's a component that renders a sculpture image. Clicking the "Next" button should show the next sculpture by changing the `index` to `1`, then `2`, and so on. However, this **won't work** (you can try it!):
+以下は、彫刻の画像をレンダーするコンポーネントです。"Next" ボタンをクリックすると、`index` が `1`、`2` のように変わりながら次の彫刻が表示されて欲しいのですが、これは**正しく動作しません**（試してみてください）。
 
 <Sandpack>
 
@@ -151,46 +151,46 @@ button {
 
 </Sandpack>
 
-The `handleClick` event handler is updating a local variable, `index`. But two things prevent that change from being visible:
+`handleClick` イベントハンドラは、ローカル変数 `index` を更新しています。しかし、以下の 2 つの理由により、目に見える変化が起きません。
 
-1. **Local variables don't persist between renders.** When React renders this component a second time, it renders it from scratch—it doesn't consider any changes to the local variables.
-2. **Changes to local variables won't trigger renders.** React doesn't realize it needs to render the component again with the new data.
+1. **ローカル変数はレンダー間で保持されません。** React がこのコンポーネントを次にレンダーするときは、まっさらな状態からレンダーします。過去にローカル変数を変更したことは考慮されません。
+2. **ローカル変数の変更は、レンダーをトリガーしません。** 新しいデータでコンポーネントを再度レンダーする必要があることに React は気づきません。
 
-To update a component with new data, two things need to happen:
+コンポーネントを新しいデータで更新するためには、次の 2 つのことが必要です。
 
-1. **Retain** the data between renders.
-2. **Trigger** React to render the component with new data (re-rendering).
+1. レンダー間でデータを**保持**する。
+2. 新しいデータでコンポーネントをレンダー（つまり再レンダー）するよう React に**伝える**。
 
-The [`useState`](/reference/react/useState) Hook provides those two things:
+[`useState`](/reference/react/useState) フックは、これら 2 つの機能を提供します。
 
-1. A **state variable** to retain the data between renders.
-2. A **state setter function** to update the variable and trigger React to render the component again.
+1. レンダー間でデータを保持する **state 変数**。
+2. 変数を更新し、React がコンポーネントを再度レンダーするようにトリガする **state  セッタ関数**。
 
-## Adding a state variable {/*adding-a-state-variable*/}
+## state 変数の追加 {/*adding-a-state-variable*/}
 
-To add a state variable, import `useState` from React at the top of the file:
+state 変数を追加するには、ファイルの先頭で React から `useState` をインポートします：
 
 ```js
 import { useState } from 'react';
 ```
 
-Then, replace this line:
+次に、この行を：
 
 ```js
 let index = 0;
 ```
 
-with
+以下のように置き換えます：
 
 ```js
 const [index, setIndex] = useState(0);
 ```
 
-`index` is a state variable and `setIndex` is the setter function.
+`index` は state 変数であり、`setIndex` はセッタ関数です。
 
-> The `[` and `]` syntax here is called [array destructuring](https://javascript.info/destructuring-assignment) and it lets you read values from an array. The array returned by `useState` always has exactly two items.
+> ここでの `[` と `]` という構文は[配列の分割代入](https://javascript.info/destructuring-assignment)と呼ばれるもので、配列から個々の値を読み取ることができます。`useState` から返される配列は常に正確に 2 個の要素を持っています。
 
-This is how they work together in `handleClick`:
+これらは `handleClick` の中で以下のように動作します：
 
 ```js
 function handleClick() {
@@ -198,7 +198,7 @@ function handleClick() {
 }
 ```
 
-Now clicking the "Next" button switches the current sculpture:
+これで、"Next" ボタンをクリックすると、現在の彫刻が切り替わるようになります：
 
 <Sandpack>
 
@@ -331,57 +331,57 @@ button {
 
 </Sandpack>
 
-### Meet your first Hook {/*meet-your-first-hook*/}
+### はじめてのフック {/*meet-your-first-hook*/}
 
-In React, `useState`, as well as any other function starting with "`use`", is called a Hook.
+React では、`useState` やその他の `use` で始まる関数はフック (Hook) と呼ばれます。
 
-*Hooks* are special functions that are only available while React is [rendering](/learn/render-and-commit#step-1-trigger-a-render) (which we'll get into in more detail on the next page). They let you "hook into" different React features.
+*フック*は、React が[レンダー](/learn/render-and-commit#step-1-trigger-a-render)されている間のみ利用可能な特別な関数です（この点については、次ページで詳しく説明します）。フックを使うことで、さまざまな React の機能に「接続 (hook into)」して使用することができます。
 
-State is just one of those features, but you will meet the other Hooks later.
+state はそれらの機能のうちの一つですが、他のフックについても後で紹介します。
 
 <Pitfall>
 
-**Hooks—functions starting with `use`—can only be called at the top level of your components or [your own Hooks.](/learn/reusing-logic-with-custom-hooks)** You can't call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it's helpful to think of them as unconditional declarations about your component's needs. You "use" React features at the top of your component similar to how you "import" modules at the top of your file.
+**`use` で始まるフックは、コンポーネントのトップレベルまたは[独自フック](/learn/reusing-logic-with-custom-hooks)内でのみ呼び出すことができます**。条件分岐、ループ、ネストされた関数の中でフックを呼び出すことはできません。フックは関数ですが、コンポーネントの要求に関する無条件の宣言を行うものだ、と捉えることが有用です。ファイルの先頭でモジュールを "import" するのと同様に、コンポーネントの先頭で React の機能を "use" するのです。
 
 </Pitfall>
 
-### Anatomy of `useState` {/*anatomy-of-usestate*/}
+### `useState` の構造 {/*anatomy-of-usestate*/}
 
-When you call [`useState`](/reference/react/useState), you are telling React that you want this component to remember something:
+[`useState`](/reference/react/useState) を呼び出すということは、このコンポーネントに何かを覚えさせるよう React に指示を出すということです：
 
 ```js
 const [index, setIndex] = useState(0);
 ```
 
-In this case, you want React to remember `index`.
+この場合、React には `index` を覚えてもらいます。
 
 <Note>
 
-The convention is to name this pair like `const [something, setSomething]`. You could name it anything you like, but conventions make things easier to understand across projects.
+慣習的に、このペアは `const [something, setSomething]` のように命名します。ほかの好きな名前を付けることもできますが、慣習に従うことでプロジェクト間で理解しやすくなります。
 
 </Note>
 
-The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`. 
+`useState` に渡す唯一の引数は、state 変数の**初期値**です。この例では、`index` の初期値を `useState(0)` で `0` に設定しています。
 
-Every time your component renders, `useState` gives you an array containing two values:
+コンポーネントがレンダーされるたびに、`useState` は以下の 2 つの値を含む配列を返します。
 
-1. The **state variable** (`index`) with the value you stored.
-2. The **state setter function** (`setIndex`) which can update the state variable and trigger React to render the component again.
+1. 保存した値を保持している **state 変数** (`index`)。
+2. state 変数を更新し、React にコンポーネントの再レンダーをトリガする **state セッタ関数** (`setIndex`)。
 
-Here's how that happens in action:
+以下は、これが実際にどのように動作するかを示しています。
 
 ```js
 const [index, setIndex] = useState(0);
 ```
 
-1. **Your component renders the first time.** Because you passed `0` to `useState` as the initial value for `index`, it will return `[0, setIndex]`. React remembers `0` is the latest state value.
-2. **You update the state.** When a user clicks the button, it calls `setIndex(index + 1)`. `index` is `0`, so it's `setIndex(1)`. This tells React to remember `index` is `1` now and triggers another render.
-3. **Your component's second render.** React still sees `useState(0)`, but because React *remembers* that you set `index` to `1`, it returns `[1, setIndex]` instead.
-4. And so on!
+1. **コンポーネントが初めてレンダーされる**。`useState` に `index` の初期値として `0` を渡したので、`[0, setIndex]` を返す。React は `0` が最新の state 値であることを覚える。
+2. **state を更新する**。ユーザがボタンをクリックすると、`setIndex(index + 1)` が呼び出される。現在 `index` は `0` なので、`setIndex(1)` になる。これにより、React は `index` が `1` になったことを覚え、再レンダーがトリガされる。
+3. **コンポーネントの 2 回目のレンダー**。React は再び `useState(0)` というコードに出会うが、React は `index` を `1` にセットしたことを*覚えている*ので、代わりに `[1, setIndex]` を返す。
+4. 以降も続く。
 
-## Giving a component multiple state variables {/*giving-a-component-multiple-state-variables*/}
+## コンポーネントで複数の state 変数を使う {/*giving-a-component-multiple-state-variables*/}
 
-You can have as many state variables of as many types as you like in one component. This component has two state variables, a number `index` and a boolean `showMore` that's toggled when you click "Show details":
+1 つのコンポーネントは、いくつでも好きな型の state 変数を持つことができます。このコンポーネントは、数値型の `index` と、"Show details" をクリックすると切り替わるブーリアン型の `showMore` という、2 つの state 変数を持っています。
 
 <Sandpack>
 
@@ -520,19 +520,19 @@ button {
 
 </Sandpack>
 
-It is a good idea to have multiple state variables if their state is unrelated, like `index` and `showMore` in this example. But if you find that you often change two state variables together, it might be easier to combine them into one. For example, if you have a form with many fields, it's more convenient to have a single state variable that holds an object than state variable per field. Read [Choosing the State Structure](/learn/choosing-the-state-structure) for more tips.
+この例の `index` と `showMore` のように state が互いに関連していない場合、複数の state 変数を持つのが良いでしょう。ただし、2 つの state 変数を一緒に更新することが多い場合は、それらを 1 つにまとめる方が簡単かもしれません。たとえば、多くのフィールドがあるフォームの場合、フィールドごとに state 変数を持つよりも、オブジェクトを保持する 1 つの state 変数を持つ方が便利です。詳しくは [state 構造の選択](/learn/choosing-the-state-structure)を参照してください。
 
 <DeepDive>
 
-#### How does React know which state to return? {/*how-does-react-know-which-state-to-return*/}
+#### React はどの state を返すかをどのようにして知るのか？ {/*how-does-react-know-which-state-to-return*/}
 
-You might have noticed that the `useState` call does not receive any information about *which* state variable it refers to. There is no "identifier" that is passed to `useState`, so how does it know which of the state variables to return? Does it rely on some magic like parsing your functions? The answer is no.
+`useState` の呼び出しには、どの state 変数を参照しているかに関する情報が含まれていないことに気付いたかもしれません。`useState` に「識別子」のようなものを渡さないのに、どの state 変数が返されるべきなのか、どのようにしてわかるのでしょうか。あなたの関数を解析するといった魔術的なものに頼っているのでしょうか？ 答えはノーです。
 
-Instead, to enable their concise syntax, Hooks **rely on a stable call order on every render of the same component.** This works well in practice because if you follow the rule above ("only call Hooks at the top level"), Hooks will always be called in the same order. Additionally, a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) catches most mistakes.
+そうではなく、簡潔な構文を実現するため、フックは**同一コンポーネントの各レンダー間で同一の順番で呼び出されることに依存しています**。上記のルール（「フックはトップレベルでのみ呼び出す」）に従っていれば、フックは常に同じ順序で呼び出されるので、これは実用上うまく機能します。また、[リンタプラグイン](https://www.npmjs.com/package/eslint-plugin-react-hooks)がほとんどの間違いをキャッチします。
 
-Internally, React holds an array of state pairs for every component. It also maintains the current pair index, which is set to `0` before rendering. Each time you call `useState`, React gives you the next state pair and increments the index. You can read more about this mechanism in [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e)
+内部的には、React はすべてのコンポーネントに対して state のペアの配列を保持しています。また、現在のペアインデックスも管理しており、レンダリング前に `0` に設定されます。`useState` が呼び出されるたびに、React は次の状態ペアを提供し、インデックスをインクリメントします。このメカニズムについては、[React Hooks: Not Magic, Just Arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) で詳しく説明されています。
 
-This example **doesn't use React** but it gives you an idea of how `useState` works internally:
+以下の例は **React を使っていませんが**、`useState` が内部的にどのように機能するかの考え方がわかります。
 
 <Sandpack>
 
@@ -724,15 +724,15 @@ button { display: block; margin-bottom: 10px; }
 
 </Sandpack>
 
-You don't have to understand it to use React, but you might find this a helpful mental model.
+React を使用するためにこのことを理解する必要はありませんが、脳内モデルとして知っておくと役立つかもしれません。
 
 </DeepDive>
 
-## State is isolated and private {/*state-is-isolated-and-private*/}
+## state は独立しておりプライベート {/*state-is-isolated-and-private*/}
 
-State is local to a component instance on the screen. In other words, **if you render the same component twice, each copy will have completely isolated state!** Changing one of them will not affect the other.
+state は画面上の個々のコンポーネントインスタンスに対してローカルです。言い換えると、**同じコンポーネントを 2 回レンダーした場合、それぞれのコピーは完全に独立した state を有することになります！** そのうちの 1 つを変更しても、もう 1 つには影響しません。
 
-In this example, the `Gallery` component from earlier is rendered twice with no changes to its logic. Try clicking the buttons inside each of the galleries. Notice that their state is independent:
+この例では、先ほどの `Gallery` コンポーネントが、そのロジックには変更を加えずに 2 回レンダーされています。それぞれのギャラリーの中のボタンをクリックしてみてください。これらの state が独立していることが分かるでしょう。
 
 <Sandpack>
 
@@ -891,21 +891,21 @@ button {
 
 </Sandpack>
 
-This is what makes state different from regular variables that you might declare at the top of your module. State is not tied to a particular function call or a place in the code, but it's "local" to the specific place on the screen. You rendered two `<Gallery />` components, so their state is stored separately.
+これが state 変数と、モジュールのトップレベルで宣言する通常の変数との違いです。state は特定の関数呼び出しやコードの場所に紐付いているのではなく、画面上の特定の場所に対して「ローカル」になります。あなたが 2 つの `<Gallery />` コンポーネントをレンダーしたので、それらの state は別々に保持されているのです。
 
-Also notice how the `Page` component doesn't "know" anything about the `Gallery` state or even whether it has any. Unlike props, **state is fully private to the component declaring it.** The parent component can't change it. This lets you add state to any component or remove it without impacting the rest of the components.
+また、`Page` コンポーネントは、`Gallery` の state の値も、そもそも state が存在するかどうかも「知らない」ということにとにも注目してください。props と違い、**state はそれを宣言したコンポーネントに完全にプライベートなものです**。親コンポーネントがそれを変更することはできません。このおかげで、任意のコンポーネントに state を追加したり削除したりしても、他のコンポーネントに影響を与えることはありません。
 
-What if you wanted both galleries to keep their states in sync? The right way to do it in React is to *remove* state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in [Sharing State Between Components.](/learn/sharing-state-between-components)
+両方のギャラリーで state を同期させたい場合はどうすればよいでしょうか？ React での正解は、子コンポーネントから state を*削除*して、それらに最も近い共有の親に追加することです。ここからの数ページでは、1 つのコンポーネント内での state の管理に焦点を当てていますが、[コンポーネント間での state 共有](/learn/sharing-state-between-components)で改めてこのトピックに戻って解説します。
 
 <Recap>
 
-* Use a state variable when a component needs to "remember" some information between renders.
-* State variables are declared by calling the `useState` Hook.
-* Hooks are special functions that start with `use`. They let you "hook into" React features like state.
-* Hooks might remind you of imports: they need to be called unconditionally. Calling Hooks, including `useState`, is only valid at the top level of a component or another Hook.
-* The `useState` Hook returns a pair of values: the current state and the function to update it.
-* You can have more than one state variable. Internally, React matches them up by their order.
-* State is private to the component. If you render it in two places, each copy gets its own state.
+* レンダー間で情報を「記憶」しておく必要があるコンポーネントには、state 変数を使う。
+* state 変数は、`useState` フックを呼び出すことで宣言される。
+* フックは `use` から始まる特殊な関数であり、state などの React 機能に「接続」できる。
+* フックはインポートと似ており、無条件に呼び出す必要がある。`useState` などのフックの呼び出しは、コンポーネントのトップレベルか別のフックでのみ有効である。
+* useState フックは、現在の state とそれを更新する関数の組み合わせを返す。
+* 複数の state 変数を持つことができる。内部で React はそれらを呼び出し順を用いて対応付ける。
+* state はコンポーネントにプライベートなものである。2 つの場所でレンダーすると、それぞれのコピーが独立した state を得る。
 
 </Recap>
 
@@ -913,11 +913,11 @@ What if you wanted both galleries to keep their states in sync? The right way to
 
 <Challenges>
 
-#### Complete the gallery {/*complete-the-gallery*/}
+#### ギャラリーの完成 {/*complete-the-gallery*/}
 
-When you press "Next" on the last sculpture, the code crashes. Fix the logic to prevent the crash. You may do this by adding extra logic to event handler or by disabling the button when the action is not possible.
+最後の彫刻が表示されているときに "Next" を押すと、コードがクラッシュします。クラッシュを防ぐためにロジックを修正してください。そのためには、イベントハンドラに追加のロジックを追加するか、操作が不可能な場合はボタンを無効化しましょう。
 
-After fixing the crash, add a "Previous" button that shows the previous sculpture. It shouldn't crash on the first sculpture.
+クラッシュを修正できたら、"Previous" ボタンを追加して、ひとつ前の彫刻を表示するようにしてください。最初の彫刻でクラッシュしないようにしましょう。
 
 <Sandpack>
 
@@ -1059,7 +1059,7 @@ img { width: 120px; height: 120px; }
 
 <Solution>
 
-This adds a guarding condition inside both event handlers and disables the buttons when needed:
+両方のイベントハンドラ内にガード条件を追加し、必要に応じてボタンを無効化します:
 
 <Sandpack>
 
@@ -1219,13 +1219,13 @@ img { width: 120px; height: 120px; }
 
 </Sandpack>
 
-Notice how `hasPrev` and `hasNext` are used *both* for the returned JSX and inside the event handlers! This handy pattern works because event handler functions ["close over"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) any variables declared while rendering.
+JSX を返している部分とイベントハンドラ内の両方で `hasPrev` と `hasNext` を使っていることに注意してください！ この便利なパターンが使えるのは、イベントハンドラ関数は[クロージャー](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)を用いてレンダー時に宣言されたあらゆる変数を参照できるからです。
 
 </Solution>
 
-#### Fix stuck form inputs {/*fix-stuck-form-inputs*/}
+#### 動かないフォームの修正 {/*fix-stuck-form-inputs*/}
 
-When you type into the input fields, nothing appears. It's like the input values are "stuck" with empty strings. The `value` of the first `<input>` is set to always match the `firstName` variable, and the `value` for the second `<input>` is set to always match the `lastName` variable. This is correct. Both inputs have `onChange` event handlers, which try to update the variables based on the latest user input (`e.target.value`). However, the variables don't seem to "remember" their values between re-renders. Fix this by using state variables instead.
+以下の入力フィールドに入力しても、何も表示されません。入力値が空文字列に「固定」されているかのようです。最初の `<input>` の `value` は `firstName` 変数に常に一致するように設定されており、2 番目の `<input>` の `value` は、 `lastName` 変数に常に一致するように設定されています。それ自体は正しいです。両方の入力欄には `onChange` イベントハンドラがあり、最新のユーザー入力（`e.target.value`）に基づいて変数を更新しようとしています。ただし、再レンダー間で変数が値を「覚えて」いないようです。代わりに state 変数を使用することで、これを修正してください。
 
 <Sandpack>
 
@@ -1274,7 +1274,7 @@ h1 { margin-top: 10px; }
 
 <Solution>
 
-First, import `useState` from React. Then replace `firstName` and `lastName` with state variables declared by calling `useState`. Finally, replace every `firstName = ...` assignment with `setFirstName(...)`, and do the same for `lastName`. Don't forget to update `handleReset` too so that the reset button works.
+まず、React から `useState` をインポートします。次に、`useState` を呼び出して宣言された state 変数で `firstName` と `lastName` を置き換えます。最後に、`firstName = ...` という代入を `setFirstName(...)` に置き換え、`lastName` についても同様にします。リセットボタンが機能するように `handleReset` も忘れずに更新してください。
 
 <Sandpack>
 
@@ -1325,13 +1325,13 @@ h1 { margin-top: 10px; }
 
 </Solution>
 
-#### Fix a crash {/*fix-a-crash*/}
+#### クラッシュの修正 {/*fix-a-crash*/}
 
-Here is a small form that is supposed to let the user leave some feedback. When the feedback is submitted, it's supposed to display a thank-you message. However, it crashes with an error message saying "Rendered fewer hooks than expected". Can you spot the mistake and fix it?
+ユーザーがフィードバックを残すための小さなフォームがあります。フィードバックが送信されると、お礼のメッセージが表示されるはずです。が、"Rendered fewer hooks than expected" というエラーメッセージが表示されてクラッシュします。間違いを見つけて修正できますか？
 
 <Hint>
 
-Are there any limitations on _where_ Hooks may be called? Does this component break any rules? Check if there are any comments disabling the linter checks--this is where the bugs often hide!
+フックを呼び出すことができる*場所*に関する制限がなかったでしょうか。このコンポーネントは何かルールに違反していませんか？ リンタチェックを無効化するコメントがないか確認してください。そういう場所にこそバグが潜んでいるものです！
 
 </Hint>
 
@@ -1370,9 +1370,9 @@ export default function FeedbackForm() {
 
 <Solution>
 
-Hooks can only be called at the top level of the component function. Here, the first `isSent` definition follows this rule, but the `message` definition is nested in a condition.
+フックはコンポーネント関数のトップレベルでのみ呼び出すことができます。ここでは、最初の `isSent` 定義はこのルールに従っていますが、`message` 定義が条件分岐の中に入ってしまっています。
 
-Move it out of the condition to fix the issue:
+条件分岐の外に出すことで問題を解決しましょう：
 
 <Sandpack>
 
@@ -1407,9 +1407,9 @@ export default function FeedbackForm() {
 
 </Sandpack>
 
-Remember, Hooks must be called unconditionally and always in the same order!
+フックは無条件で、かつ常に同じ順序で呼び出される必要があることを思い出してください！
 
-You could also remove the unnecessary `else` branch to reduce the nesting. However, it's still important that all calls to Hooks happen *before* the first `return`.
+また、不要な `else` ブランチを削除してネストを減らすこともできます。ただし、フックへのすべての呼び出しが最初の `return` の*前に*行われることが重要です。
 
 <Sandpack>
 
@@ -1444,19 +1444,19 @@ export default function FeedbackForm() {
 
 </Sandpack>
 
-Try moving the second `useState` call after the `if` condition and notice how this breaks it again.
+2 番目の `useState` の呼び出しを `if` 条件の後ろ側に移動して、再びコードが動かなくなることを確認してください。
 
-If your linter is [configured for React](/learn/editor-setup#linting), you should see a lint error when you make a mistake like this. If you don't see an error when you try the faulty code locally, you need to set up linting for your project. 
+リンタが [React 用に設定されている場合](/learn/editor-setup#linting)、このような間違いをした際にリントエラーが表示されるはずです。不具合のあるコードをローカルで試してもエラーが表示されない場合は、プロジェクトのリント設定が必要です。
 
 </Solution>
 
-#### Remove unnecessary state {/*remove-unnecessary-state*/}
+#### 不要な state を削除 {/*remove-unnecessary-state*/}
 
-When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason it always shows "Hello, !".
+この例では、ボタンがクリックされると、ユーザーの名前を尋ねて、挨拶を表示するアラートが表示されるはずです。名前を保持するために state を使用しようとしましたが、何らかの理由で常に "Hello, !" と表示されます。
 
-To fix this code, remove the unnecessary state variable. (We will discuss about [why this didn't work](/learn/state-as-a-snapshot) later.)
+このコードを修正するには、不要な state 変数を削除してください（[この問題が発生した理由](/learn/state-as-a-snapshot)については後で説明します）。
 
-Can you explain why this state variable was unnecessary?
+この state 変数が不要であった理由を説明できますか？
 
 <Sandpack>
 
@@ -1483,7 +1483,7 @@ export default function FeedbackForm() {
 
 <Solution>
 
-Here is a fixed version that uses a regular `name` variable declared in the function that needs it:
+この修正版では、`name` を必要としている関数内で、通常の変数を宣言しています：
 
 <Sandpack>
 
@@ -1506,7 +1506,7 @@ export default function FeedbackForm() {
 
 </Sandpack>
 
-A state variable is only necessary to keep information between re-renders of a component. Within a single event handler, a regular variable will do fine. Don't introduce state variables when a regular variable works well.
+state 変数は、コンポーネントの再レンダー間で情報を保持するためにのみ必要なものです。単一のイベントハンドラ内では、通常の変数で十分です。通常の変数でうまく動作する場合は、state 変数を追加しないでください。
 
 </Solution>
 
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 13aef4415..3d58bc072 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -86,20 +86,20 @@
       ]
     },
     {
-      "title": "Adding Interactivity",
+      "title": "インタラクティビティの追加",
       "path": "/learn/adding-interactivity",
       "tags": [],
       "routes": [
         {
-          "title": "Responding to Events",
+          "title": "イベントへの応答",
           "path": "/learn/responding-to-events"
         },
         {
-          "title": "State: A Component's Memory",
+          "title": "state：コンポーネントのメモリ",
           "path": "/learn/state-a-components-memory"
         },
         {
-          "title": "Render and Commit",
+          "title": "レンダーとコミット",
           "path": "/learn/render-and-commit"
         },
         {