Translate "useState" #595
Merged
Translate "useState" #595
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yuta-ike
commented
May 26, 2023
| * `nextState`: The value that you want the state to be. It can be a value of any type, but there is a special behavior for functions. | ||
| * If you pass a function as `nextState`, it will be treated as an _updater function_. It must be pure, should take the pending state as its only argument, and should return the next state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state. [See an example below.](#updating-state-based-on-the-previous-state) | ||
| * `nextState`: 次に state にセットしたい値です。どんな型の値でも渡すことができますが、関数を渡した場合は特別な振る舞いをします。 | ||
| * `nextState` に関数を渡した場合、その関数は*更新関数*として扱われます。更新関数は、純粋で、未確定の state (pending state) を唯一の引数として受け取り、次の state を返す必要があります。React は更新関数をキューに入れ、コンポーネントを再レンダーします。次のレンダーで、React はキューに入れられたすべての更新関数を前の state に対して適用し、次の state を導出します。[例を見る](#updating-state-based-on-the-previous-state) |
There was a problem hiding this comment.
原文では、pending stateと表現されている部分ですが、上手い訳語が見つからず「未確定の state (pending state)」としています。
良い語があれば教えていただけると嬉しいです。
There was a problem hiding this comment.
特にほかの記事で出てくる用語というわけでもないので、「state の現在値」「この時点での state の値」などとして、英訳は示さずにやり過ごすのでも構わないかなという気がしています。
There was a problem hiding this comment.
「処理中の state（の値）」などでも良さそうな気がしました。
There was a problem hiding this comment.
ありがとうございます。「処理中の state の値」としました
yuta-ike
commented
May 26, 2023
|
|
||
| You can put objects and arrays into state. In React, state is considered read-only, so **you should *replace* it rather than *mutate* your existing objects**. For example, if you have a `form` object in state, don't mutate it: | ||
| state にオブジェクトや配列をセットすることができます。ただし React では、state は読み取り専用 (read-only) として扱う必要があります。そのため、state を更新する場合は、**既存のオブジェクトを直接*変更する (mutate)* のではなく、*置き換える (replace)* 必要があります**。例えば、state として `form` オブジェクトを保持している場合、以下のように書き換えを行ってはいけません。 |
There was a problem hiding this comment.
mutateを変更と訳してしまうと、"変更"が一般語でchangeとの違いが汲み取れなくなってしまうので、「書き換え」に統一しました（replace=置き換え、mutate=書き換え、という釣り合いをとりたかったのもあります）。初出のこの文のみ、(mutate)のカッコを入れました。
他のページでは、「書き換え」と「ミューテーション」のどちらも利用されており、迷った部分です。何か指針などありますでしょうか？
There was a problem hiding this comment.
「変更」と「書き換え」については仰る通りの方針で大丈夫です。
別に明文化しているルールではないのですが、「書き換え」と「ミューテーション」については、意図的に少々混在させながら（しかし誤解を招かないように気も使いながら）使っています。理由は以下の通りです。
- 「ミューテーション」に全部統一して毎回それを使うのは流石にクドくなる
- 「書き換え」のみに統一してしまうのも分かりづらい。「イミュータビリティ」「イミュータブル」「ミュータブル」といった関連用語も否応なしに出てくるので、少々は「ミューテーション」も残しておかないとこれらの概念や関連性を理解しづらくなる。
なので「書き換え」を主軸にしつつも「ミューテーション」という用語も適宜出して理解してもらう、みたいな戦略にしています。
There was a problem hiding this comment.
承知しました、ありがとうございます。
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
smikitky
requested changes
May 31, 2023
|
|
||
| * Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders) | ||
| * レンダリング中に `set` 関数を呼び出すことは、*現在レンダリング中の*コンポーネント内からのみ許されています。その場合、React はその出力を破棄し、新しい state で再レンダーを試みます。このパターンが必要になることはほとんどありませんが、**前回のレンダーからの情報を保存**するために使用できます。[例を見る](#storing-information-from-previous-renders) |
There was a problem hiding this comment.
Suggested change
| * レンダリング中に `set` 関数を呼び出すことは、*現在レンダリング中の*コンポーネント内からのみ許されています。その場合、React はその出力を破棄し、新しい state で再レンダーを試みます。このパターンが必要になることはほとんどありませんが、**前回のレンダーからの情報を保存**するために使用できます。[例を見る](#storing-information-from-previous-renders) | |
| * レンダー中に `set` 関数を呼び出すことは、*現在レンダー中の*コンポーネント内からのみ許されています。その場合、React はその出力を破棄し、新しい state で再レンダーを試みます。このパターンが必要になることはほとんどありませんが、**前回のレンダーからの情報を保存**するために使用できます。[例を見る](#storing-information-from-previous-renders) |
| 1. The <CodeStep step={1}>current state</CodeStep> of this state variable, initially set to the <CodeStep step={3}>initial state</CodeStep> you provided. | ||
| 2. The <CodeStep step={2}>`set` function</CodeStep> that lets you change it to any other value in response to interaction. | ||
| 1. この state 変数の<CodeStep step={1}>現在の値</CodeStep>。最初は、<CodeStep step={3}>初期 state</CodeStep> に設定されます。 | ||
| 1. インタラクションに応じて、state を他の値に変更するための<CodeStep step={2}>`set` 関数</CodeStep>。 |
There was a problem hiding this comment.
Suggested change
| 1. インタラクションに応じて、state を他の値に変更するための<CodeStep step={2}>`set` 関数</CodeStep>。 | |
| 2. インタラクションに応じて、state を他の値に変更するための<CodeStep step={2}>`set` 関数</CodeStep>。 |
表示に差はないのですが原文通りで…
|
|
||
| <Pitfall> | ||
|
|
||
| Calling the `set` function [**does not** change the current state in the already executing code](#ive-updated-the-state-but-logging-gives-me-the-old-value): | ||
| `set` 関数の呼び出しは、[既に実行されているコードの現在の state を変更するわけでは**ありません**](#ive-updated-the-state-but-logging-gives-me-the-old-value)。 |
There was a problem hiding this comment.
Suggested change
| `set` 関数の呼び出しは、[既に実行されているコードの現在の state を変更するわけでは**ありません**](#ive-updated-the-state-but-logging-gives-me-the-old-value)。 | |
| `set` 関数の呼び出しは、[既に実行途中のコードの現在の state を変更するわけでは**ありません**](#ive-updated-the-state-but-logging-gives-me-the-old-value)。 |
「既に実行されているコード」だと現在完了の意味 ("code that has been already executed") にも解釈できるので曖昧さのない表現にしてみました
|
ご確認ありがとうございます！修正しました。 |
smikitky
requested changes
May 31, 2023
| @@ -435,13 +435,13 @@ setForm({ | |||
| }); | |||
| ``` | |||
|
|
|||
| Read [updating objects in state](/learn/updating-objects-in-state) and [updating arrays in state](/learn/updating-arrays-in-state) to learn more. | |||
| 詳しくは、[オブジェクトの state を更新する](/learn/updating-objects-in-state)や、[配列の state を更新する](/learn/updating-arrays-in-state)を参照してください。 | |||
There was a problem hiding this comment.
Suggested change
| 詳しくは、[オブジェクトの state を更新する](/learn/updating-objects-in-state)や、[配列の state を更新する](/learn/updating-arrays-in-state)を参照してください。 | |
| 詳しくは、[state 内のオブジェクトの更新](/learn/updating-objects-in-state)や、[state 内の配列の更新](/learn/updating-arrays-in-state)を参照してください。 |
|
|
||
| You can put objects and arrays into state. In React, state is considered read-only, so **you should *replace* it rather than *mutate* your existing objects**. For example, if you have a `form` object in state, don't mutate it: | ||
| state にオブジェクトや配列をセットすることができます。ただし React では、state は読み取り専用 (read-only) として扱う必要があります。そのため、state を更新する場合は、**既存のオブジェクトを直接*書き換える (mutate)* のではなく、*置き換える (replace)* 必要があります**。例えば、state として `form` オブジェクトを保持している場合、以下のように書き換えを行ってはいけません。 |
There was a problem hiding this comment.
Suggested change
| state にオブジェクトや配列をセットすることができます。ただし React では、state は読み取り専用 (read-only) として扱う必要があります。そのため、state を更新する場合は、**既存のオブジェクトを直接*書き換える (mutate)* のではなく、*置き換える (replace)* 必要があります**。例えば、state として `form` オブジェクトを保持している場合、以下のように書き換えを行ってはいけません。 | |
| state にオブジェクトや配列をセットすることができます。ただし React では、state は読み取り専用として扱う必要があります。そのため、state を更新する場合は、**既存のオブジェクトを直接*書き換える (mutate)* のではなく、*置き換える (replace)* 必要があります**。例えば、state として `form` オブジェクトを保持している場合、以下のように書き換えを行ってはいけません。 |
ほかでも訳出していないので
| * `nextState`: The value that you want the state to be. It can be a value of any type, but there is a special behavior for functions. | ||
| * If you pass a function as `nextState`, it will be treated as an _updater function_. It must be pure, should take the pending state as its only argument, and should return the next state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state. [See an example below.](#updating-state-based-on-the-previous-state) | ||
| * `nextState`: 次に state にセットしたい値です。どんな型の値でも渡すことができますが、関数を渡した場合は特別な振る舞いをします。 | ||
| * `nextState` に関数を渡した場合、その関数は*更新用関数*として扱われます。更新用関数は、純粋で、処理中の state の値を唯一の引数として受け取り、次の state を返す必要があります。React は更新用関数をキューに入れ、コンポーネントを再レンダーします。次のレンダーで、React はキューに入れられたすべての更新用関数を前の state に対して適用し、次の state を導出します。[例を見る](#updating-state-based-on-the-previous-state) |
There was a problem hiding this comment.
Suggested change
| * `nextState` に関数を渡した場合、その関数は*更新用関数*として扱われます。更新用関数は、純粋で、処理中の state の値を唯一の引数として受け取り、次の state を返す必要があります。React は更新用関数をキューに入れ、コンポーネントを再レンダーします。次のレンダーで、React はキューに入れられたすべての更新用関数を前の state に対して適用し、次の state を導出します。[例を見る](#updating-state-based-on-the-previous-state) | |
| * `nextState` に関数を渡した場合、その関数は*更新用関数 (updater function)* として扱われます。更新用関数は、純粋で、処理中の state の値を唯一の引数として受け取り、次の state を返す必要があります。React は更新用関数をキューに入れ、コンポーネントを再レンダーします。次のレンダーで、React はキューに入れられたすべての更新用関数を前の state に対して適用し、次の state を導出します。[例を見る](#updating-state-based-on-the-previous-state) |
| * `initialState`: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render. | ||
| * If you pass a function as `initialState`, it will be treated as an _initializer function_. It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state. [See an example below.](#avoiding-recreating-the-initial-state) | ||
| * `initialState`: state の初期値です。どんな型の値でも渡すことができますが、関数を渡した場合は特別な振る舞いをします。この引数は初回レンダー後は無視されます。 | ||
| * `initialState` に関数を渡した場合、その関数は*初期化関数*として扱われます。初期化関数は、純粋で、引数を取らず、何らかの型の値を返す必要があります。React はコンポーネントを初期化するときに初期化関数を呼び出し、その返り値を初期 state として保存します。[例を見る](#avoiding-recreating-the-initial-state) |
There was a problem hiding this comment.
Suggested change
| * `initialState` に関数を渡した場合、その関数は*初期化関数*として扱われます。初期化関数は、純粋で、引数を取らず、何らかの型の値を返す必要があります。React はコンポーネントを初期化するときに初期化関数を呼び出し、その返り値を初期 state として保存します。[例を見る](#avoiding-recreating-the-initial-state) | |
| * `initialState` に関数を渡した場合、その関数は*初期化関数 (initializer function)* として扱われます。初期化関数は、純粋で、引数を取らず、何らかの型の値を返す必要があります。React はコンポーネントを初期化するときに初期化関数を呼び出し、その返り値を初期 state として保存します。[例を見る](#avoiding-recreating-the-initial-state) |
|
|
||
| In most cases, there is no difference between these two approaches. React always makes sure that for intentional user actions, like clicks, the `age` state variable would be updated before the next click. This means there is no risk of a click handler seeing a "stale" `age` at the beginning of the event handler. | ||
| ほとんどのケースでは、どちらのアプローチでも違いはありません。React は、クリックなどのユーザの意図的なアクションに対して、`age` state 変数の更新が次のクリックの前に発生することを保証しています。すなわち、イベントハンドラの開始時に、クリックハンドラが "古い (stale)" `age` を参照してしまうことはありません。 |
There was a problem hiding this comment.
Suggested change
| ほとんどのケースでは、どちらのアプローチでも違いはありません。React は、クリックなどのユーザの意図的なアクションに対して、`age` state 変数の更新が次のクリックの前に発生することを保証しています。すなわち、イベントハンドラの開始時に、クリックハンドラが "古い (stale)" `age` を参照してしまうことはありません。 | |
| ほとんどのケースでは、どちらのアプローチでも違いはありません。React は、クリックなどのユーザの意図的なアクションに対して、`age` state 変数の更新が次のクリックの前に発生することを保証しています。すなわち、イベントハンドラの開始時に、クリックハンドラが「古い」`age` を参照してしまうことはありません。 |
何かの用語というわけでもないので訳さなくてもいいかなと
|
ありがとうございます。修正いたしました。 ちなみにですが、text-lint は見出しには適用されないのでしょうか？見出し中の半角カッコと全角カッコなどが、text-lintに引っかからず... |
smikitky
approved these changes
May 31, 2023
|
ありがとうございました！ 2 人がチェック、approve してからのマージになりますのでお待ちください。 textlint は後で確認しておきます。blockquote 内をチェックするかの設定はどこかで見た気がしますが、見出しについては記憶にないです… |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
リファレンスのuseStateのページの翻訳です