Translate "useMemo" #643

yuta-ike · 2023-07-26T14:42:10Z

"useMemo" の翻訳です

github-actions · 2023-07-26T14:44:34Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

smikitky

遅くなりましたがこちらの確認をお願いします。コード内のコメントは翻訳しないことにしています。

また、先に言っておくべきだったかもしれないのですが、useCallback とかなり翻訳が被っているところがあるのですが、とりあえず独立してレビューしました。ゆくゆくは統一を行うべきだとは思いますが、ぱっと見た感じ文ごとに「この文はこっちの訳の方が自然だな」みたいな感じです。もし余裕があれば見比べていただいて統一を試みていただければ幸いです（useCallback 側の翻訳に手を入れても構いません）。

smikitky · 2023-07-26T14:44:10Z

src/content/reference/react/useMemo.md


-* `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` を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。


Suggested change

* `calculateValue`: キャッシュしたい値を計算する関数。純関数で、引数を取らず、任意の型の値を返すことができます。React は初回レンダー中にこの関数を呼び出します。次回以降のレンダーでは、直前のレンダーと `dependencies` が変化していなければ、同じ値を再度返します。`dependencies` が変化していれば、`calculateValue` を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。

* `calculateValue`: キャッシュしたい値を計算する関数。純関数で、引数を取らず、任意の型の何らかの値を返す必要があります。React は初回レンダー中にこの関数を呼び出します。次回以降のレンダーでは、直前のレンダーと `dependencies` が変化していなければ、同じ値を再度返します。`dependencies` が変化していれば、`calculateValue` を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。

smikitky · 2023-07-26T14:45:11Z

src/content/reference/react/useMemo.md


-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` を再度呼び出し、その結果をそのまま返します。


Suggested change

次回以降のレンダーでは、依存関係が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、`calculateValue` を再度呼び出し、その結果をそのまま返します。

次回以降のレンダーでは、依存配列が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、`calculateValue` を再度呼び出し、その結果をそのまま返します。

smikitky · 2023-07-27T06:59:44Z

src/content/reference/react/useMemo.md

-* 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) を利用した方が良いかもしれません。


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) を利用した方が良いかもしれません。

smikitky · 2023-07-27T07:02:02Z

src/content/reference/react/useMemo.md


 <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` と呼ばれています。


Suggested change

このように返り値をキャッシュすることは、[*memoization （メモ化）*](https://en.wikipedia.org/wiki/Memoization) として知られています。そのため、このフックは `useMemo` と呼ばれています。

このような返り値のキャッシュは、[*メモ化 (memoization)*](https://en.wikipedia.org/wiki/Memoization) として知られており、それがこのフックが `useMemo` という名前である理由です。

smikitky · 2023-07-27T07:04:10Z

src/content/reference/react/useMemo.md

+1. `() =>` のように、引数を取らず、求めたい計算結果を返す<CodeStep step={1}>計算関数</CodeStep>
+2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、<CodeStep step={2}>依存配列</CodeStep> 


Suggested change

1. `() =>` のように、引数を取らず、求めたい計算結果を返す<CodeStep step={1}>計算関数</CodeStep>

2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、<CodeStep step={2}>依存配列</CodeStep>

1. `() =>` のように、引数を取らず、求めたい計算結果を返す<CodeStep step={1}>計算関数</CodeStep>。

2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、<CodeStep step={2}>依存配列</CodeStep>。

smikitky · 2023-08-02T08:57:47Z

src/content/reference/react/useMemo.md

    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)を参照してください。


Suggested change

純粋性について詳しく知るには、[コンポーネントを純粋に保つ](/learn/keeping-components-pure)を参照してください。

純関数について詳しく知るには、[コンポーネントを純粋に保つ](/learn/keeping-components-pure)を参照してください。

直訳ではないですが…

smikitky · 2023-08-02T09:00:19Z

src/content/reference/react/useMemo.md

@@ -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*/}


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*/}

smikitky · 2023-08-02T09:02:45Z

src/content/reference/react/useMemo.md

