From ce7a6a0b765864edcf66d35a801cd11dc633c780 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 13:26:26 +0900 Subject: [PATCH 1/4] Translate hooks-state (Using the State Hook) --- content/docs/hooks-state.md | 116 +++++++++++++++++++----------------- 1 file changed, 61 insertions(+), 55 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 2a234af82..255d55ff5 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -1,14 +1,14 @@ --- id: hooks-state -title: Using the State Hook +title: ステートフックの利用法 permalink: docs/hooks-state.html next: hooks-effect.html prev: hooks-overview.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*フック (hook)* は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 -The [previous page](/docs/hooks-intro.html) introduced Hooks with this example: +[以前のページ](/docs/hooks-intro.html)で以下の例を挙げてフックの紹介を行いました： ```js{4-5} import React, { useState } from 'react'; @@ -28,11 +28,11 @@ function Example() { } ``` -We'll start learning about Hooks by comparing this code to an equivalent class example. +このコードをクラスによる等価版と比較しながらフックについて学び始めましょう。 -## Equivalent Class Example +## クラスによる同等の例 -If you used classes in React before, this code should look familiar: +以前 React でクラスを使っていたなら、このコードに馴染みがおありでしょう。 ```js class Example extends React.Component { @@ -56,15 +56,16 @@ class Example extends React.Component { } ``` -The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page. +state は `{ count: 0 }` から始まり、ユーザがボタンをクリックした時に `this.setState()` を呼ぶことで `state.count` をインクリメントします。このページの全体にわたってこのクラスからの例が出てきます。 ->Note +> 補足 > ->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks. +> もっと現実的な例ではなくカウンタを使っているのはなぜか気になるかもしれません。フックについての第一歩の説明ですので API にフォーカスするためです。 -## Hooks and Function Components +## フックと関数コンポーネント + +念のため、React の関数コンポーネントとはこのようなものです： -As a reminder, function components in React look like this: ```js const Example = (props) => { @@ -73,7 +74,7 @@ const Example = (props) => { } ``` -or this: +あるいは： ```js function Example(props) { @@ -82,13 +83,13 @@ function Example(props) { } ``` -You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components". +これらのことを「ステートレスコンポーネント (stateless component)」だと理解していたかもしれません。これらの内部で React の state を利用できるようにしていますので、「関数コンポーネント (function component)」という名前を利用します。 -Hooks **don't** work inside classes. But you can use them instead of writing classes. +フックはクラスの内部では動作**しません**。クラスを書く代わりに使うものです。 -## What's a Hook? +## フックとは何か？ -Our new example starts by importing the `useState` Hook from React: +この新しい例では、React から `useState` をインポートするところから始めましょう。 ```js{1} import React, { useState } from 'react'; @@ -98,17 +99,17 @@ function Example() { } ``` -**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later. +**Hook とは何？**　フックとは Raect の機能に「接続 (hook into)」するための特別な関数です。例えば `useState` によって React の state の機能を関数コンポーネントに追加できます。他のフックについても後で学びます。 -**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now! +**フックをいつ使うべき？**　関数コンポーネントを書いていて state が必要だと気付いた場合、これまではコンポーネントをクラスに変換する必要がありました。今後は、既に書いた関数コンポーネントの中でフックを使うことができます。早速やってみましょう！ ->Note: +> 補足： > ->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html). +> コンポーネント内のどこでフックが使えてどこで使えないかに関する特別なルールがあります。これについては[フックのルール](/docs/hooks-rules.html)で学びます。 -## Declaring a State Variable +## state 変数の宣言 -In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor: +クラス内では、コンストラクタ内で `this.state` を `{ count: 0 }` にセットするという方法で、state である `count` を `0` へと初期化します。 ```js{4-6} class Example extends React.Component { @@ -120,7 +121,7 @@ class Example extends React.Component { } ``` -In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component: +関数コンポーネントには `this` は存在しませんので、`this.state` を読み書きすることはできません。その代わりに、コンポーネントの内部で直接 `useState` フックを使いましょう。 ```js{4,5} import React, { useState } from 'react'; @@ -130,13 +131,13 @@ function Example() { const [count, setCount] = useState(0); ``` -**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React. +**`useState` を呼ぶと何が起きるの？**　これにより『state 変数』が宣言されます。我々の例では変数を `count` と名付けましたが、`banana` でも何でも好きな名前にすることができます。これが関数コールの間で値を『保持』しておくための方法です ― `useState` は、クラスにおいて `this.state` が提供するのと全く同じ能力を使うための新しい方法です。通常、関数が終了すると変数は『消えて』しまいますが、state 変数は React によって保持されます。 -**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.) +**引数として `useState` に何を渡すのか？**　`useState()` フックの唯一の引数は state の初期値です。クラスの場合とは異なり、state はオブジェクトである必要はありません。数字や文字列が欲しいだけであればそれらを保持することができます。我々の例ではユーザがクリックした回数に対応する数字が欲しいだけですので、`0` を state 変数の初期値として渡します。（もし違う値を保持したい場合は `useState()` を 2 回呼ぶことになります） -**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean). +**`useState` は何を返すのか？**　現在の state と、それを更新するための関数とを、ペアにして返します。これが `const [count, setCount] = useState()` という書き方をした理由です。これはクラスにおける `this.state.count` と `this.setState` に似ていますが、それをペアとして手に入れる点が異なります。もしもここで使った構文になじみがない場合は、[このページの下部](/docs/hooks-state.html#tip-what-do-square-brackets-mean)で改めて説明します。 -Now that we know what the `useState` Hook does, our example should make more sense: +`useState` が何をやるのかが分かったので、最初の例の意味がより分かりやすくなりました： ```js{4,5} import React, { useState } from 'react'; @@ -146,32 +147,31 @@ function Example() { const [count, setCount] = useState(0); ``` -We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`. +`count` という名前の state 変数を宣言しており、それを `0` にセットします。再レンダー間で React はその変数の現在値を記憶しており、最新の値を関数に渡します。現在の `count` の値を更新したい場合は、`setCount` を呼ぶことができます。 ->Note +> 補足 > ->You might be wondering: why is `useState` not named `createState` instead? +> どうして `createState` ではなく `useState` という名前なのか気になるでしょうか？ > ->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html). +> state が「作成」されるのははコンポーネントの初回レンダー時だけですので、`createState` という名前はあまり正確ではありません。次回以降のレンダー時には、`useState` からは既存の state の現在値を受け取ります。毎回作成していたのではそもそも「状態」になりませんね。また、フックの名前が*常に* `use` から始まることには理由があります。[フックのルール](/docs/hooks-rules.html)で改めて説明します。 -## Reading State +## state の読み出し -When we want to display the current count in a class, we read `this.state.count`: +クラス内で現在のカウント値を表示したい場合、`this.state.count` を読み出します： ```js

