From 885ee5a67409eb23d91ca5f83fdb22e131a6e2bd Mon Sep 17 00:00:00 2001 From: jp-knj Date: Mon, 10 Jul 2023 00:54:43 +0900 Subject: [PATCH 1/3] Translate useExternalStore reference --- .../reference/react/useSyncExternalStore.md | 126 +++++++++--------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 4169e231e..0c4fe74f7 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -4,7 +4,7 @@ title: useSyncExternalStore -`useSyncExternalStore` is a React Hook that lets you subscribe to an external store. +`useSyncExternalStore` は、外部ストアへのサブスクライブを可能にする React のフックです。 ```js const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) @@ -16,11 +16,11 @@ const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot? --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)` {/*usesyncexternalstore*/} -Call `useSyncExternalStore` at the top level of your component to read a value from an external data store. +外部データストアから値を読み取るために、コンポーネントのトップレベルで useSyncExternalStore を呼び出します。 ```js import { useSyncExternalStore } from 'react'; @@ -32,43 +32,43 @@ function TodosApp() { } ``` -It returns the snapshot of the data in the store. You need to pass two functions as arguments: +これは、ストアにあるデータのスナップショットを返します。引数として 2 つの関数を渡す必要があります： -1. The `subscribe` function should subscribe to the store and return a function that unsubscribes. -2. The `getSnapshot` function should read a snapshot of the data from the store. +1. `subscribe` 関数はストアへのサブスクライブを開始します。サブスクライブを解除する関数を返す必要があります。 +2. `getSnapshot` 関数は、ストアからデータのスナップショットを読み取る必要があります。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `subscribe`: A function that takes a single `callback` argument and subscribes it to the store. When the store changes, it should invoke the provided `callback`. This will cause the component to re-render. The `subscribe` function should return a function that cleans up the subscription. +* `subscribe`: ストアにサブスクライブを開始し、また callback 引数を受け取る関数。ストアが変更された際に渡された callback を呼び出す必要があります。これにより、コンポーネントが再レンダーされます。subscribe 関数は、サブスクリプションをクリーンアップする関数を返す必要があります。 -* `getSnapshot`: A function that returns a snapshot of the data in the store that's needed by the component. While the store has not changed, repeated calls to `getSnapshot` must return the same value. If the store changes and the returned value is different (as compared by [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), React re-renders the component. +* `getSnapshot`: コンポーネントが必要とするストアにあるデータのスナップショットを返す関数。ストアが変更されていない場合、getSnapshot への再呼び出しは同じ値を返す必要があります。ストアが変更されて返された値が（[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) で比較して）異なる場合、React はコンポーネントを再レンダーします。 -* **optional** `getServerSnapshot`: A function that returns the initial snapshot of the data in the store. It will be used only during server rendering and during hydration of server-rendered content on the client. The server snapshot must be the same between the client and the server, and is usually serialized and passed from the server to the client. If you omit this argument, rendering the component on the server will throw an error. +* **省略可能** `getServerSnapshot`: ストアのデータの初期スナップショットを返す関数。これはサーバレンダリング中、およびクライアント上でのサーバレンダリングされたコンテンツのハイドレーション中にのみ使用されます。サーバスナップショットはクライアントとサーバ間で同一でなければならず、通常はサーバからクライアントに渡されるシリアライズされたものです。この引数を省略すると、サーバ上でのコンポーネントのレンダリングはエラーを発生させます。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -The current snapshot of the store which you can use in your rendering logic. +レンダリングロジックで使用できるストアの現在のスナップショット。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* The store snapshot returned by `getSnapshot` must be immutable. If the underlying store has mutable data, return a new immutable snapshot if the data has changed. Otherwise, return a cached last snapshot. +* `getSnapshot` によって返されるストアのスナップショットはイミュータブル（immutable; 書き換え不能）でなければなりません。背後で使っているストアがミュータブルなデータを持っている場合、データが変更された場合は新しいイミュータブルなスナップショットを返し、それ以外の場合はキャッシュされた最後のスナップショットを返すようにします。 -* If a different `subscribe` function is passed during a re-render, React will re-subscribe to the store using the newly passed `subscribe` function. You can prevent this by declaring `subscribe` outside the component. +* 再レンダー中に異なる `subscribe` 関数が渡された場合、React は新しく渡された `subscribe` 関数を使ってストアに再サブスクライブします。これを防ぐには、`subscribe` をコンポーネントの外で宣言します。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Subscribing to an external store {/*subscribing-to-an-external-store*/} +### 外部ストアへのサブスクライブ {/*subscribing-to-an-external-store*/} -Most of your React components will only read data from their [props,](/learn/passing-props-to-a-component) [state,](/reference/react/useState) and [context.](/reference/react/useContext) However, sometimes a component needs to read some data from some store outside of React that changes over time. This includes: +React コンポーネントのほとんどは、[props](/learn/passing-props-to-a-component)、[state](/reference/react/useState) および[コンテクスト](/reference/react/useContext)からのみデータを読み取ります。しかし、コンポーネントは時間と共に変化する React 外のストアからデータを読み取る必要がある場合があります。これには以下のようなものが含まれます： -* Third-party state management libraries that hold state outside of React. -* Browser APIs that expose a mutable value and events to subscribe to its changes. +* React の外部で状態を保持するサードパーティの状態管理ライブラリ。 +* 可変の値を、その変更にサブスクライブするためのイベントともに公開するブラウザ API。 -Call `useSyncExternalStore` at the top level of your component to read a value from an external data store. +外部データストアから値を読み取るために、コンポーネントの最上位で `useSyncExternalStore` を呼び出します。 ```js [[1, 5, "todosStore.subscribe"], [2, 5, "todosStore.getSnapshot"], [3, 5, "todos", 0]] import { useSyncExternalStore } from 'react'; @@ -80,14 +80,14 @@ function TodosApp() { } ``` -It returns the snapshot of the data in the store. You need to pass two functions as arguments: +これはストア内のデータのスナップショットを返します。引数として 2 つの関数を渡す必要があります： -1. The `subscribe` function should subscribe to the store and return a function that unsubscribes. -2. The `getSnapshot` function should read a snapshot of the data from the store. +1. `subscribe` 関数は、ストアへのサブスクライブを行い、またサブスクライブを解除する関数を返します。 +2. `getSnapshot` 関数は、ストアからデータのスナップショットを読み取ります。 -React will use these functions to keep your component subscribed to the store and re-render it on changes. +React はこれらの関数を使ってコンポーネントをストアにサブスクライブされた状態に保ち、変更があるたびに再レンダーします。 -For example, in the sandbox below, `todosStore` is implemented as an external store that stores data outside of React. The `TodosApp` component connects to that external store with the `useSyncExternalStore` Hook. +例えば、以下のサンドボックスでは、`todosStore` は React の外部にデータを保存する外部ストアとして実装されています。`TodosApp` コンポーネントは、`useSyncExternalStore` フックを使ってその外部ストアに接続します。 @@ -112,11 +112,11 @@ export default function TodosApp() { ``` ```js todoStore.js -// This is an example of a third-party store -// that you might need to integrate with React. +// これはサードパーティのストアの例です。 +// React と統合する必要があるかもしれません。 -// If your app is fully built with React, -// we recommend using React state instead. +// アプリが完全に React でビルドされている場合は、 +// 代わりに React state を使用することをお勧めします。 let nextId = 0; let todos = [{ id: nextId++, text: 'Todo #1' }]; @@ -149,17 +149,17 @@ function emitChange() { -When possible, we recommend using built-in React state with [`useState`](/reference/react/useState) and [`useReducer`](/reference/react/useReducer) instead. The `useSyncExternalStore` API is mostly useful if you need to integrate with existing non-React code. +可能であれば、React 組み込みの state 管理機能である [`useState`](/reference/react/useState) および [`useReducer`](/reference/react/useReducer) を代わりに使用することをお勧めします。`useSyncExternalStore` API は、既存の非 React コードと統合する必要がある場合に主に役立ちます。 --- -### Subscribing to a browser API {/*subscribing-to-a-browser-api*/} +### ブラウザ API へのサブスクライブ {/*subscribing-to-a-browser-api*/} -Another reason to add `useSyncExternalStore` is when you want to subscribe to some value exposed by the browser that changes over time. For example, suppose that you want your component to display whether the network connection is active. The browser exposes this information via a property called [`navigator.onLine`.](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) +`useSyncExternalStore` を追加するもう 1 つの理由は、時間とともに変化するブラウザが公開する値にサブスクライブしたい場合です。たとえば、コンポーネントがネットワーク接続がアクティブかどうかを表示したいとします。ブラウザは、この情報を [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine) というプロパティを介して公開します。 -This value can change without React's knowledge, so you should read it with `useSyncExternalStore`. +この値は React の知らないところで変更される可能性があるので、`useSyncExternalStore` でそれを読み取るべきです。 ```js import { useSyncExternalStore } from 'react'; @@ -170,7 +170,7 @@ function ChatIndicator() { } ``` -To implement the `getSnapshot` function, read the current value from the browser API: +`getSnapshot` 関数を実装するためには、ブラウザ API から現在の値を読み取ることが必要です： ```js function getSnapshot() { @@ -178,7 +178,7 @@ function getSnapshot() { } ``` -Next, you need to implement the `subscribe` function. For example, when `navigator.onLine` changes, the browser fires the [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) and [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) events on the `window` object. You need to subscribe the `callback` argument to the corresponding events, and then return a function that cleans up the subscriptions: +次に、`subscribe` 関数を実装する必要があります。例えば、`navigator.onLine` が変化すると、ブラウザは `window` オブジェクト上で [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) および [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) というイベントを発火します。これら対応するイベントに `callback` 引数を登録し、それを解除する関数を返す必要があります： ```js function subscribe(callback) { @@ -191,7 +191,7 @@ function subscribe(callback) { } ``` -Now React knows how to read the value from the external `navigator.onLine` API and how to subscribe to its changes. Disconnect your device from the network and notice that the component re-renders in response: +これで React は、外部の `navigator.onLine` API から値を読み取る方法と、その変更にサブスクライブする方法を知ることができます。ネットワークからデバイスを切断すると、コンポーネントが反応して再レンダーされることに注目してください： @@ -221,11 +221,11 @@ function subscribe(callback) { --- -### Extracting the logic to a custom Hook {/*extracting-the-logic-to-a-custom-hook*/} +### ロジックをカスタムフックに抽出する {/*extracting-the-logic-to-a-custom-hook*/} -Usually you won't write `useSyncExternalStore` directly in your components. Instead, you'll typically call it from your own custom Hook. This lets you use the same external store from different components. +通常、`useSyncExternalStore` を直接コンポーネント内に記述することはありません。代わりに、自分自身のカスタムフックから呼び出すことが一般的です。これにより、異なるコンポーネントから同じ外部ストアを使用できます。 -For example, this custom `useOnlineStatus` Hook tracks whether the network is online: +例えば、このカスタム `useOnlineStatus` フックはネットワークがオンラインであるかどうかを追跡します： ```js {3,6} import { useSyncExternalStore } from 'react'; @@ -244,7 +244,7 @@ function subscribe(callback) { } ``` -Now different components can call `useOnlineStatus` without repeating the underlying implementation: +これで、異なるコンポーネントが、基本的な実装を繰り返すことなく `useOnlineStatus` を呼び出せるようになりました： @@ -306,14 +306,14 @@ function subscribe(callback) { --- -### Adding support for server rendering {/*adding-support-for-server-rendering*/} +### サーバーレンダリングのサポートを追加する {/*adding-support-for-server-rendering*/} -If your React app uses [server rendering,](/reference/react-dom/server) your React components will also run outside the browser environment to generate the initial HTML. This creates a few challenges when connecting to an external store: +React アプリが[サーバレンダリング](/reference/react-dom/server)を使用している場合、React コンポーネントは初期 HTML を生成するためにブラウザ環境外でも実行されます。これにより、外部ストアへの接続に関するいくつかの課題が生じます。 -- If you're connecting to a browser-only API, it won't work because it does not exist on the server. -- If you're connecting to a third-party data store, you'll need its data to match between the server and client. +- ブラウザ専用の API に接続している場合、それはサーバ上では存在しないため動作しません。 +- サードパーティのデータストアに接続している場合、サーバとクライアント間でそのデータを一致させる必要があります。 -To solve these issues, pass a `getServerSnapshot` function as the third argument to `useSyncExternalStore`: +これらの問題を解決するために、`useSyncExternalStore` に `getServerSnapshot` 関数を第 3 引数として渡します： ```js {4,12-14} import { useSyncExternalStore } from 'react'; @@ -336,26 +336,26 @@ function subscribe(callback) { } ``` -The `getServerSnapshot` function is similar to `getSnapshot`, but it runs only in two situations: +`getServerSnapshot` 関数は `getSnapshot` と似ていますが、以下の 2 つの状況でのみ実行されます： -- It runs on the server when generating the HTML. -- It runs on the client during [hydration](/reference/react-dom/client/hydrateRoot), i.e. when React takes the server HTML and makes it interactive. +- サーバ上で、HTML を生成する際に実行される。 +- クライアント上で、React がサーバ HTML をインタラクティブにするとき、つまり[ハイドレーション](/reference/react-dom/client/hydrateRoot)中に実行される。 -This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) +これにより、アプリがインタラクティブになる前に使用される初期のスナップショット値を指定できます。サーバレンダリング中に意味のある初期値が存在しない場合は、この引数を省略して、[強制的にクライアントでレンダーする](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)ようにします。 -Make sure that `getServerSnapshot` returns the same exact data on the initial client render as it returned on the server. For example, if `getServerSnapshot` returned some prepopulated store content on the server, you need to transfer this content to the client. One way to do this is to emit a `