@@ -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` の再レンダーもスキップされます。


Suggested change

あるいは、`useMemo` を削除し、`Report` 自体を [`memo`](/reference/react/memo) でラップすることでも解決できます。`item` props が変化しない場合は、`Report` の再レンダーはスキップされ、`Chart` の再レンダーもスキップされます。

あるいは、`useMemo` を削除し、`Report` 自体を [`memo`](/reference/react/memo) でラップすることでも解決できます。`item` が変化しない場合は、`Report` の再レンダーはスキップされ、`Chart` の再レンダーもスキップされます。

smikitky · 2023-08-02T09:08:18Z

src/content/reference/react/useMemo.md

+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 アプリのパフォーマンス問題のほとんどは、エフェクトから発生する更新の連鎖によって引き起こされます。この連鎖によって、コンポーネントを何度も繰り返しレンダーさせてしまうのです。


Suggested change

1. [state を更新する不要なエフェクト](/learn/you-might-not-need-an-effect)を避けてください。React アプリのパフォーマンス問題のほとんどは、エフェクトから発生する更新の連鎖によって引き起こされます。この連鎖によって、コンポーネントを何度も繰り返しレンダーさせてしまうのです。

1. [state を更新する不要なエフェクト](/learn/you-might-not-need-an-effect)を避けてください。React アプリのパフォーマンス問題のほとんどは、エフェクト内での連鎖的な state 更新によってコンポーネントのレンダーが何度も引き起こされるために生じます。

smikitky · 2023-08-02T09:12:52Z

src/content/reference/react/useMemo.md


-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 コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。


Suggested change

この例でも、`List` の実装には**あえて遅延が入っています**。そのため、レンダー中に呼び出している React コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。

この例でも、`List` の実装には**人為的な遅延が入っています**。そのため、レンダー中に呼び出している React コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。

smikitky · 2023-09-13T03:45:28Z

@yuta-ike こちら対応願えますでしょうか。時間が厳しいようでしたら仰っていただければ、このままこちらで引き継ぐことも可能です。

smikitky · 2023-09-20T04:51:03Z

@yuta-ike 主要記事で翻訳未完了がこれのみとなっており、これが完了しないとサイト全体がGoogle検索でひっかからないという残念なことになっています。

そちらで速やかにレビューコメントに対応していただく
suggestion をこちらで適用してこのまま進める
この PR を close してこちらでやり直す

いずれでも構いませんので判断をお願いします。

yuta-ike · 2023-09-20T05:27:50Z

@smikitky 申し訳ございません！完全に失念しておりました。今修正に取り掛かります。ご迷惑おかけしてすみません

src/content/reference/react/useMemo.md

smikitky · 2023-09-25T04:05:10Z

ありがとうございました！
明らかなミスが2箇所あったのでこちらで修正させていただきました。

smikitky · 2023-09-27T03:18:48Z

@yuta-ike まだ memo の方のドキュメントは着手されていませんよね。私の方で引き取って良いでしょうか。

yuta-ike · 2023-09-27T07:04:12Z

@smikitky すみません、お願い致します

smikitky · 2023-10-10T02:14:17Z

@koba04 こちらのレビューをお願いします！

koba04

👍 LGTM!!!

translate "useMemo"

f4a41c0

vercel bot deployed to Preview – ja-react-dev July 26, 2023 14:42 View deployment

smikitky requested changes Aug 2, 2023

View reviewed changes

smikitky mentioned this pull request Aug 8, 2023

New Translation Progress Checklist #452

Open

yuta-ike added 2 commits September 20, 2023 14:41

fix: useMemo page

f194cee

fix: useMemo page

ffdf1d6

vercel bot deployed to Preview – ja-react-dev September 20, 2023 05:45 View deployment

yuta-ike requested a review from smikitky September 20, 2023 06:02

fix: useMemo page translation

01fa380

vercel bot deployed to Preview – ja-react-dev September 20, 2023 06:08 View deployment

smikitky requested changes Sep 25, 2023

View reviewed changes

src/content/reference/react/useMemo.md Outdated Show resolved Hide resolved

src/content/reference/react/useMemo.md Outdated Show resolved Hide resolved

Fix errors

63cc218

smikitky approved these changes Sep 25, 2023

View reviewed changes

vercel bot deployed to Preview – ja-react-dev September 25, 2023 04:06 View deployment

Merge branch 'main' into tr/use-memo

f9a8dcb

vercel bot deployed to Preview – ja-react-dev October 10, 2023 02:14 View deployment

koba04 approved these changes Oct 11, 2023

View reviewed changes

koba04 merged commit c51035b into reactjs:main Oct 11, 2023
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate "useMemo" #643

Translate "useMemo" #643

yuta-ike commented Jul 26, 2023

github-actions bot commented Jul 26, 2023 •

edited

📦 Next.js Bundle Analysis for react-dev

smikitky left a comment

smikitky Jul 26, 2023

smikitky Jul 26, 2023

smikitky Jul 27, 2023

smikitky Jul 27, 2023

smikitky Jul 27, 2023

smikitky Aug 2, 2023

smikitky Aug 2, 2023

smikitky Aug 2, 2023

smikitky Aug 2, 2023

smikitky Aug 2, 2023

smikitky commented Sep 13, 2023

smikitky commented Sep 20, 2023

yuta-ike commented Sep 20, 2023

smikitky commented Sep 25, 2023

smikitky commented Sep 27, 2023

yuta-ike commented Sep 27, 2023

smikitky commented Oct 10, 2023

koba04 left a comment


		* `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` を呼び出してその結果を返し、同時に、後から再利用するためにその結果を保存します。


		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` を再度呼び出し、その結果をそのまま返します。

	次回以降のレンダーでは、依存関係が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、`calculateValue` を再度呼び出し、その結果をそのまま返します。
	次回以降のレンダーでは、依存配列が変化していない場合は、以前のレンダーで保存された値を返します。変化している場合は、`calculateValue` を再度呼び出し、その結果をそのまま返します。

	このように返り値をキャッシュすることは、[memoization （メモ化）](https://en.wikipedia.org/wiki/Memoization) として知られています。そのため、このフックは `useMemo` と呼ばれています。
	このような返り値のキャッシュは、[メモ化 (memoization)](https://en.wikipedia.org/wiki/Memoization) として知られており、それがこのフックが `useMemo` という名前である理由です。

		1. `() =>` のように、引数を取らず、求めたい計算結果を返す<CodeStep step={1}>計算関数</CodeStep>
		2. コンポーネント内にある値のうち、計算関数内で使用されているすべての値を含む、<CodeStep step={2}>依存配列</CodeStep>

	純粋性について詳しく知るには、[コンポーネントを純粋に保つ](/learn/keeping-components-pure)を参照してください。
	純関数について詳しく知るには、[コンポーネントを純粋に保つ](/learn/keeping-components-pure)を参照してください。

	### コンポーネントがレンダーされるたびに、`useMemo` 内の関数が再実行される {/every-time-my-component-renders-the-calculation-in-usememo-re-runs/}
	### コンポーネントがレンダーされるたびに `useMemo` 内の関数が再実行される {/every-time-my-component-renders-the-calculation-in-usememo-re-runs/}

	あるいは、`useMemo` を削除し、`Report` 自体を [`memo`](/reference/react/memo) でラップすることでも解決できます。`item` props が変化しない場合は、`Report` の再レンダーはスキップされ、`Chart` の再レンダーもスキップされます。
	あるいは、`useMemo` を削除し、`Report` 自体を [`memo`](/reference/react/memo) でラップすることでも解決できます。`item` が変化しない場合は、`Report` の再レンダーはスキップされ、`Chart` の再レンダーもスキップされます。

	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 コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。

	この例でも、`List` の実装にはあえて遅延が入っています。そのため、レンダー中に呼び出している React コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。
	この例でも、`List` の実装には人為的な遅延が入っています。そのため、レンダー中に呼び出している React コンポーネントが著しく遅い場合の挙動を確認できます。タブを変更したり、テーマを切り替えたりしてみてください。

Translate "useMemo" #643

Translate "useMemo" #643

Conversation

yuta-ike commented Jul 26, 2023

github-actions bot commented Jul 26, 2023 • edited

Size changes

📦 Next.js Bundle Analysis for react-dev

smikitky left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smikitky commented Sep 13, 2023

smikitky commented Sep 20, 2023

yuta-ike commented Sep 20, 2023

smikitky commented Sep 25, 2023

smikitky commented Sep 27, 2023

yuta-ike commented Sep 27, 2023

smikitky commented Oct 10, 2023

koba04 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 26, 2023 •

edited