You clicked {this.state.count} times

``` -In a function, we can use `count` directly: - +関数内では、直接 `count` を使うことができます： ```js

You clicked {count} times

``` -## Updating State +## state の更新 -In a class, we need to call `this.setState()` to update the `count` state: +クラスでは、`this.setState()` を呼ぶことで `count` ステートを更新します： ```js{1} ``` -In a function, we already have `setCount` and `count` as variables so we don't need `this`: +関数内では、すでに `setCount` と `count` を変数として受け取っていますので、`this` は必要ありません： ```js{1} ``` -## Recap +## まとめ Let's now **recap what we learned line by line** and check our understanding. @@ -216,17 +216,21 @@ Let's now **recap what we learned line by line** and check our understanding. * **Line 4:** Inside the `Example` component, we declare a new state variable by calling the `useState` Hook. It returns a pair of values, to which we give names. We're calling our variable `count` because it holds the number of button clicks. We initialize it to zero by passing `0` as the only `useState` argument. The second returned item is itself a function. It lets us update the `count` so we'll name it `setCount`. * **Line 9:** When the user clicks, we call `setCount` with a new value. React will then re-render the `Example` component, passing the new `count` value to it. -This might seem like a lot to take in at first. Don't rush it! If you're lost in the explanation, look at the code above again and try to read it from top to bottom. We promise that once you try to "forget" how state works in classes, and look at this code with fresh eyes, it will make sense. +- **1 行目：** `useState` フックを React からインポートします。これが関数コンポーネント内でローカル state を使えるようにするためのものです。 +- **4 行目：** `Example` コンポーネント内で `useState` フックを呼び出すことで新しい state 変数を宣言します。2 つの値のペアが返されるので、それらに名前を与えます。ボタンのクリック回数を保持するための変数ですので `count` と名付けましょう。`useState` 唯一の引数として `0` を渡すことで、変数をゼロへと初期化します。返り値の 2 つ目はそれ自体が関数です。これにより `count` を更新するので、`setCount` とう名前にします。 +- **9 行目：** ユーザがクリックした時に、新しい値で `setCount` を呼びます。React は `Example` コンポーネントを再レンダーし、その際には新たな `count` の値を渡します。 -### Tip: What Do Square Brackets Mean? +最初は飲み込むのに時間がかかるかもしれません。急がないようにしましょう！　途中で分からなくなった場合は上記のコードを最初から最後まで読み直してください。クラスで state がどう動くのかを「忘れて」新鮮な目でこのコードを見るようにすれば、必ず理解できるようになるはずです。 -You might have noticed the square brackets when we declare a state variable: +### ヒント：この角カッコの意味は？ + +state 変数を宣言するときのこの角カッコに気付かれたでしょうか： ```js const [count, setCount] = useState(0); ``` -The names on the left aren't a part of the React API. You can name your own state variables: +左辺に書かれている名前は、React の API の一部ではありません。state 変数には好きな名前を付けることができます： ```js const [fruit, setFruit] = useState('banana'); @@ -234,21 +238,23 @@ The names on the left aren't a part of the React API. You can name your own stat This JavaScript syntax is called ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring). It means that we're making two new variables `fruit` and `setFruit`, where `fruit` is set to the first value returned by `useState`, and `setFruit` is the second. It is equivalent to this code: +この JavaScript の構文は ["分割代入 (destructuring)"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) と呼ばれています。これが意味するところは、`fruit` と `setFruit` という名前の 2 つの変数を作って、`useState` から返される値のうち 1 つ目を `fruit` に、2 つ目を `setFruit` に代入する、ということです。これは以下のコードと等価です： + ```js var fruitStateVariable = useState('banana'); // Returns a pair var fruit = fruitStateVariable[0]; // First item in a pair var setFruit = fruitStateVariable[1]; // Second item in a pair ``` -When we declare a state variable with `useState`, it returns a pair — an array with two items. The first item is the current value, and the second is a function that lets us update it. Using `[0]` and `[1]` to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead. +`useState` で state 変数を宣言する際、ペア、つまり 2 つの要素を含んだ配列が返されます。1 つ目の要素は state の現在の値、2 つ目の要素はそれを更新するための関数です。これらには特定の意味があるので、アクセスするのに `[0]` や `[1]` を使うのではちょっと分かりづらくなります。だから代わりに分割代入を使うというわけです。 ->Note +> 補足 > ->You might be curious how React knows which component `useState` corresponds to since we're not passing anything like `this` back to React. We'll answer [this question](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components) and many others in the FAQ section. +> `useState` から `this` のようなものを一切 React に返していないので、その呼び出しがどのコンポーネントに対応しているのかを React がどのようにして知るのか、気になっているかもしれません。FAQ セクションで、[この質問](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components)およびその他の疑問についてお答えしています。 -### Tip: Using Multiple State Variables +### ヒント：複数の state 変数を使う -Declaring state variables as a pair of `[something, setSomething]` is also handy because it lets us give *different* names to different state variables if we want to use more than one: +state 変数の宣言を `[something, setSomething]` のペアの形で行うのが便利であるもうひとつの理由は、state 変数を複数使いたくなった場合にそれらに*異なる*名前をつけることができるからです： ```js function ExampleWithManyStates() { @@ -258,7 +264,7 @@ function ExampleWithManyStates() { const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); ``` -In the above component, we have `age`, `fruit`, and `todos` as local variables, and we can update them individually: +上記の例では、ローカル変数として `age`、`fruit`、`todos` があり、それぞれを個別に更新することができます。 ```js function handleOrangeClick() { @@ -267,14 +273,14 @@ In the above component, we have `age`, `fruit`, and `todos` as local variables, } ``` -You **don't have to** use many state variables. State variables can hold objects and arrays just fine, so you can still group related data together. However, unlike `this.setState` in a class, updating a state variable always *replaces* it instead of merging it. +たくさんの state 変数を使う**必要は**ありません。state 変数はオブジェクトや配列も何ら問題なく保持できますので、関連する値をいっしょにまとめておくこともできます。しかしクラスでの `this.setState` とは異なり、state 変数の更新は、マージではなく必ず古い値を*置換*します。 -We provide more recommendations on splitting independent state variables [in the FAQ](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables). +独立した state 変数を分割する際の推奨事項については [FAQ で](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables)詳しく述べています。 -## Next Steps +## 次のステップ -On this page we've learned about one of the Hooks provided by React, called `useState`. We're also sometimes going to refer to it as the "State Hook". It lets us add local state to React function components -- which we did for the first time ever! +このページでは React によって提供されるフックのうちのひとつである `setState` について学びました。これからは「ステートフック」という名前でも呼ぶことにします。ステートフックによって、React の歴史上はじめて、React の関数コンポーネントにローカル state を加えることができます！ -We also learned a little bit more about what Hooks are. Hooks are functions that let you "hook into" React features from function components. Their names always start with `use`, and there are more Hooks we haven't seen yet. +またフックが一体何なのかについても少々学びました。フックとは関数コンポーネント内から React の機能に「接続する (hook into)」ための関数のことです。フックの名前は必ず `use` から始まり、他にもまだ説明していない様々なフックがあります。 -**Now let's continue by [learning the next Hook: `useEffect`.](/docs/hooks-effect.html)** It lets you perform side effects in components, and is similar to lifecycle methods in classes. +**それでは[次のフックである `useEffect` について学びましょう。](/docs/hooks-effect.html)**これらは関数におけるライフサイクルメソッドと似ており、コンポーネント内で副作用を実行することができるようにするものです。 From 4e321816403e87a151bbe462bf6bb3ff712c0c56 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 13:29:45 +0900 Subject: [PATCH 2/4] Remove untranslated sentences --- content/docs/hooks-state.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 255d55ff5..1c0339e2b 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -212,10 +212,6 @@ Let's now **recap what we learned line by line** and check our understanding. 14: } ``` -* **Line 1:** We import the `useState` Hook from React. It lets us keep local state in a function component. -* **Line 4:** Inside the `Example` component, we declare a new state variable by calling the `useState` Hook. It returns a pair of values, to which we give names. We're calling our variable `count` because it holds the number of button clicks. We initialize it to zero by passing `0` as the only `useState` argument. The second returned item is itself a function. It lets us update the `count` so we'll name it `setCount`. -* **Line 9:** When the user clicks, we call `setCount` with a new value. React will then re-render the `Example` component, passing the new `count` value to it. - - **1 行目：** `useState` フックを React からインポートします。これが関数コンポーネント内でローカル state を使えるようにするためのものです。 - **4 行目：** `Example` コンポーネント内で `useState` フックを呼び出すことで新しい state 変数を宣言します。2 つの値のペアが返されるので、それらに名前を与えます。ボタンのクリック回数を保持するための変数ですので `count` と名付けましょう。`useState` 唯一の引数として `0` を渡すことで、変数をゼロへと初期化します。返り値の 2 つ目はそれ自体が関数です。これにより `count` を更新するので、`setCount` とう名前にします。 - **9 行目：** ユーザがクリックした時に、新しい値で `setCount` を呼びます。React は `Example` コンポーネントを再レンダーし、その際には新たな `count` の値を渡します。 @@ -236,8 +232,6 @@ state 変数を宣言するときのこの角カッコに気付かれたでし const [fruit, setFruit] = useState('banana'); ``` -This JavaScript syntax is called ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring). It means that we're making two new variables `fruit` and `setFruit`, where `fruit` is set to the first value returned by `useState`, and `setFruit` is the second. It is equivalent to this code: - この JavaScript の構文は ["分割代入 (destructuring)"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) と呼ばれています。これが意味するところは、`fruit` と `setFruit` という名前の 2 つの変数を作って、`useState` から返される値のうち 1 つ目を `fruit` に、2 つ目を `setFruit` に代入する、ということです。これは以下のコードと等価です： ```js From 4a1da3cb6c245cf7d1db0ff828bdfa441c7df10e Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Tue, 5 Feb 2019 11:13:26 +0900 Subject: [PATCH 3/4] Apply suggestions from code review by koba04 Co-Authored-By: smikitky --- content/docs/hooks-state.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 1c0339e2b..19f3b363f 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -32,7 +32,7 @@ function Example() { ## クラスによる同等の例 -以前 React でクラスを使っていたなら、このコードに馴染みがおありでしょう。 +以前 React でクラスを使っていたなら、このコードに馴染みがあるでしょう。 ```js class Example extends React.Component { @@ -99,7 +99,7 @@ function Example() { } ``` -**Hook とは何？**　フックとは Raect の機能に「接続 (hook into)」するための特別な関数です。例えば `useState` によって React の state の機能を関数コンポーネントに追加できます。他のフックについても後で学びます。 +**Hook とは何？**　フックとは React の機能に「接続 (hook into)」するための特別な関数です。例えば `useState` によって React の state の機能を関数コンポーネントに追加できます。他のフックについても後で学びます。 **フックをいつ使うべき？**　関数コンポーネントを書いていて state が必要だと気付いた場合、これまではコンポーネントをクラスに変換する必要がありました。今後は、既に書いた関数コンポーネントの中でフックを使うことができます。早速やってみましょう！ @@ -109,7 +109,7 @@ function Example() { ## state 変数の宣言 -クラス内では、コンストラクタ内で `this.state` を `{ count: 0 }` にセットするという方法で、state である `count` を `0` へと初期化します。 +クラスでは、コンストラクタ内で `this.state` を `{ count: 0 }` にセットするという方法で、state である `count` を `0` へと初期化します。 ```js{4-6} class Example extends React.Component { @@ -131,7 +131,7 @@ function Example() { const [count, setCount] = useState(0); ``` -**`useState` を呼ぶと何が起きるの？**　これにより『state 変数』が宣言されます。我々の例では変数を `count` と名付けましたが、`banana` でも何でも好きな名前にすることができます。これが関数コールの間で値を『保持』しておくための方法です ― `useState` は、クラスにおいて `this.state` が提供するのと全く同じ能力を使うための新しい方法です。通常、関数が終了すると変数は『消えて』しまいますが、state 変数は React によって保持されます。 +**`useState` を呼ぶと何が起きるの？**　これにより『state 変数』が宣言されます。我々の例では変数を `count` と名付けましたが、`banana` でも何でも好きな名前にすることができます。これが関数コールの間で値を『保持』しておくための方法です ― `useState` は、クラスにおいて `this.state` が提供するのと全く同じ機能を実現するための新しい方法です。通常、関数が終了すると変数は『消えて』しまいますが、state 変数は React によって保持されます。 **引数として `useState` に何を渡すのか？**　`useState()` フックの唯一の引数は state の初期値です。クラスの場合とは異なり、state はオブジェクトである必要はありません。数字や文字列が欲しいだけであればそれらを保持することができます。我々の例ではユーザがクリックした回数に対応する数字が欲しいだけですので、`0` を state 変数の初期値として渡します。（もし違う値を保持したい場合は `useState()` を 2 回呼ぶことになります） @@ -153,7 +153,7 @@ function Example() { > > どうして `createState` ではなく `useState` という名前なのか気になるでしょうか？ > -> state が「作成」されるのははコンポーネントの初回レンダー時だけですので、`createState` という名前はあまり正確ではありません。次回以降のレンダー時には、`useState` からは既存の state の現在値を受け取ります。毎回作成していたのではそもそも「状態」になりませんね。また、フックの名前が*常に* `use` から始まることには理由があります。[フックのルール](/docs/hooks-rules.html)で改めて説明します。 +> state が「作成」されるのはコンポーネントの初回レンダー時だけですので、`createState` という名前はあまり正確ではありません。次回以降のレンダー時には、`useState` からは既存の state の現在値を受け取ります。毎回作成していたのではそもそも「状態」になりませんね。また、フックの名前が*常に* `use` から始まることには理由があります。[フックのルール](/docs/hooks-rules.html)で改めて説明します。 ## state の読み出し @@ -216,7 +216,7 @@ Let's now **recap what we learned line by line** and check our understanding. - **4 行目：** `Example` コンポーネント内で `useState` フックを呼び出すことで新しい state 変数を宣言します。2 つの値のペアが返されるので、それらに名前を与えます。ボタンのクリック回数を保持するための変数ですので `count` と名付けましょう。`useState` 唯一の引数として `0` を渡すことで、変数をゼロへと初期化します。返り値の 2 つ目はそれ自体が関数です。これにより `count` を更新するので、`setCount` とう名前にします。 - **9 行目：** ユーザがクリックした時に、新しい値で `setCount` を呼びます。React は `Example` コンポーネントを再レンダーし、その際には新たな `count` の値を渡します。 -最初は飲み込むのに時間がかかるかもしれません。急がないようにしましょう！　途中で分からなくなった場合は上記のコードを最初から最後まで読み直してください。クラスで state がどう動くのかを「忘れて」新鮮な目でこのコードを見るようにすれば、必ず理解できるようになるはずです。 +最初は飲み込むのに時間がかかるかもしれません。急がないようにしましょう！　途中で分からなくなった場合は上記のコードを最初から最後まで読み直してください。一旦クラスで state がどう動くのかを「忘れて」新鮮な目でこのコードを見るようにすれば、必ず理解できるようになるはずです。 ### ヒント：この角カッコの意味は？ @@ -244,7 +244,7 @@ state 変数を宣言するときのこの角カッコに気付かれたでし > 補足 > -> `useState` から `this` のようなものを一切 React に返していないので、その呼び出しがどのコンポーネントに対応しているのかを React がどのようにして知るのか、気になっているかもしれません。FAQ セクションで、[この質問](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components)およびその他の疑問についてお答えしています。 +> React に対して `this` のようなものを一切渡していないので、どのようにコンポーネントと `useState` の呼び出しの対応を知るのか不思議に思うかもしれません。FAQ セクションで、[この質問](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components)およびその他の疑問についてお答えしています。 ### ヒント：複数の state 変数を使う @@ -273,7 +273,7 @@ function ExampleWithManyStates() { ## 次のステップ -このページでは React によって提供されるフックのうちのひとつである `setState` について学びました。これからは「ステートフック」という名前でも呼ぶことにします。ステートフックによって、React の歴史上はじめて、React の関数コンポーネントにローカル state を加えることができます！ +このページでは React によって提供されるフックのうちのひとつである `useState` について学びました。これからは「ステートフック」という名前でも呼ぶことにします。ステートフックによって、React の歴史上はじめて、React の関数コンポーネントにローカル state を加えることができます！ またフックが一体何なのかについても少々学びました。フックとは関数コンポーネント内から React の機能に「接続する (hook into)」ための関数のことです。フックの名前は必ず `use` から始まり、他にもまだ説明していない様々なフックがあります。 From c6a8ef3ce8fe31eee77f9254a330e071da0f79ea Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Wed, 6 Feb 2019 00:05:40 +0900 Subject: [PATCH 4/4] Address issues pointed out by reviewers --- content/docs/hooks-state.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 19f3b363f..2d10d9f48 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -74,7 +74,7 @@ const Example = (props) => { } ``` -あるいは： +あるいはこのようなものです： ```js function Example(props) { @@ -189,7 +189,7 @@ function Example() { ## まとめ -Let's now **recap what we learned line by line** and check our understanding. +では **これまで学んだことを 1 行ずつまとめて**、理解を確認しましょう。