You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/pages/learn/adding-interactivity.md
+47-47
Original file line number
Diff line number
Diff line change
@@ -1,30 +1,30 @@
1
1
---
2
-
title: Adding Interactivity
2
+
title: インタラクティビティの追加
3
3
---
4
4
5
5
<Intro>
6
6
7
-
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.
7
+
画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、イメージギャラリをクリックするとアクティブなイメージが切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することができます。この章では、インタラクションを処理し、state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。
8
8
9
9
</Intro>
10
10
11
11
<YouWillLearnisChapter={true}>
12
12
13
-
*[How to handle user-initiated events](/learn/responding-to-events)
14
-
*[How to make components "remember" information with state](/learn/state-a-components-memory)
15
-
*[How React updates the UI in two phases](/learn/render-and-commit)
16
-
*[Why state doesn't update right after you change it](/learn/state-as-a-snapshot)
17
-
*[How to queue multiple state updates](/learn/queueing-a-series-of-state-updates)
18
-
*[How to update an object in state](/learn/updating-objects-in-state)
19
-
*[How to update an array in state](/learn/updating-arrays-in-state)
## Responding to events {/*responding-to-events*/}
23
+
## イベントへの応答 {/*responding-to-events*/}
24
24
25
-
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.
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.
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.
77
+
コンポーネントはインタラクションの結果として画面に表示されるものを変更する必要があることがよくあります。フォームに入力すると入力フィールドが更新され、イメージカルーセルで「次へ」をクリックすると表示されるイメージが変更され、「購入」をクリックするとショッピングカートに商品が入ります。コンポーネントは、現在の入力値、現在のイメージ、ショッピングカートを「記憶」する必要があるのです。React では、このようなコンポーネント固有の記憶を state と呼びます。
78
78
79
-
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.
79
+
[`useState`](/apis/usestate)フックを使用すると、コンポーネントに state を追加することができます。フックとはコンポーネントに React の機能を使用させるための特別な関数です（state はその機能の 1 つです）。`useState`フックで state 変数を宣言できます。これは初期 state を受け取り、現在の state と、それを更新するための state セッタ関数のペアを返します。
80
80
81
81
```js
82
82
const [index, setIndex] =useState(0);
83
83
const [showMore, setShowMore] =useState(false);
84
84
```
85
85
86
-
Here is how an image gallery uses and updates state on click:
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.
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:
1.**Triggering** a render (delivering the diner's order to the kitchen)
238
-
2.**Rendering** the component (getting the order from the kitchen)
239
-
3.**Committing** to the DOM (placing the order on the table)
237
+
1.レンダーの**トリガ**（お客様の注文を厨房に届ける）
238
+
2.コンポーネントの**レンダー**（厨房から注文された料理を受け取る）
239
+
3.DOM への**コミット**（テーブルに注文を置く）
240
240
241
241
<IllustrationBlocksequential>
242
-
<Illustrationcaption="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" />
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!
255
+
通常の JavaScript の変数とは異なり、React の state はスナップショットのような動作をします。これを設定しても既存の state 変数は変更されず、代わりに再レンダーがトリガされます。このような動作に最初は驚くかもしれませんね。
256
256
257
257
```js
258
258
console.log(count); // 0
259
259
setCount(count +1); // Request a re-render with 1
260
260
console.log(count); // Still 0!
261
261
```
262
262
263
-
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?
[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)`.
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.
364
+
state を設定する際に*更新用関数*を渡すことでこれを修正することができます。`setScore(score + 1)`を `setScore(s => s + 1)`に置き換えることで、"+3" ボタンが修正されることに注目してください。これは、複数の state の更新をキューに入れる必要がある場合に便利です。
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.
400
+
次のレンダリングの前に複数の更新をキューに入れる方法を学ぶには**[一連の state の変更をキューに入れる](/learn/queueing-a-series-of-state-changes)**を読んでみましょう。
401
401
402
402
</LearnMore>
403
403
404
-
## Updating objects in state {/*updating-objects-in-state*/}
404
+
## state 内のオブジェクトを更新する方法 {/*updating-objects-in-state*/}
405
405
406
-
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.
406
+
State はオブジェクトを含むあらゆる種類の JavaScript の値を保持することができます。しかし、React の state 内で保持するオブジェクトや配列を直接変更してはいけません。その代わり、オブジェクトや配列を更新したい場合、既存のもののコピーを作るなどして新しい値を作成し、その新しい値を使って state を変更する必要があります。
407
407
408
-
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:
## Updating arrays in state {/*updating-arrays-in-state*/}
635
+
## state 内の配列を更新する方法 {/*updating-arrays-in-state*/}
636
636
637
-
Arrays are another type of mutableJavaScript 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:
637
+
配列もまた、state 内で保持できるミュータブル（mutable; 書き換え可能）な JavaScript オブジェクトの一種ですが、読み取り専用として扱うべきものです。オブジェクトと同様に state に保存された配列を更新したい場合、新しいものを作成し（または既存のもののコピーを作成し）state が新しい配列を使用するように設定する必要があります：
638
638
639
639
<Sandpack>
640
640
@@ -701,7 +701,7 @@ function ItemList({ artworks, onToggle }) {
701
701
702
702
</Sandpack>
703
703
704
-
If copying arrays in code gets tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer)to reduce repetitive code:
0 commit comments