From a0510f9a05f6f021acafa2e0b29b7ecea76ee7b5 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Fri, 29 Sep 2023 14:25:33 +0900 Subject: [PATCH 01/40] Translate "cache" --- src/content/reference/react/cache.md | 146 +++++++++++++-------------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 72fa4bd36..2a7acd081 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -4,14 +4,14 @@ canary: true --- -* `cache` is only for use with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). See [frameworks](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) that support React Server Components. +* `cache` は、[React サーバコンポーネント](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) と一緒に使用するためのものです。React サーバコンポーネントをサポートする [フレームワーク](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks) をご覧ください。 -* `cache` is only available in React’s [Canary](/community/versioning-policy#canary-channel) and [experimental](/community/versioning-policy#experimental-channel) channels. Please ensure you understand the limitations before using `cache` in production. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +* `cache` は、React の [Canary](https://react.dev/community/versioning-policy#canary-channel) と [experimental](https://react.dev/community/versioning-policy#experimental-channel) チャンネルでのみ利用可能です。本番環境で `cache` を使用する前に、制限事項を理解してください。[React のリリースチャンネルについてはこちら](/community/versioning-policy#all-release-channels) をご覧ください。 -`cache` lets you cache the result of a data fetch or computation. +`cache` は、fetch や計算した結果をキャッシュすることができます。 ```js const cachedFn = cache(fn); @@ -23,11 +23,11 @@ const cachedFn = cache(fn); --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `cache(fn)` {/*cache*/} -Call `cache` outside of any components to create a version of the function with caching. +キャッシュを持つバージョンの関数を作成するために、コンポーネントの外部で `cache` を呼び出します。 ```js {4,7} import {cache} from 'react'; @@ -41,42 +41,42 @@ function Chart({data}) { } ``` -When `getMetrics` is first called with `data`, `getMetrics` will call `calculateMetrics(data)` and store the result in cache. If `getMetrics` is called again with the same `data`, it will return the cached result instead of calling `calculateMetrics(data)` again. +`getMetrics` が初めて `data` とともに呼び出されると、`getMetrics` は `calculateMetrics(data)` を呼び出し、その結果をキャッシュに保存します。もし `getMetrics` が同じ `data` で再度呼び出されると、`calculateMetrics(data)` を再度呼び出す代わりにキャッシュされた結果を返します。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -- `fn`: The function you want to cache results for. `fn` can take any arguments and return any value. +- `fn`: 結果をキャッシュしたい関数です。`fn` は任意の引数を取り、任意の値を返すことができます。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -`cache` returns a cached version of `fn` with the same type signature. It does not call `fn` in the process. +`cache` は、同じ型シグネチャを持つ `fn` のキャッシュされているバージョンを返します。その処理の中で `fn` は呼び出されません。 -When calling `cachedFn` with given arguments, it first checks if a cached result exists in the cache. If a cached result exists, it returns the result. If not, it calls `fn` with the arguments, stores the result in the cache, and returns the result. The only time `fn` is called is when there is a cache miss. +与えられた引数で `cachedFn` を呼び出すと、まずキャッシュにキャッシュされた結果が存在するかどうかを確認します。キャッシュされた結果が存在する場合、その結果を返します。存在しない場合、引数で `fn` を呼び出し、結果をキャッシュに保存し、その結果を返します。`fn` が呼び出されるのはキャッシュミスが発生したときだけです。 -The optimization of caching return values based on inputs is known as [_memoization_](https://en.wikipedia.org/wiki/Memoization). We refer to the function returned from `cache` as a memoized function. +入力に基づいて戻り値をキャッシュする最適化は、[_メモ化_](https://en.wikipedia.org/wiki/Memoization) として知られています。`cache` から返される関数をメモ化された関数と呼びます。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} [//]: # 'TODO: add links to Server/Client Component reference once https://github.com/reactjs/react.dev/pull/6177 is merged' -- React will invalidate the cache for all memoized functions for each server request. -- Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache. -- `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments. -- `cache` is for use in [Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only. +- React は、各サーバーリクエストごとにすべてのメモ化された関数のキャッシュを無効化します。 +- `cache` を呼び出すたびに新しい関数が作成されます。これは、同じ関数で `cache` を複数回呼び出すと、同じキャッシュを共有しない異なるメモ化された関数が返されることを意味します。 +- `cachedFn` はエラーもキャッシュします。特定の引数で `fn` がエラーをスローすると、それがキャッシュされ、同じ引数で `cachedFn` が呼び出されると同じエラーが再スローされます。 +- `cache` は、[サーバコンポーネント](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) でのみ使用できます。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Cache an expensive computation {/*cache-expensive-computation*/} +### 高コストな計算をキャッシュする {/*cache-expensive-computation*/} -Use `cache` to skip duplicate work. +重複する処理をスキップするために `cache` を使用します。 ```js [[1, 7, "getUserMetrics(user)"],[2, 13, "getUserMetrics(user)"]] import {cache} from 'react'; @@ -98,17 +98,17 @@ function TeamReport({users}) { } ``` -If the same `user` object is rendered in both `Profile` and `TeamReport`, the two components can share work and only call `calculateUserMetrics` once for that `user`. +同じ `user` オブジェクトが `Profile` と `TeamReport` の両方でレンダーされる場合、2つのコンポーネントは処理を共有でき、その `user` に対して `calculateUserMetrics` を一度だけ呼び出します。 -Assume `Profile` is rendered first. It will call `getUserMetrics`, and check if there is a cached result. Since it is the first time `getUserMetrics` is called with that `user`, there will be a cache miss. `getUserMetrics` will then call `calculateUserMetrics` with that `user` and write the result to cache. +最初に `Profile` がレンダーされると仮定します。`getUserMetrics` が呼び出され、キャッシュされた結果があるかどうかを確認します。その `user` で `getUserMetrics` を呼び出すのは初めてなので、キャッシュミスが発生します。`getUserMetrics` はその後、その `user` で `calculateUserMetrics` を呼び出し、結果をキャッシュに書き込みます。 -When `TeamReport` renders its list of `users` and reaches the same `user` object, it will call `getUserMetrics` and read the result from cache. +`TeamReport` が `users` のリストをレンダーし、同じ `user` オブジェクトに到達すると、`getUserMetrics` を呼び出し、結果をキャッシュから読み取ります。 -##### Calling different memoized functions will read from different caches. {/*pitfall-different-memoized-functions*/} +##### 異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取られます。 {/*pitfall-different-memoized-functions*/} -To access the same cache, components must call the same memoized function. +同じキャッシュにアクセスするためには、コンポーネントは同じメモ化された関数を呼び出さなければなりません。 ```js [[1, 7, "getWeekReport"], [1, 7, "cache(calculateWeekReport)"], [1, 8, "getWeekReport"]] // Temperature.js @@ -137,11 +137,11 @@ export function Precipitation({cityData}) { } ``` -In the above example, `Precipitation` and `Temperature` each call `cache` to create a new memoized function with their own cache look-up. If both components render for the same `cityData`, they will do duplicate work to call `calculateWeekReport`. +上記の例では、`Precipitation` と `Temperature` はそれぞれ `cache` を呼び出して、それぞれ独自のキャッシュの索引を持つ新しいメモ化された関数を作成します。両方のコンポーネントが同じ `cityData` でレンダーする場合、それぞれが `calculateWeekReport` を呼び出すため、重複した処理をすることになります。 -In addition, `Temperature` creates a new memoized function each time the component is rendered which doesn't allow for any cache sharing. +さらに、`Temperature` はコンポーネントがレンダーされるたびに 新しいメモ化された関数 を作成し、キャッシュの共有を許可しません。 -To maximize cache hits and reduce work, the two components should call the same memoized function to access the same cache. Instead, define the memoized function in a dedicated module that can be [`import`-ed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) across components. +キャッシュヒットを最大化し、処理を減らすためには、2 つのコンポーネントは同じメモ化された関数を呼び出して同じキャッシュにアクセスするべきです。寧ろ、専用のモジュールでメモ化された関数を定義し、コンポーネント間で [`インポート`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) します。 ```js [[3, 5, "export default cache(calculateWeekReport)"]] // getWeekReport.js @@ -170,12 +170,12 @@ export default function Precipitation({cityData}) { // ... } ``` -Here, both components call the same memoized function exported from `./getWeekReport.js` to read and write to the same cache. +ここでは、両方のコンポーネントが `./getWeekReport.js` からエクスポートされた 同じメモ化された関数 を呼び出して、同じキャッシュを読み書きします。 -### Share a snapshot of data {/*take-and-share-snapshot-of-data*/} +### データのスナップショットを共有する {/*take-and-share-snapshot-of-data*/} -To share a snapshot of data between components, call `cache` with a data-fetching function like `fetch`. When multiple components make the same data fetch, only one request is made and the data returned is cached and shared across components. All components refer to the same snapshot of data across the server render. +コンポーネント間でデータのスナップショットを共有するためには、`fetch` のようなデータ取得関数とともに `cache` を呼び出します。複数のコンポーネントが同じデータを取得すると、リクエストは1回だけ行われ、返されたデータはキャッシュされ、コンポーネント間で共有されます。すべてのコンポーネントはサーバーレンダー全体で同じデータのスナップショットを参照します。 ```js [[1, 4, "city"], [1, 5, "fetchTemperature(city)"], [2, 4, "getTemperature"], [2, 9, "getTemperature"], [1, 9, "city"], [2, 14, "getTemperature"], [1, 14, "city"]] import {cache} from 'react'; @@ -196,17 +196,17 @@ async function MinimalWeatherCard({city}) { } ``` -If `AnimatedWeatherCard` and `MinimalWeatherCard` both render for the same city, they will receive the same snapshot of data from the memoized function. +`AnimatedWeatherCard` と `MinimalWeatherCard` の両方が同じ city でレンダーする場合、メモ化された関数 から同じデータのスナップショットを受け取ります。 -If `AnimatedWeatherCard` and `MinimalWeatherCard` supply different city arguments to `getTemperature`, then `fetchTemperature` will be called twice and each call site will receive different data. +`AnimatedWeatherCard` と `MinimalWeatherCard` が異なる city 引数を `getTemperature` に渡した場合、`fetchTemperature` は2回呼び出され、呼び出したそれぞれで異なるデータを受け取ります。 -The city acts as a cache key. +city はキャッシュキーとして機能します。 [//]: # 'TODO: add links to Server Components when merged.' -Asynchronous rendering is only supported for Server Components. +非同期レンダー はサーバコンポーネントでのみサポートされています。 ```js [[3, 1, "async"], [3, 2, "await"]] async function AnimatedWeatherCard({city}) { @@ -219,9 +219,9 @@ async function AnimatedWeatherCard({city}) { -### Preload data {/*preload-data*/} +### データをプリロードする {/*preload-data*/} -By caching a long-running data fetch, you can kick off asynchronous work prior to rendering the component. +長時間実行されるデータ取得をキャッシュすることで、コンポーネントのレンダー前に非同期処理を開始することができます。 ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]] const getUser = cache(async (id) => { @@ -250,17 +250,17 @@ function Page({id}) { } ``` -When rendering `Page`, the component calls `getUser` but note that it doesn't use the returned data. This early `getUser` call kicks off the asynchronous database query that occurs while `Page` is doing other computational work and rendering children. +`Page` をレンダーするとき、コンポーネントは `getUser` を呼び出しますが、返されたデータは使用しません。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行い、子をレンダーしている間に非同期のデータベースクエリを開始します。 -When rendering `Profile`, we call `getUser` again. If the initial `getUser` call has already returned and cached the user data, when when `Profile` asks and waits for this data, it can simply read from the cache without requiring another remote procedure call. If the initial data request hasn't been completed, preloading data in this pattern reduces delay in data-fetching. +`Profile` をレンダーするとき、再び `getUser` を呼び出します。最初の `getUser` 呼び出しがすでにユーザーデータを返し、キャッシュしている場合、`Profile` が このデータを要求し、待機するとき、別のリモートプロシージャ呼び出しを必要とせずにキャッシュからシンプルに読み取ることができます。もし 最初のデータリクエスト がまだ完了していない場合、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。 -#### Caching asynchronous work {/*caching-asynchronous-work*/} +#### 非同期処理のキャッシュ {/*caching-asynchronous-work*/} -When evaluating an [asynchronous function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), you will receive a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for that work. The promise holds the state of that work (_pending_, _fulfilled_, _failed_) and its eventual settled result. +[非同期関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) を評価するとき、その処理の [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) を受け取ります。Promise はその処理の状態（_pending_、_fulfilled_、_failed_）とその最終的な結果を保持します。 -In this example, the asynchronous function `fetchData` returns a promise that is awaiting the `fetch`. +この例では、非同期関数 `fetchData` は `fetch` を待っている Promise を返します。 ```js [[1, 1, "fetchData()"], [2, 8, "getData()"], [3, 10, "getData()"]] async function fetchData() { @@ -277,18 +277,18 @@ async function MyComponent() { } ``` -In calling `getData` the first time, the promise returned from `fetchData` is cached. Subsequent look-ups will then return the same promise. +最初の `getData` 呼び出しでは、`fetchData` から返された Promise がキャッシュされます。その後のキャッシュ探索では、同じ Promise が返されます。 -Notice that the first `getData` call does not `await` whereas the second does. [`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) is a JavaScript operator that will wait and return the settled result of the promise. The first `getData` call simply initiates the `fetch` to cache the promise for the second `getData` to look-up. +最初の `getData` 呼び出しは `await` せず、2回目 は `await` します。[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) は JavaScript の演算子で、Promise の結果を待って返します。最初の `getData` 呼び出しは単に `fetch` を開始して Promise をキャッシュし、2回目の `getData` で探索します。 -If by the second call the promise is still _pending_, then `await` will pause for the result. The optimization is that while we wait on the `fetch`, React can continue with computational work, thus reducing the wait time for the second call. +2回目の呼び出し までに Promise がまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算作業を続けることができるため、2回目の呼び出し の待ち時間を短縮することが最適化になります。 -If the promise is already settled, either to an error or the _fulfilled_ result, `await` will return that value immediately. In both outcomes, there is a performance benefit. +Promise がすでに解決している場合、エラーまたは _fulfilled_ の結果になると、`await` はその値をすぐに返します。どちらの結果でも、パフォーマンスの利点があります。 -##### Calling a memoized function outside of a component will not use the cache. {/*pitfall-memoized-call-outside-component*/} +##### コンポーネントの外部でメモ化された関数を呼び出すと、キャッシュは使用されません。{/*pitfall-memoized-call-outside-component*/} ```jsx [[1, 3, "getUser"]] import {cache} from 'react'; @@ -307,21 +307,21 @@ async function DemoProfile() { } ``` -React only provides cache access to the memoized function in a component. When calling `getUser` outside of a component, it will still evaluate the function but not read or update the cache. +React は、コンポーネント内のメモ化された関数に対してのみキャッシュアクセスを提供します。コンポーネントの外部で `getUser` を呼び出すと、関数は評価されますが、キャッシュは読み取られず、更新もされません。 -This is because cache access is provided through a [context](/learn/passing-data-deeply-with-context) which is only accessibile from a component. +これは、キャッシュアクセスがコンポーネントからのみアクセス可能な [コンテクスト](/learn/passing-data-deeply-with-context) を通じて提供されるためです。 -#### When should I use `cache`, [`memo`](/reference/react/memo), or [`useMemo`](/reference/react/useMemo)? {/*cache-memo-usememo*/} +#### `cache`、[`memo`](/reference/react/memo)、[`useMemo`](/reference/react/useMemo) のどれをいつ使うべきですか？{/*cache-memo-usememo*/} -All mentioned APIs offer memoization but the difference is what they're intended to memoize, who can access the cache, and when their cache is invalidated. +上記のすべての API はメモ化を提供しますが、それらが何をメモ化することを意図しているか、誰がキャッシュにアクセスできるか、そしてキャッシュが無効になるタイミングはいつか、という点で違いがあります。 #### `useMemo` {/*deep-dive-use-memo*/} -In general, you should use [`useMemo`](/reference/react/useMemo) for caching a expensive computation in a Client Component across renders. As an example, to memoize a transformation of data within a component. +一般的に、[`useMemo`](/reference/react/useMemo) は、レンダー間でクライアントコンポーネント内の高コストな計算をキャッシュするために使用すべきです。例えば、コンポーネント内のデータの変換をメモ化するために使用します。 ```jsx {4} 'use client'; @@ -341,13 +341,13 @@ function App() { ); } ``` -In this example, `App` renders two `WeatherReport`s with the same record. Even though both components do the same work, they cannot share work. `useMemo`'s cache is only local to the component. +この例では、`App` は同じレコードで 2 つの `WeatherReport` をレンダーします。両方のコンポーネントが同じ処理を行っていても、処理を共有することはできません。`useMemo` のキャッシュはコンポーネントのローカルにしか存在しません。 -However, `useMemo` does ensure that if `App` re-renders and the `record` object doesn't change, each component instance would skip work and use the memoized value of `avgTemp`. `useMemo` will only cache the last computation of `avgTemp` with the given dependencies. +しかし、`useMemo` は `App` が再レンダーされ、`record` オブジェクトが変わらない場合、各コンポーネントインスタンスは処理をスキップし、`avgTemp` のメモ化された値を使用します。`useMemo` は、与えられた依存関係で `avgTemp` の最後の計算のみをキャッシュします。 #### `cache` {/*deep-dive-cache*/} -In general, you should use `cache` in Server Components to memoize work that can be shared across components. +一般的に、`cache` は、コンポーネント間で共有できる処理をメモ化するために、サーバコンポーネントで使用すべきです。 ```js [[1, 12, ""], [3, 13, ""], [2, 1, "cache(fetchReport)"]] const cachedFetchReport = cache(fetchReport); @@ -367,13 +367,13 @@ function App() { ); } ``` -Re-writing the previous example to use `cache`, in this case the second instance of `WeatherReport` will be able to skip duplicate work and read from the same cache as the first `WeatherReport`. Another difference from the previous example is that `cache` is also recommended for memoizing data fetches, unlike `useMemo` which should only be used for computations. +前の例を `cache` を使用して書き直すと、この場合 2 番目の `WeatherReport` インスタンス は重複する処理をスキップし、最初の `WeatherReport` と同じキャッシュから読み取ることができます。前の例とのもう一つの違いは、`cache` は データフェッチのメモ化 にも推奨されていることで、これは `useMemo` が計算のみに使用すべきであるとは対照的です。 -At this time, `cache` should only be used in Server Components and the cache will be invalidated across server requests. +現時点では、`cache` はサーバコンポーネントでのみ使用すべきで、キャッシュはサーバーリクエスト間で無効化されます。 #### `memo` {/*deep-dive-memo*/} -You should use [`memo`](reference/react/memo) to prevent a component re-rendering if its props are unchanged. +[`memo`](reference/react/memo) は、props が変わらない場合にコンポーネントの再レンダーを防ぐために使用すべきです。 ```js 'use client'; @@ -396,27 +396,27 @@ function App() { } ``` -In this example, both `MemoWeatherReport` components will call `calculateAvg` when first rendered. However, if `App` re-renders, with no changes to `record`, none of the props have changed and `MemoWeatherReport` will not re-render. +この例では、両方の `MemoWeatherReport` コンポーネントは最初にレンダーされたときに `calculateAvg` を呼び出します。しかし、`App` が再レンダーされ、`record` に変更がない場合、props は変わらず、`MemoWeatherReport` は再レンダーされません。 -Compared to `useMemo`, `memo` memoizes the component render based on props vs. specific computations. Similar to `useMemo`, the memoized component only caches the last render with the last prop values. Once the props change, the cache invalidates and the component re-renders. +`useMemo` と比較して、`memo` は props に基づいてコンポーネントのレンダーをメモ化します。これは特定の計算に対してではなく、メモ化されたコンポーネントは最後のレンダーと最後の prop 値のみをキャッシュします。一度 props が変更されると、キャッシュは無効化され、コンポーネントは再レンダーされます。 --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### My memoized function still runs even though I've called it with the same arguments {/*memoized-function-still-runs*/} +### メモ化された関数が、同じ引数で呼び出されても実行される {/*memoized-function-still-runs*/} -See prior mentioned pitfalls -* [Calling different memoized functions will read from different caches.](#pitfall-different-memoized-functions) -* [Calling a memoized function outside of a component will not use the cache.](#pitfall-memoized-call-outside-component) +以前に述べた落とし穴を参照してください。 +* [異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取ります。](#pitfall-different-memoized-functions) +* [コンポーネントの外部でメモ化関数を呼び出すと、キャッシュは使用されません。](#pitfall-memoized-call-outside-component) -If none of the above apply, it may be a problem with how React checks if something exists in cache. +上記のいずれも該当しない場合、Reactがキャッシュに存在するかどうかをチェックする方法に問題があるかもしれません。 -If your arguments are not [primatives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (ex. objects, functions, arrays), ensure you're passing the same object reference. +引数が[プリミティブ](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)でない場合（例：オブジェクト、関数、配列）、同じオブジェクト参照を渡していることを確認してください。 -When calling a memoized function, React will look up the input arguments to see if a result is already cached. React will use shallow equality of the arguments to determine if there is a cache hit. +メモ化された関数を呼び出すとき、Reactは入力引数を調べて結果がすでにキャッシュされているかどうかを確認します。Reactは引数の浅い等価性を使用してキャッシュヒットがあるかどうかを判断します。 ```js import {cache} from 'react'; @@ -441,9 +441,9 @@ function App() { } ``` -In this case the two `MapMarker`s look like they're doing the same work and calling `calculateNorm` with the same value of `{x: 10, y: 10, z:10}`. Even though the objects contain the same values, they are not the same object reference as each component creates its own `props` object. +この場合、2つの `MapMarker` は同じ処理を行い、`calculateNorm` を `{x: 10, y: 10, z:10}` の同じ値で呼び出しているように見えます。オブジェクトが同じ値を含んでいても、それぞれのコンポーネントが自身の `props` オブジェクトを作成するため、同じオブジェクト参照ではありません。 -React will call [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) on the input to verify if there is a cache hit. +Reactは入力に対して [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を呼び出し、キャッシュヒットがあるかどうかを確認します。 ```js {3,9} import {cache} from 'react'; @@ -468,9 +468,9 @@ function App() { } ``` -One way to address this could be to pass the vector dimensions to `calculateNorm`. This works because the dimensions themselves are primitives. +これを解決する一つの方法は、ベクトルの次元を `calculateNorm` に渡すことです。これは次元自体がプリミティブであるため、機能します。 -Another solution may be to pass the vector object itself as a prop to the component. We'll need to pass the same object to both component instances. +別の解決策は、ベクトルオブジェクト自体をコンポーネントのpropsとして渡すことかもしれません。同じオブジェクトを両方のコンポーネントインスタンスに渡す必要があります。 ```js {3,9,14} import {cache} from 'react'; From 48f528afd16b622d5b982577ea2aa00c3d96425e Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:33:09 +0900 Subject: [PATCH 02/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 2a7acd081..308e63c63 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -4,7 +4,7 @@ canary: true --- -* `cache` は、[React サーバコンポーネント](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) と一緒に使用するためのものです。React サーバコンポーネントをサポートする [フレームワーク](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks) をご覧ください。 +* `cache` は、[React サーバコンポーネント](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)で使用するためのものです。React サーバコンポーネントをサポートする[フレームワーク](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks)をご覧ください。 * `cache` は、React の [Canary](https://react.dev/community/versioning-policy#canary-channel) と [experimental](https://react.dev/community/versioning-policy#experimental-channel) チャンネルでのみ利用可能です。本番環境で `cache` を使用する前に、制限事項を理解してください。[React のリリースチャンネルについてはこちら](/community/versioning-policy#all-release-channels) をご覧ください。 From 3f0bbf8b7ed8d3194993200c343e3b9ff2c354af Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:34:53 +0900 Subject: [PATCH 03/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 308e63c63..453f36dc2 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -6,7 +6,7 @@ canary: true * `cache` は、[React サーバコンポーネント](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)で使用するためのものです。React サーバコンポーネントをサポートする[フレームワーク](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks)をご覧ください。 -* `cache` は、React の [Canary](https://react.dev/community/versioning-policy#canary-channel) と [experimental](https://react.dev/community/versioning-policy#experimental-channel) チャンネルでのみ利用可能です。本番環境で `cache` を使用する前に、制限事項を理解してください。[React のリリースチャンネルについてはこちら](/community/versioning-policy#all-release-channels) をご覧ください。 +* `cache` は、React の [Canary](/community/versioning-policy#canary-channel) と [experimental](/community/versioning-policy#experimental-channel) チャンネルでのみ利用可能です。本番環境で `cache` を使用する前に、制限事項を理解してください。[React のリリースチャンネルについてはこちら](/community/versioning-policy#all-release-channels)をご覧ください。 From 030037610880c339ae459b51b58cc1313d704f4f Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:35:27 +0900 Subject: [PATCH 04/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 453f36dc2..8c4870f3f 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -11,7 +11,7 @@ canary: true -`cache` は、fetch や計算した結果をキャッシュすることができます。 +`cache` を使い、データフェッチや計算結果をキャッシュすることができます。 ```js const cachedFn = cache(fn); From a173c793447f600476a37e7dbcaa0ae0c7680d75 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:37:41 +0900 Subject: [PATCH 05/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 8c4870f3f..cc281f327 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -27,7 +27,7 @@ const cachedFn = cache(fn); ### `cache(fn)` {/*cache*/} -キャッシュを持つバージョンの関数を作成するために、コンポーネントの外部で `cache` を呼び出します。 +コンポーネントの外部で `cache` を呼び出して、キャッシュが有効化されたバージョンの関数を作成します。 ```js {4,7} import {cache} from 'react'; From b9ae142d1408b4a2715886b6b815eeba77c3041a Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:38:43 +0900 Subject: [PATCH 06/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index cc281f327..e35f388db 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -47,7 +47,7 @@ function Chart({data}) { #### 引数 {/*parameters*/} -- `fn`: 結果をキャッシュしたい関数です。`fn` は任意の引数を取り、任意の値を返すことができます。 +- `fn`: 結果をキャッシュしたい関数。`fn` は任意の引数を取り、任意の値を返すことができます。 #### 返り値 {/*returns*/} From 608ebbba7eac313ab6ce039bd9099f2d0d421280 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:39:17 +0900 Subject: [PATCH 07/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index e35f388db..e72e81fd2 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -51,7 +51,7 @@ function Chart({data}) { #### 返り値 {/*returns*/} -`cache` は、同じ型シグネチャを持つ `fn` のキャッシュされているバージョンを返します。その処理の中で `fn` は呼び出されません。 +`cache` は、同じ型シグネチャを持ち、キャッシュが有効化されたバージョンの `fn` を返します。その際に `fn` 自体は呼び出されません。 与えられた引数で `cachedFn` を呼び出すと、まずキャッシュにキャッシュされた結果が存在するかどうかを確認します。キャッシュされた結果が存在する場合、その結果を返します。存在しない場合、引数で `fn` を呼び出し、結果をキャッシュに保存し、その結果を返します。`fn` が呼び出されるのはキャッシュミスが発生したときだけです。 From 03593311df3a4ae02deb5116d8115ab43b017436 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:39:42 +0900 Subject: [PATCH 08/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index e72e81fd2..8dc5967b7 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -277,7 +277,7 @@ async function MyComponent() { } ``` -最初の `getData` 呼び出しでは、`fetchData` から返された Promise がキャッシュされます。その後のキャッシュ探索では、同じ Promise が返されます。 +最初の `getData` 呼び出しでは、`fetchData` から返されたプロミスがキャッシュされます。その後のキャッシュ探索では、同じプロミスが返されます。 最初の `getData` 呼び出しは `await` せず、2回目 は `await` します。[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) は JavaScript の演算子で、Promise の結果を待って返します。最初の `getData` 呼び出しは単に `fetch` を開始して Promise をキャッシュし、2回目の `getData` で探索します。 From 9f44fd31b7949416fb61539c843a4e59e6243ac3 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:40:07 +0900 Subject: [PATCH 09/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 8dc5967b7..5f3a9eb90 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -260,7 +260,7 @@ function Page({id}) { [非同期関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) を評価するとき、その処理の [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) を受け取ります。Promise はその処理の状態（_pending_、_fulfilled_、_failed_）とその最終的な結果を保持します。 -この例では、非同期関数 `fetchData` は `fetch` を待っている Promise を返します。 +この例では、非同期関数 `fetchData` は `fetch` 結果を待機するプロミスを返します。 ```js [[1, 1, "fetchData()"], [2, 8, "getData()"], [3, 10, "getData()"]] async function fetchData() { From dbd50bd744a4a3cc2e74da5d274fc206764e8a46 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:40:30 +0900 Subject: [PATCH 10/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 5f3a9eb90..b7da4f02d 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -221,7 +221,7 @@ async function AnimatedWeatherCard({city}) { ### データをプリロードする {/*preload-data*/} -長時間実行されるデータ取得をキャッシュすることで、コンポーネントのレンダー前に非同期処理を開始することができます。 +時間のかかるデータ取得をキャッシュすることで、コンポーネントのレンダー前に非同期処理を開始することができます。 ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]] const getUser = cache(async (id) => { From 6473464de93715703903cf68183c98f13fab3415 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:41:29 +0900 Subject: [PATCH 11/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index b7da4f02d..151809473 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -57,7 +57,7 @@ function Chart({data}) { -入力に基づいて戻り値をキャッシュする最適化は、[_メモ化_](https://en.wikipedia.org/wiki/Memoization) として知られています。`cache` から返される関数をメモ化された関数と呼びます。 +入力に基づいて返り値をキャッシュする最適化は、[*メモ化 (memoization)*](https://en.wikipedia.org/wiki/Memoization) として知られています。`cache` から返される関数をメモ化された関数 (memoized function) と呼びます。 From 53bdcc324b2cff45652f03ded21b1d4d14fd483a Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:45:13 +0900 Subject: [PATCH 12/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 151809473..83f40d5bb 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -65,7 +65,7 @@ function Chart({data}) { [//]: # 'TODO: add links to Server/Client Component reference once https://github.com/reactjs/react.dev/pull/6177 is merged' -- React は、各サーバーリクエストごとにすべてのメモ化された関数のキャッシュを無効化します。 +- React は、サーバへの各リクエストごとにすべてのメモ化された関数のキャッシュを無効化します。 - `cache` を呼び出すたびに新しい関数が作成されます。これは、同じ関数で `cache` を複数回呼び出すと、同じキャッシュを共有しない異なるメモ化された関数が返されることを意味します。 - `cachedFn` はエラーもキャッシュします。特定の引数で `fn` がエラーをスローすると、それがキャッシュされ、同じ引数で `cachedFn` が呼び出されると同じエラーが再スローされます。 - `cache` は、[サーバコンポーネント](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) でのみ使用できます。 From 7d9995940343cecf07004cf63c5fe8a7092b0fc2 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Wed, 11 Oct 2023 23:47:10 +0900 Subject: [PATCH 13/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 83f40d5bb..75226bc3a 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -206,7 +206,7 @@ async function MinimalWeatherCard({city}) { [//]: # 'TODO: add links to Server Components when merged.' -非同期レンダー はサーバコンポーネントでのみサポートされています。 +非同期レンダーはサーバコンポーネントでのみサポートされています。 ```js [[3, 1, "async"], [3, 2, "await"]] async function AnimatedWeatherCard({city}) { From 48872edc86273eaa6ba31891ce96ceff5df71646 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 00:01:47 +0900 Subject: [PATCH 14/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 75226bc3a..76f65601b 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -106,7 +106,7 @@ function TeamReport({users}) { -##### 異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取られます。 {/*pitfall-different-memoized-functions*/} +##### メモ化された関数を複数作って呼び出すと異なるキャッシュから読み取られる {/*pitfall-different-memoized-functions*/} 同じキャッシュにアクセスするためには、コンポーネントは同じメモ化された関数を呼び出さなければなりません。 From 2784501fd1a971ba9e8c78e2f39319ce03ab6328 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 00:21:03 +0900 Subject: [PATCH 15/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 76f65601b..9602bf610 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -139,7 +139,7 @@ export function Precipitation({cityData}) { 上記の例では、`Precipitation` と `Temperature` はそれぞれ `cache` を呼び出して、それぞれ独自のキャッシュの索引を持つ新しいメモ化された関数を作成します。両方のコンポーネントが同じ `cityData` でレンダーする場合、それぞれが `calculateWeekReport` を呼び出すため、重複した処理をすることになります。 -さらに、`Temperature` はコンポーネントがレンダーされるたびに 新しいメモ化された関数 を作成し、キャッシュの共有を許可しません。 +さらに、`Temperature` はコンポーネントがレンダーされるたびに新しいメモ化された関数を作成しているため、キャッシュによる共有はそもそも一切行えません。 キャッシュヒットを最大化し、処理を減らすためには、2 つのコンポーネントは同じメモ化された関数を呼び出して同じキャッシュにアクセスするべきです。寧ろ、専用のモジュールでメモ化された関数を定義し、コンポーネント間で [`インポート`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) します。 From de1db825695b697c88bfd7e63778c75640bd7fdb Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 00:31:20 +0900 Subject: [PATCH 16/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 9602bf610..c57142ae1 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -198,7 +198,7 @@ async function MinimalWeatherCard({city}) { `AnimatedWeatherCard` と `MinimalWeatherCard` の両方が同じ city でレンダーする場合、メモ化された関数 から同じデータのスナップショットを受け取ります。 -`AnimatedWeatherCard` と `MinimalWeatherCard` が異なる city 引数を `getTemperature` に渡した場合、`fetchTemperature` は2回呼び出され、呼び出したそれぞれで異なるデータを受け取ります。 +`AnimatedWeatherCard` と `MinimalWeatherCard` が異なる city 引数を `getTemperature` に渡した場合、`fetchTemperature` は 2 回呼び出され、それぞれの呼び出しが異なるデータを受け取ります。 city はキャッシュキーとして機能します。 From 9d9b02758c69e6cbd90c640b17685dd578c3d1f1 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 00:46:55 +0900 Subject: [PATCH 17/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index c57142ae1..270e7620c 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -252,7 +252,7 @@ function Page({id}) { `Page` をレンダーするとき、コンポーネントは `getUser` を呼び出しますが、返されたデータは使用しません。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行い、子をレンダーしている間に非同期のデータベースクエリを開始します。 -`Profile` をレンダーするとき、再び `getUser` を呼び出します。最初の `getUser` 呼び出しがすでにユーザーデータを返し、キャッシュしている場合、`Profile` が このデータを要求し、待機するとき、別のリモートプロシージャ呼び出しを必要とせずにキャッシュからシンプルに読み取ることができます。もし 最初のデータリクエスト がまだ完了していない場合、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。 +`Profile` をレンダーするとき、再び `getUser` を呼び出します。最初の `getUser` 呼び出しがすでに完了しユーザデータをキャッシュしている場合、`Profile` が このデータを要求して待機する時点では、新たなリモートプロシージャ呼び出しを必要とせずにキャッシュから単に読み取ることができます。もし最初のデータリクエストがまだ完了していない場合でも、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。 From d9302e643dacde5b82178bd50051bab50c51ee55 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 01:04:15 +0900 Subject: [PATCH 18/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 270e7620c..cd9639d0b 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -470,7 +470,7 @@ function App() { これを解決する一つの方法は、ベクトルの次元を `calculateNorm` に渡すことです。これは次元自体がプリミティブであるため、機能します。 -別の解決策は、ベクトルオブジェクト自体をコンポーネントのpropsとして渡すことかもしれません。同じオブジェクトを両方のコンポーネントインスタンスに渡す必要があります。 +ありえる別の解決策は、ベクトルオブジェクト自体をコンポーネントの props として渡すことです。同じオブジェクトを両方のコンポーネントインスタンスに渡す必要があります。 ```js {3,9,14} import {cache} from 'react'; From c5f19f48a0d9b5ec6f53c270d0999690b26ac47f Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 01:05:45 +0900 Subject: [PATCH 19/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index cd9639d0b..1b31cf3fd 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -443,7 +443,7 @@ function App() { この場合、2つの `MapMarker` は同じ処理を行い、`calculateNorm` を `{x: 10, y: 10, z:10}` の同じ値で呼び出しているように見えます。オブジェクトが同じ値を含んでいても、それぞれのコンポーネントが自身の `props` オブジェクトを作成するため、同じオブジェクト参照ではありません。 -Reactは入力に対して [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を呼び出し、キャッシュヒットがあるかどうかを確認します。 +React は入力に対して [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を呼び出し、キャッシュヒットがあるかどうかを確認します。 ```js {3,9} import {cache} from 'react'; From 0b0ab5c36c3bf9b3a0f60621d91db7bbc3e64634 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 01:06:36 +0900 Subject: [PATCH 20/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 1b31cf3fd..82f3f5ae0 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -408,7 +408,7 @@ function App() { ### メモ化された関数が、同じ引数で呼び出されても実行される {/*memoized-function-still-runs*/} -以前に述べた落とし穴を参照してください。 +上で述べた落とし穴を参照してください。 * [異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取ります。](#pitfall-different-memoized-functions) * [コンポーネントの外部でメモ化関数を呼び出すと、キャッシュは使用されません。](#pitfall-memoized-call-outside-component) From ca5850f0a1f96ecbaddc46597b8e41d707ac9879 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 01:09:07 +0900 Subject: [PATCH 21/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 82f3f5ae0..b863dc61c 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -258,7 +258,7 @@ function Page({id}) { #### 非同期処理のキャッシュ {/*caching-asynchronous-work*/} -[非同期関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) を評価するとき、その処理の [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) を受け取ります。Promise はその処理の状態（_pending_、_fulfilled_、_failed_）とその最終的な結果を保持します。 +[非同期関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)を評価すると、その処理の[プロミス (Promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) を受け取ります。プロミスはその処理の状態 (_pending_、_fulfilled_、_failed_) とその最終的な結果を保持します。 この例では、非同期関数 `fetchData` は `fetch` 結果を待機するプロミスを返します。 From 928274d8b432b4293ceab60b81578e454fb4b993 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 08:29:45 +0900 Subject: [PATCH 22/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index b863dc61c..d26e1008f 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -98,7 +98,7 @@ function TeamReport({users}) { } ``` -同じ `user` オブジェクトが `Profile` と `TeamReport` の両方でレンダーされる場合、2つのコンポーネントは処理を共有でき、その `user` に対して `calculateUserMetrics` を一度だけ呼び出します。 +同じ `user` オブジェクトが `Profile` と `TeamReport` の両方でレンダーされる場合、2 つのコンポーネントは処理を共有でき、その `user` に対して `calculateUserMetrics` が一度だけ呼び出されるようになります。 最初に `Profile` がレンダーされると仮定します。`getUserMetrics` が呼び出され、キャッシュされた結果があるかどうかを確認します。その `user` で `getUserMetrics` を呼び出すのは初めてなので、キャッシュミスが発生します。`getUserMetrics` はその後、その `user` で `calculateUserMetrics` を呼び出し、結果をキャッシュに書き込みます。 From 9d9f03559360f3168c59bee06772ef2657b52f19 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 08:36:13 +0900 Subject: [PATCH 23/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index d26e1008f..af99f157a 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -68,7 +68,7 @@ function Chart({data}) { - React は、サーバへの各リクエストごとにすべてのメモ化された関数のキャッシュを無効化します。 - `cache` を呼び出すたびに新しい関数が作成されます。これは、同じ関数で `cache` を複数回呼び出すと、同じキャッシュを共有しない異なるメモ化された関数が返されることを意味します。 - `cachedFn` はエラーもキャッシュします。特定の引数で `fn` がエラーをスローすると、それがキャッシュされ、同じ引数で `cachedFn` が呼び出されると同じエラーが再スローされます。 -- `cache` は、[サーバコンポーネント](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) でのみ使用できます。 +- `cache` は、[サーバコンポーネント](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) でのみ使用できます。 --- From c34c073d60d816273821e31541db832c341e59b6 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 08:42:17 +0900 Subject: [PATCH 24/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index af99f157a..89faa40f5 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -141,7 +141,7 @@ export function Precipitation({cityData}) { さらに、`Temperature` はコンポーネントがレンダーされるたびに新しいメモ化された関数を作成しているため、キャッシュによる共有はそもそも一切行えません。 -キャッシュヒットを最大化し、処理を減らすためには、2 つのコンポーネントは同じメモ化された関数を呼び出して同じキャッシュにアクセスするべきです。寧ろ、専用のモジュールでメモ化された関数を定義し、コンポーネント間で [`インポート`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) します。 +キャッシュヒットを最大化し、処理を減らすためには、2 つのコンポーネントは同じメモ化された関数を呼び出して同じキャッシュにアクセスするべきです。上記のようにするのではなく、複数のコンポーネントから [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) が行えるよう、メモ化された関数をそれ専用のモジュールで定義してください。 ```js [[3, 5, "export default cache(calculateWeekReport)"]] // getWeekReport.js From 66697ec05d8e4598048287b416757bf4b2e3895f Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 08:47:55 +0900 Subject: [PATCH 25/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 89faa40f5..2a6e20c7e 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -137,7 +137,7 @@ export function Precipitation({cityData}) { } ``` -上記の例では、`Precipitation` と `Temperature` はそれぞれ `cache` を呼び出して、それぞれ独自のキャッシュの索引を持つ新しいメモ化された関数を作成します。両方のコンポーネントが同じ `cityData` でレンダーする場合、それぞれが `calculateWeekReport` を呼び出すため、重複した処理をすることになります。 +上記の例では、`Precipitation` と `Temperature` はそれぞれ `cache` を呼び出して、それぞれ独自のキャッシュテーブルを持つ新しいメモ化された関数を作成しています。両方のコンポーネントが同じ `cityData` でレンダーする場合、それぞれが `calculateWeekReport` を呼び出すため、重複した処理が行われることになります。 さらに、`Temperature` はコンポーネントがレンダーされるたびに新しいメモ化された関数を作成しているため、キャッシュによる共有はそもそも一切行えません。 From 8c35cd71df28567b7d0019ae2a8ffdc30088afae Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 08:50:20 +0900 Subject: [PATCH 26/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 2a6e20c7e..11b56f75e 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -170,7 +170,7 @@ export default function Precipitation({cityData}) { // ... } ``` -ここでは、両方のコンポーネントが `./getWeekReport.js` からエクスポートされた 同じメモ化された関数 を呼び出して、同じキャッシュを読み書きします。 +これで、両方のコンポーネントが `./getWeekReport.js` からエクスポートされた同じメモ化された関数を呼び出して、同じキャッシュを読み書きするようになります。 ### データのスナップショットを共有する {/*take-and-share-snapshot-of-data*/} From 653208067abe41b04f1804da55dd23288851116e Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 08:52:47 +0900 Subject: [PATCH 27/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 11b56f75e..eb8fabbf9 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -53,7 +53,7 @@ function Chart({data}) { `cache` は、同じ型シグネチャを持ち、キャッシュが有効化されたバージョンの `fn` を返します。その際に `fn` 自体は呼び出されません。 -与えられた引数で `cachedFn` を呼び出すと、まずキャッシュにキャッシュされた結果が存在するかどうかを確認します。キャッシュされた結果が存在する場合、その結果を返します。存在しない場合、引数で `fn` を呼び出し、結果をキャッシュに保存し、その結果を返します。`fn` が呼び出されるのはキャッシュミスが発生したときだけです。 +何らかの引数で `cachedFn` を呼び出すと、まずキャッシュにキャッシュ済みの結果が存在するかどうかを確認します。キャッシュ済みの結果が存在する場合、その結果を返します。存在しない場合、与えられた引数で `fn` を呼び出し、結果をキャッシュに保存し、その結果を返します。`fn` が呼び出されるのはキャッシュミスが発生したときだけです。 From 51a14e18d1238210197499b81feaa276a5154eb8 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:26:28 +0900 Subject: [PATCH 28/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index eb8fabbf9..94fe4ba05 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -175,7 +175,7 @@ export default function Precipitation({cityData}) { ### データのスナップショットを共有する {/*take-and-share-snapshot-of-data*/} -コンポーネント間でデータのスナップショットを共有するためには、`fetch` のようなデータ取得関数とともに `cache` を呼び出します。複数のコンポーネントが同じデータを取得すると、リクエストは1回だけ行われ、返されたデータはキャッシュされ、コンポーネント間で共有されます。すべてのコンポーネントはサーバーレンダー全体で同じデータのスナップショットを参照します。 +コンポーネント間でデータのスナップショットを共有するためには、`fetch` のようなデータ取得関数を引数にして `cache` を呼び出します。複数のコンポーネントが同じデータを取得すると、リクエストは 1 回だけ行われ、返されたデータはキャッシュされ、コンポーネント間で共有されます。すべてのコンポーネントはサーバレンダー全体で同一のデータスナップショットを参照します。 ```js [[1, 4, "city"], [1, 5, "fetchTemperature(city)"], [2, 4, "getTemperature"], [2, 9, "getTemperature"], [1, 9, "city"], [2, 14, "getTemperature"], [1, 14, "city"]] import {cache} from 'react'; From 60b6d8c082f57b3a475a0883c892b3858e89c194 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:27:08 +0900 Subject: [PATCH 29/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 94fe4ba05..ab7f6f235 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -196,7 +196,7 @@ async function MinimalWeatherCard({city}) { } ``` -`AnimatedWeatherCard` と `MinimalWeatherCard` の両方が同じ city でレンダーする場合、メモ化された関数 から同じデータのスナップショットを受け取ります。 +`AnimatedWeatherCard` と `MinimalWeatherCard` の両方が同じ city でレンダーする場合、メモ化された関数から同じデータのスナップショットを受け取ります。 `AnimatedWeatherCard` と `MinimalWeatherCard` が異なる city 引数を `getTemperature` に渡した場合、`fetchTemperature` は 2 回呼び出され、それぞれの呼び出しが異なるデータを受け取ります。 From d4fa7d55eb90debfb8f6ff4b053b15707b71f499 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:28:17 +0900 Subject: [PATCH 30/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index ab7f6f235..6184399c5 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -279,7 +279,7 @@ async function MyComponent() { 最初の `getData` 呼び出しでは、`fetchData` から返されたプロミスがキャッシュされます。その後のキャッシュ探索では、同じプロミスが返されます。 -最初の `getData` 呼び出しは `await` せず、2回目 は `await` します。[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) は JavaScript の演算子で、Promise の結果を待って返します。最初の `getData` 呼び出しは単に `fetch` を開始して Promise をキャッシュし、2回目の `getData` で探索します。 +最初の `getData` 呼び出しでは `await` しておらず、2 回目の呼び出し では `await` していることに注目してください。[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) は JavaScript の演算子であり、プロミスの結果を待機して返します。最初の `getData` 呼び出しは単に `fetch` を開始してプロミスをキャッシュし、2 回目の `getData` のときに見つかるようにしているのです。 2回目の呼び出し までに Promise がまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算作業を続けることができるため、2回目の呼び出し の待ち時間を短縮することが最適化になります。 From c870b77a80f78b5b4aba64c413b689a928aea9e5 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:44:38 +0900 Subject: [PATCH 31/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 6184399c5..59f4bc5a4 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -288,7 +288,7 @@ Promise がすでに解決している場合、エラーまたは _fulfilled_ -##### コンポーネントの外部でメモ化された関数を呼び出すと、キャッシュは使用されません。{/*pitfall-memoized-call-outside-component*/} +##### メモ化された関数をコンポーネント外で呼び出すとキャッシュは使用されない {/*pitfall-memoized-call-outside-component*/} ```jsx [[1, 3, "getUser"]] import {cache} from 'react'; From e0d32e395d4aaff5de1aa37df63ab91c36f66e10 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:53:51 +0900 Subject: [PATCH 32/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 59f4bc5a4..379e4e17b 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -283,7 +283,7 @@ async function MyComponent() { 2回目の呼び出し までに Promise がまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算作業を続けることができるため、2回目の呼び出し の待ち時間を短縮することが最適化になります。 -Promise がすでに解決している場合、エラーまたは _fulfilled_ の結果になると、`await` はその値をすぐに返します。どちらの結果でも、パフォーマンスの利点があります。 +プロミスの最終状態がすでに決定 (settled) している場合、結果がエラーの場合でも正常終了 (fulfilled) の場合でも、`await` はその値をすぐに返します。どちらの結果でも、パフォーマンス上の利点があります。 From 50636e970ee8a9fe01333480082569a714db0014 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:54:46 +0900 Subject: [PATCH 33/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 379e4e17b..ec21afabb 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -307,7 +307,7 @@ async function DemoProfile() { } ``` -React は、コンポーネント内のメモ化された関数に対してのみキャッシュアクセスを提供します。コンポーネントの外部で `getUser` を呼び出すと、関数は評価されますが、キャッシュは読み取られず、更新もされません。 +React がメモ化された関数に対してキャッシュアクセスを提供するのはコンポーネント内のみです。コンポーネントの外部で `getUser` を呼び出した場合も関数は評価されますが、キャッシュは読み取られず、更新もされません。 これは、キャッシュアクセスがコンポーネントからのみアクセス可能な [コンテクスト](/learn/passing-data-deeply-with-context) を通じて提供されるためです。 From 85baf1d55c209329e7599bd9b4c2a0d38726982d Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:56:07 +0900 Subject: [PATCH 34/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index ec21afabb..73a31670a 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -309,7 +309,7 @@ async function DemoProfile() { React がメモ化された関数に対してキャッシュアクセスを提供するのはコンポーネント内のみです。コンポーネントの外部で `getUser` を呼び出した場合も関数は評価されますが、キャッシュは読み取られず、更新もされません。 -これは、キャッシュアクセスがコンポーネントからのみアクセス可能な [コンテクスト](/learn/passing-data-deeply-with-context) を通じて提供されるためです。 +これは、キャッシュアクセスがコンポーネントからのみアクセス可能な[コンテクスト](/learn/passing-data-deeply-with-context)を通じて提供されるためです。 From 277179536b4cac3d5c0006cda957e9de5c414254 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:56:47 +0900 Subject: [PATCH 35/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 73a31670a..77ae48c4a 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -315,7 +315,7 @@ React がメモ化された関数に対してキャッシュアクセスを提 -#### `cache`、[`memo`](/reference/react/memo)、[`useMemo`](/reference/react/useMemo) のどれをいつ使うべきですか？{/*cache-memo-usememo*/} +#### `cache`、[`memo`](/reference/react/memo)、[`useMemo`](/reference/react/useMemo) のどれをいつ使うべきか {/*cache-memo-usememo*/} 上記のすべての API はメモ化を提供しますが、それらが何をメモ化することを意図しているか、誰がキャッシュにアクセスできるか、そしてキャッシュが無効になるタイミングはいつか、という点で違いがあります。 From bb97b750f74af86632e5373b06d529f5e7b66d38 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 09:57:33 +0900 Subject: [PATCH 36/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 77ae48c4a..d86249610 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -341,7 +341,7 @@ function App() { ); } ``` -この例では、`App` は同じレコードで 2 つの `WeatherReport` をレンダーします。両方のコンポーネントが同じ処理を行っていても、処理を共有することはできません。`useMemo` のキャッシュはコンポーネントのローカルにしか存在しません。 +この例では、`App` は同じレコードで 2 つの `WeatherReport` をレンダーしています。両方のコンポーネントが同じ処理を行っていますが、処理を共有することはできません。`useMemo` のキャッシュはコンポーネントのローカルにしか存在しません。 しかし、`useMemo` は `App` が再レンダーされ、`record` オブジェクトが変わらない場合、各コンポーネントインスタンスは処理をスキップし、`avgTemp` のメモ化された値を使用します。`useMemo` は、与えられた依存関係で `avgTemp` の最後の計算のみをキャッシュします。 From e7e0bb712fabeef9dd97cb1688b29971b0281a5c Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 10:00:07 +0900 Subject: [PATCH 37/40] Update src/content/reference/react/cache.md Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index d86249610..5bab37b8d 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -343,7 +343,7 @@ function App() { ``` この例では、`App` は同じレコードで 2 つの `WeatherReport` をレンダーしています。両方のコンポーネントが同じ処理を行っていますが、処理を共有することはできません。`useMemo` のキャッシュはコンポーネントのローカルにしか存在しません。 -しかし、`useMemo` は `App` が再レンダーされ、`record` オブジェクトが変わらない場合、各コンポーネントインスタンスは処理をスキップし、`avgTemp` のメモ化された値を使用します。`useMemo` は、与えられた依存関係で `avgTemp` の最後の計算のみをキャッシュします。 +しかし `useMemo` は、`App` が再レンダーされるが `record` オブジェクトが変わらない場合に、コンポーネントの各インスタンスが処理をスキップしてメモ化された `avgTemp` 値を使用できるようにします。`useMemo` は、与えられた依存配列に対応する `avgTemp` の最後の計算結果のみをキャッシュします。 #### `cache` {/*deep-dive-cache*/} From edcee24ec05e872dda3d35a8b25d7fd6383879c8 Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 14:00:56 +0900 Subject: [PATCH 38/40] Apply suggestions from code review Co-authored-by: Soichiro Miki --- src/content/reference/react/cache.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 5bab37b8d..0e88c9819 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -367,9 +367,9 @@ function App() { ); } ``` -前の例を `cache` を使用して書き直すと、この場合 2 番目の `WeatherReport` インスタンス は重複する処理をスキップし、最初の `WeatherReport` と同じキャッシュから読み取ることができます。前の例とのもう一つの違いは、`cache` は データフェッチのメモ化 にも推奨されていることで、これは `useMemo` が計算のみに使用すべきであるとは対照的です。 +前の例を `cache` を使用して書き直すと、この場合 2 番目の `WeatherReport` インスタンス は重複する処理をスキップし、最初の `WeatherReport` と同じキャッシュから読み取ることができます。前の例とのもうひとつの違いは、`cache` がデータフェッチのメモ化にも推奨されているということです。これは `useMemo` が計算のみに使用すべきであることとは対照的です。 -現時点では、`cache` はサーバコンポーネントでのみ使用すべきで、キャッシュはサーバーリクエスト間で無効化されます。 +現時点では、`cache` はサーバコンポーネントでのみ使用すべきです。キャッシュはサーバリクエストをまたぐと無効化されます。 #### `memo` {/*deep-dive-memo*/} @@ -396,9 +396,9 @@ function App() { } ``` -この例では、両方の `MemoWeatherReport` コンポーネントは最初にレンダーされたときに `calculateAvg` を呼び出します。しかし、`App` が再レンダーされ、`record` に変更がない場合、props は変わらず、`MemoWeatherReport` は再レンダーされません。 +この例では、両方の `MemoWeatherReport` コンポーネントは最初にレンダーされたときに `calculateAvg` を呼び出します。しかし、`App` が再レンダーされ、`record` に変更がない場合、props は一切変わらないため `MemoWeatherReport` は再レンダーされません。 -`useMemo` と比較して、`memo` は props に基づいてコンポーネントのレンダーをメモ化します。これは特定の計算に対してではなく、メモ化されたコンポーネントは最後のレンダーと最後の prop 値のみをキャッシュします。一度 props が変更されると、キャッシュは無効化され、コンポーネントは再レンダーされます。 +`useMemo` とは異なり、`memo` は特定の計算ではなく props に基づいてコンポーネントのレンダーをメモ化します。一方で最後の prop 値に対応する最後のレンダー結果だけがキャッシュされるという点では `useMemo` と似ています。props が変更されるとキャッシュは無効化され、コンポーネントは再レンダーされます。 @@ -409,14 +409,14 @@ function App() { ### メモ化された関数が、同じ引数で呼び出されても実行される {/*memoized-function-still-runs*/} 上で述べた落とし穴を参照してください。 -* [異なるメモ化された関数を呼び出すと、異なるキャッシュから読み取ります。](#pitfall-different-memoized-functions) -* [コンポーネントの外部でメモ化関数を呼び出すと、キャッシュは使用されません。](#pitfall-memoized-call-outside-component) +* [メモ化された関数を複数呼び出すと、別々のキャッシュから読み取られてしまいます](#pitfall-different-memoized-functions)。 +* [メモ化された関数をコンポーネントの外部で呼び出すと、キャッシュは使用されません](#pitfall-memoized-call-outside-component)。 -上記のいずれも該当しない場合、Reactがキャッシュに存在するかどうかをチェックする方法に問題があるかもしれません。 +上記のいずれも該当しない場合、何かがキャッシュに存在するかどうかを React がチェックする方法に関連した問題かもしれません。 引数が[プリミティブ](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)でない場合（例：オブジェクト、関数、配列）、同じオブジェクト参照を渡していることを確認してください。 -メモ化された関数を呼び出すとき、Reactは入力引数を調べて結果がすでにキャッシュされているかどうかを確認します。Reactは引数の浅い等価性を使用してキャッシュヒットがあるかどうかを判断します。 +メモ化された関数を呼び出すとき、React は入力された引数を調べて結果がすでにキャッシュされているかどうかを確認します。React は引数に対して浅い (shallow) 比較を行い、キャッシュヒットがあるかどうかを判断します。 ```js import {cache} from 'react'; @@ -441,7 +441,7 @@ function App() { } ``` -この場合、2つの `MapMarker` は同じ処理を行い、`calculateNorm` を `{x: 10, y: 10, z:10}` の同じ値で呼び出しているように見えます。オブジェクトが同じ値を含んでいても、それぞれのコンポーネントが自身の `props` オブジェクトを作成するため、同じオブジェクト参照ではありません。 +この例では、2 つの `MapMarker` が同じ処理を行っており、`calculateNorm` を `{x: 10, y: 10, z:10}` という同じ値で呼び出しているように見えます。しかしそれぞれのコンポーネントが別々に `props` オブジェクトを作成しているため、これらのオブジェクトは同じ値を含んでいますが、同じオブジェクト参照ではありません。 React は入力に対して [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) を呼び出し、キャッシュヒットがあるかどうかを確認します。 @@ -468,7 +468,7 @@ function App() { } ``` -これを解決する一つの方法は、ベクトルの次元を `calculateNorm` に渡すことです。これは次元自体がプリミティブであるため、機能します。 +これを解決するひとつの方法は、ベクトルの各次元の値を別々に `calculateNorm` に渡すことです。各次元の値はプリミティブであるため、これは機能します。 ありえる別の解決策は、ベクトルオブジェクト自体をコンポーネントの props として渡すことです。同じオブジェクトを両方のコンポーネントインスタンスに渡す必要があります。 From f484a2492dab3628a3490fa7bcfc315f5760763c Mon Sep 17 00:00:00 2001 From: Yoshitaka Terazawa Date: Thu, 12 Oct 2023 14:15:22 +0900 Subject: [PATCH 39/40] fix: Apply reviews --- src/content/reference/react/cache.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 0e88c9819..744b25d33 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -250,7 +250,7 @@ function Page({id}) { } ``` -`Page` をレンダーするとき、コンポーネントは `getUser` を呼び出しますが、返されたデータは使用しません。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行い、子をレンダーしている間に非同期のデータベースクエリを開始します。 +`Page` のレンダー時にコンポーネントは `getUser` を呼び出していますが、返されたデータを使用していないことに着目してください。この早期の `getUser` 呼び出しは、`Page` が他の計算処理を行ったり子をレンダーしたりしている間に実行される、非同期のデータベースクエリを開始します。 `Profile` をレンダーするとき、再び `getUser` を呼び出します。最初の `getUser` 呼び出しがすでに完了しユーザデータをキャッシュしている場合、`Profile` が このデータを要求して待機する時点では、新たなリモートプロシージャ呼び出しを必要とせずにキャッシュから単に読み取ることができます。もし最初のデータリクエストがまだ完了していない場合でも、このパターンでデータをプリロードすることで、データ取得の遅延を減らすことができます。 @@ -281,7 +281,7 @@ async function MyComponent() { 最初の `getData` 呼び出しでは `await` しておらず、2 回目の呼び出し では `await` していることに注目してください。[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) は JavaScript の演算子であり、プロミスの結果を待機して返します。最初の `getData` 呼び出しは単に `fetch` を開始してプロミスをキャッシュし、2 回目の `getData` のときに見つかるようにしているのです。 -2回目の呼び出し までに Promise がまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算作業を続けることができるため、2回目の呼び出し の待ち時間を短縮することが最適化になります。 +2 回目の呼び出し時点でプロミスがまだ _pending_ の場合、`await` は結果を待ちます。`fetch` を待っている間に React が計算処理を続けることができるため、2 回目の呼び出しの待ち時間を短縮できる、という最適化になります。 プロミスの最終状態がすでに決定 (settled) している場合、結果がエラーの場合でも正常終了 (fulfilled) の場合でも、`await` はその値をすぐに返します。どちらの結果でも、パフォーマンス上の利点があります。 From 77a126a19365ab9c25f968893cd2ffdef037d559 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 12 Oct 2023 18:25:32 +0900 Subject: [PATCH 40/40] =?UTF-8?q?=E5=BE=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/cache.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index 744b25d33..b184da4df 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -68,7 +68,7 @@ function Chart({data}) { - React は、サーバへの各リクエストごとにすべてのメモ化された関数のキャッシュを無効化します。 - `cache` を呼び出すたびに新しい関数が作成されます。これは、同じ関数で `cache` を複数回呼び出すと、同じキャッシュを共有しない異なるメモ化された関数が返されることを意味します。 - `cachedFn` はエラーもキャッシュします。特定の引数で `fn` がエラーをスローすると、それがキャッシュされ、同じ引数で `cachedFn` が呼び出されると同じエラーが再スローされます。 -- `cache` は、[サーバコンポーネント](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) でのみ使用できます。 +- `cache` は、[サーバコンポーネント](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)でのみ使用できます。 --- @@ -398,7 +398,7 @@ function App() { この例では、両方の `MemoWeatherReport` コンポーネントは最初にレンダーされたときに `calculateAvg` を呼び出します。しかし、`App` が再レンダーされ、`record` に変更がない場合、props は一切変わらないため `MemoWeatherReport` は再レンダーされません。 -`useMemo` とは異なり、`memo` は特定の計算ではなく props に基づいてコンポーネントのレンダーをメモ化します。一方で最後の prop 値に対応する最後のレンダー結果だけがキャッシュされるという点では `useMemo` と似ています。props が変更されるとキャッシュは無効化され、コンポーネントは再レンダーされます。 +`useMemo` とは異なり、`memo` は特定の計算ではなく props に基づいてコンポーネントのレンダーをメモ化します。一方で最後の props の値に対応する最後のレンダー結果だけがキャッシュされるという点では `useMemo` と似ています。props が変更されるとキャッシュは無効化され、コンポーネントは再レンダーされます。