Translate "useMemo" #643
Merged
Translate "useMemo" #643
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
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
Aug 2, 2023
There was a problem hiding this comment.
遅くなりましたがこちらの確認をお願いします。コード内のコメントは翻訳しないことにしています。
また、先に言っておくべきだったかもしれないのですが、useCallback とかなり翻訳が被っているところがあるのですが、とりあえず独立してレビューしました。ゆくゆくは統一を行うべきだとは思いますが、ぱっと見た感じ文ごとに「この文はこっちの訳の方が自然だな」みたいな感じです。もし余裕があれば見比べていただいて統一を試みていただければ幸いです（useCallback 側の翻訳に手を入れても構いません）。
|
|
||
| * `calculateValue`: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On next renders, React will return the same value again if the `dependencies` have not changed since the last render. Otherwise, it will call `calculateValue`, return its result, and store it so it can be reused later. | ||
| * `calculateValue`: キャッシュしたい値を計算する関数。純関数で、引数を取らず、任意の型の値を返すことができます。React は初回レンダー中にこの関数を呼び出します。次回以降のレンダーでは、直前のレンダーと `dependencies` が変化していなければ、同じ値を再度返します。`dependencies` が変化していれば、`calculateValue` を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。 |
There was a problem hiding this comment.
Suggested change
| * `calculateValue`: キャッシュしたい値を計算する関数。純関数で、引数を取らず、任意の型の値を返すことができます。React は初回レンダー中にこの関数を呼び出します。次回以降のレンダーでは、直前のレンダーと `dependencies` が変化していなければ、同じ値を再度返します。`dependencies` が変化していれば、`calculateValue` を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。 | |
| * `calculateValue`: キャッシュしたい値を計算する関数。純関数で、引数を取らず、任意の型の何らかの値を返す必要があります。React は初回レンダー中にこの関数を呼び出します。次回以降のレンダーでは、直前のレンダーと `dependencies` が変化していなければ、同じ値を再度返します。`dependencies` が変化していれば、`calculateValue` を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。 |
|
|
||
| During next renders, it will either return an already stored value from the last render (if the dependencies haven't changed), or call `calculateValue` again, and return the result that `calculateValue` has returned. | ||
| 次回以降のレンダーでは、依存関係が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、`calculateValue` を再度呼び出し、その結果をそのまま返します。 |
There was a problem hiding this comment.
Suggested change
| 次回以降のレンダーでは、依存関係が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、`calculateValue` を再度呼び出し、その結果をそのまま返します。 | |
| 次回以降のレンダーでは、依存配列が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、`calculateValue` を再度呼び出し、その結果をそのまま返します。 |
| * React **will not throw away the cached value unless there is a specific reason to do that.** For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should be fine if you rely on `useMemo` solely as a performance optimization. Otherwise, a [state variable](/reference/react/useState#avoiding-recreating-the-initial-state) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate. | ||
| * `useMemo` はフックなので、カスタムフックか**コンポーネントのトップレベル**でしか呼び出すことができません。ループや条件分岐の中で呼び出すことはできません。もしループや条件分岐の中で呼び出したい場合は、新しいコンポーネントに切り出して、その中に state を移動させてください。 | ||
| * Strict Mode では、[純粋でない関数を見つけやすくするために](#my-initializer-or-updater-function-runs-twice)、**計算関数 (`calculateValue`) が 2 度呼び出されます**。これは、開発時のみの挙動で、本番では影響は与えません。もし、計算関数が純粋であれば（純粋であるべきです）、2 回呼び出されてもコードに影響はありません。2 回の呼び出しのうち、一方の呼び出し結果は無視されます。 | ||
| * 特別な理由がない限り、キャッシュ値が破棄されることはありません。破棄されるケースは、例えば、開発時にコンポーネントのファイルを編集すると、キャッシュが破棄されます。また、開発時および本番時に、初回マウント中にコンポーネントがサスペンドすると、キャッシュは破棄されます。将来的には、キャッシュが破棄されることを前提とした機能が React に追加される可能性があります。例えば、将来的に仮想リストが組み込みでサポートされた場合、仮想テーブルのビューポートからスクロールアウトした項目は、キャッシュを破棄するようになるかもしれません。このような挙動は、パフォーマンス最適化のみを目的として `useMemo` を使っている場合には問題ありません。しかし、他の目的で利用している場合は、[state 変数](/reference/react/useState#avoiding-recreating-the-initial-state) や [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) を利用した方が良いかもしれません。 |
There was a problem hiding this comment.
Suggested change
| * 特別な理由がない限り、キャッシュ値が破棄されることはありません。破棄されるケースは、例えば、開発時にコンポーネントのファイルを編集すると、キャッシュが破棄されます。また、開発時および本番時に、初回マウント中にコンポーネントがサスペンドすると、キャッシュは破棄されます。将来的には、キャッシュが破棄されることを前提とした機能が React に追加される可能性があります。例えば、将来的に仮想リストが組み込みでサポートされた場合、仮想テーブルのビューポートからスクロールアウトした項目は、キャッシュを破棄するようになるかもしれません。このような挙動は、パフォーマンス最適化のみを目的として `useMemo` を使っている場合には問題ありません。しかし、他の目的で利用している場合は、[state 変数](/reference/react/useState#avoiding-recreating-the-initial-state) や [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) を利用した方が良いかもしれません。 | |
| * **特別な理由がない限り、キャッシュされた値が破棄されることはありません**。キャッシュが破棄されるケースの例としては、開発時にコンポーネントのファイルを編集した場合があります。また、開発時および本番時に、初回マウント中にコンポーネントがサスペンドすると、キャッシュは破棄されます。将来的には、キャッシュが破棄されることを前提とした機能が React に追加される可能性があります。例えば、将来的に仮想リストが組み込みでサポートされた場合、仮想テーブルのビューポートからスクロールアウトした項目は、キャッシュを破棄するようになるかもしれません。このような挙動は、パフォーマンス最適化のみを目的として `useMemo` を使っている場合には問題ありません。しかし、他の目的で利用している場合は、[state 変数](/reference/react/useState#avoiding-recreating-the-initial-state) や [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) を利用した方が良いかもしれません。 |
|
|
||
| <Note> | ||
|
|
||
| Caching return values like this is also known as [*memoization*,](https://en.wikipedia.org/wiki/Memoization) which is why this Hook is called `useMemo`. | ||
| このように返り値をキャッシュすることは、[*memoization （メモ化）*](https://en.wikipedia.org/wiki/Memoization) として知られています。そのため、このフックは `useMemo` と呼ばれています。 |
There was a problem hiding this comment.
Suggested change
| このように返り値をキャッシュすることは、[*memoization （メモ化）*](https://en.wikipedia.org/wiki/Memoization) として知られています。そのため、このフックは `useMemo` と呼ばれています。 | |
| このような返り値のキャッシュは、[*メモ化 (memoization)*](https://en.wikipedia.org/wiki/Memoization) として知られており、それがこのフックが `useMemo` という名前である理由です。 |
Comment on lines
82
to
83
| 1. `() =>` のように、引数を取らず、求めたい計算結果を返す<CodeStep step={1}>計算関数</CodeStep> | ||
| 2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、<CodeStep step={2}>依存配列</CodeStep> |
There was a problem hiding this comment.
Suggested change
| 1. `() =>` のように、引数を取らず、求めたい計算結果を返す<CodeStep step={1}>計算関数</CodeStep> | |
| 2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、<CodeStep step={2}>依存配列</CodeStep> | |
| 1. `() =>` のように、引数を取らず、求めたい計算結果を返す<CodeStep step={1}>計算関数</CodeStep>。 | |
| 2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、<CodeStep step={2}>依存配列</CodeStep>。 |
| filtered.push({ id: 'last', text: 'Go for a walk!' }); | ||
| return filtered; | ||
| }, [todos, tab]); | ||
| ``` | ||
|
|
||
| Read [keeping components pure](/learn/keeping-components-pure) to learn more about purity. | ||
| 純粋性について詳しく知るには、[コンポーネントを純粋に保つ](/learn/keeping-components-pure)を参照してください。 |
There was a problem hiding this comment.
Suggested change
| 純粋性について詳しく知るには、[コンポーネントを純粋に保つ](/learn/keeping-components-pure)を参照してください。 | |
| 純関数について詳しく知るには、[コンポーネントを純粋に保つ](/learn/keeping-components-pure)を参照してください。 |
直訳ではないですが…
| @@ -1244,57 +1244,57 @@ To avoid this mistake, write a `return` statement explicitly: | |||
|
|
|||
| --- | |||
|
|
|||
| ### Every time my component renders, the calculation in `useMemo` re-runs {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} | |||
| ### コンポーネントがレンダーされるたびに、`useMemo` 内の関数が再実行される {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} | |||
There was a problem hiding this comment.
Suggested change
| ### コンポーネントがレンダーされるたびに、`useMemo` 内の関数が再実行される {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} | |
| ### コンポーネントがレンダーされるたびに `useMemo` 内の関数が再実行される {/*every-time-my-component-renders-the-calculation-in-usememo-re-runs*/} |
| @@ -1331,7 +1331,7 @@ function Report({ item }) { | |||
| } | |||
| ``` | |||
|
|
|||
| Alternatively, you could remove `useMemo` and instead wrap `Report` itself in [`memo`.](/reference/react/memo) If the `item` prop does not change, `Report` will skip re-rendering, so `Chart` will skip re-rendering too: | |||
| あるいは、`useMemo` を削除し、`Report` 自体を [`memo`](/reference/react/memo) でラップすることでも解決できます。`item` props が変化しない場合は、`Report` の再レンダーはスキップされ、`Chart` の再レンダーもスキップされます。 | |||
There was a problem hiding this comment.
Suggested change
| あるいは、`useMemo` を削除し、`Report` 自体を [`memo`](/reference/react/memo) でラップすることでも解決できます。`item` props が変化しない場合は、`Report` の再レンダーはスキップされ、`Chart` の再レンダーもスキップされます。 | |
| あるいは、`useMemo` を削除し、`Report` 自体を [`memo`](/reference/react/memo) でラップすることでも解決できます。`item` が変化しない場合は、`Report` の再レンダーはスキップされ、`Chart` の再レンダーもスキップされます。 |
| 1. あるコンポーネントが他のコンポーネントを視覚的にラップする場合は、[JSX を子要素として受け取るようにしてください。](/learn/passing-props-to-a-component#passing-jsx-as-children)このようにすることで、ラッパーコンポーネントが自身の state を更新したときでも、子要素を再レンダーする必要がないと React が判断できます。 | ||
| 1. ローカルな state を利用し、必要以上に [state をリフトアップする](/learn/sharing-state-between-components)ことは避けてください。例えば、フォームや、「アイテムがホバーされているかどうか」のような一時的な state は、ツリーのトップレベルやグローバルな state ライブラリに保持しないようにしてください。 | ||
| 1. レンダーロジックを[純粋に保つ](/learn/keeping-components-pure)ようにしてください。コンポーネントの再レンダーによって、何か問題が起きたり、目に見えるビジュアルの問題が引き起こされたりする場合、それはコンポーネントのバグです！ メモ化をするのではなく、バグを修正してください。 | ||
| 1. [state を更新する不要なエフェクト](/learn/you-might-not-need-an-effect)を避けてください。React アプリのパフォーマンス問題のほとんどは、エフェクトから発生する更新の連鎖によって引き起こされます。この連鎖によって、コンポーネントを何度も繰り返しレンダーさせてしまうのです。 |
There was a problem hiding this comment.
Suggested change
| 1. [state を更新する不要なエフェクト](/learn/you-might-not-need-an-effect)を避けてください。React アプリのパフォーマンス問題のほとんどは、エフェクトから発生する更新の連鎖によって引き起こされます。この連鎖によって、コンポーネントを何度も繰り返しレンダーさせてしまうのです。 | |
| 1. [state を更新する不要なエフェクト](/learn/you-might-not-need-an-effect)を避けてください。React アプリのパフォーマンス問題のほとんどは、エフェクト内での連鎖的な state 更新によってコンポーネントのレンダーが何度も引き起こされるために生じます。 |
|
|
||
| In this example, the `List` implementation is also **artificially slowed down** so that you can see what happens when some React component you're rendering is genuinely slow. Try switching the tabs and toggling the theme. | ||
| この例でも、`List` の実装には**あえて遅延が入っています**。そのため、レンダー中に呼び出している React コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。 |
There was a problem hiding this comment.
Suggested change
| この例でも、`List` の実装には**あえて遅延が入っています**。そのため、レンダー中に呼び出している React コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。 | |
| この例でも、`List` の実装には**人為的な遅延が入っています**。そのため、レンダー中に呼び出している React コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。 |
|
@yuta-ike こちら対応願えますでしょうか。時間が厳しいようでしたら仰っていただければ、このままこちらで引き継ぐことも可能です。 |
|
@yuta-ike 主要記事で翻訳未完了がこれのみとなっており、これが完了しないとサイト全体がGoogle検索でひっかからないという残念なことになっています。
いずれでも構いませんので判断をお願いします。 |
|
@smikitky 申し訳ございません！完全に失念しておりました。今修正に取り掛かります。ご迷惑おかけしてすみません |
smikitky
requested changes
Sep 25, 2023
smikitky
approved these changes
Sep 25, 2023
|
ありがとうございました！ |
|
@yuta-ike まだ |
|
@smikitky すみません、お願い致します |
|
@koba04 こちらのレビューをお願いします！ |
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.
"useMemo" の翻訳です