Merge pull request #1008 from reactjs/tr/react-dom-browser

Translate "browser"

Author: honey32

src/content/reference/react-dom/browser.md

@@ -4,7 +4,7 @@ title: browser
 
 <Intro>
 
-`browser` lets you mark a component as browser-only during server rendering.
+`browser` を使うことで、サーバレンダリング中にコンポーネントをブラウザ専用としてマークできます。
 
 ```js
 use(browser(reason?))
@@ -16,11 +16,11 @@ use(browser(reason?))
 
 ---
 
-## Reference {/*reference*/}
+## リファレンス {/*reference*/}
 
 ### `browser(reason?)` {/*browser*/}
 
-Call `browser` inside [`use`](/reference/react/use) to mark a component as browser-only during server rendering:
+[`use`](/reference/react/use) の中で `browser` を呼び出して、サーバレンダリング中にコンポーネントをブラウザ専用としてマークします。
 
 ```js
 import { use } from 'react';
@@ -32,35 +32,35 @@ function BrowserOnly() {
 }
 ```
 
-During server rendering, `use(browser())` stops rendering the component and leaves the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in its place. In the browser, `use(browser())` returns `undefined`, so the component renders normally.
+サーバレンダリング中の場合、`use(browser())` はコンポーネントのレンダーを中断し、代わりに最も近い [`<Suspense>`](/reference/react/Suspense) バウンダリによるフォールバックが表示されるようにします。ブラウザでは、`use(browser())` は `undefined` を返し、コンポーネントは通常通りレンダーされます。
 
-[See more examples below.](#usage)
+[さらに例を見る](#usage)
 
-#### Parameters {/*parameters*/}
+#### 引数 {/*parameters*/}
 
-* **optional** `reason`: A string or function that explains why the content needs to render in the browser. The string or the function's return value becomes the `cause` of the `Error` passed to [`onBrowserBailout`](#reporting-browser-only-rendering-on-the-server). React calls a reason function each time a server renderer encounters the value returned by `browser`, but does not call it in the browser. If creating the reason is expensive, pass a function such as `() => new Error(...)`.
+* **省略可能** `reason`: コンテンツをブラウザでレンダーする必要がある理由を説明する文字列または関数。この文字列、または関数の返り値が、[`onBrowserBailout`](#reporting-browser-only-rendering-on-the-server) に渡される `Error` の `cause` になります。サーバレンダラが `browser` の返り値を処理するたびに、React は理由を生成する関数を呼び出します。ブラウザでは呼び出されません。理由の生成にコストがかかる場合に `() => new Error(...)` のような関数を渡すようにしてください。
 
-#### Returns {/*returns*/}
+#### 返り値 {/*returns*/}
 
-`browser` returns an opaque value that you can pass to `use` in a component or use as the reason when [aborting a server render](#aborting-pending-server-rendering-for-the-browser). In the browser, passing this value to `use` returns `undefined`.
+`browser` は、内部構造が非公開の値を返します。この値は、コンポーネント内で `use` に渡すことや、[サーバでのレンダーを中止する](#aborting-pending-server-rendering-for-the-browser)際の理由として使うことが可能です。ブラウザでは、この値を `use` に渡すと `undefined` が返されます。
 
-#### Caveats {/*caveats*/}
+#### 注意点 {/*caveats*/}
 
-* `use(browser())` must be inside a `<Suspense>` boundary during server rendering. Without one, the server render fails.
-* `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components).
-* Calling `browser()` by itself has no effect. To mark a component as browser-only, pass the value returned by `browser` to `use`. Do not throw it.
+* サーバレンダリング中は、`use(browser())` が `<Suspense>` バウンダリ内にある必要があります。バウンダリがない場合、サーバでのレンダーは失敗します。
+* `use(browser())` は、[クライアントコンポーネント](/reference/rsc/use-client)から呼び出す必要があります。[サーバコンポーネント](/reference/rsc/server-components)からは呼び出せません。
+* `browser()` を単独で呼び出しても何も起きません。コンポーネントをブラウザ専用としてマークするには、`browser` の返した値を `use` に渡してください。この値をスローしないでください。
 
 ---
 
-## Usage {/*usage*/}
+## 使用法 {/*usage*/}
 
-### Rendering content only in the browser {/*rendering-content-only-in-the-browser*/}
+### ブラウザでのみコンテンツをレンダーする {/*rendering-content-only-in-the-browser*/}
 
-Call `browser` inside `use` in a component that should only render in the browser:
+ブラウザでのみレンダーされるべきコンポーネント内で、`use` の中で `browser` を呼び出します。
 
-You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering.
+これは、`typeof window` を確認する、マウント済み state が[エフェクト](/reference/react/useEffect)で設定されるまで待機する、フレームワークのオプションでサーバレンダリングを無効にする、といったテクニックの代わりに使用できるものです。
 
-Click **Reload** to see the loading fallback in the initial HTML. After hydration, React displays the draft loaded from `localStorage`.
+以下の例で **Reload** をクリックすると、初期 HTML 内のローディングフォールバックを確認できます。ハイドレーション後、React は `localStorage` から読み込んだ下書きを表示します。
 
 <Sandpack>
 
@@ -206,7 +206,7 @@ iframe {
 
 <Note>
 
-`use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component:
+`use(browser())` は、クライアントコンポーネントから呼び出す必要があります。フレームワークがデフォルトでサーバコンポーネントを使う場合は、そのファイルに [`'use client'`](/reference/rsc/use-client) ディレクティブを追加するか、呼び出しを子のクライアントコンポーネントに移してください。
 
 ```js {1}
 'use client';
@@ -225,13 +225,13 @@ export default function SavedDraft() {
 
 ---
 
-### Conditionally rendering on the server {/*conditionally-rendering-on-the-server*/}
+### サーバでのレンダーを条件付きで行う {/*conditionally-rendering-on-the-server*/}
 
-Like other calls to [`use`](/reference/react/use), `use(browser())` can be called inside a conditional statement or after an early return. This lets a Component or custom Hook opt out of server rendering based on a condition, such as the value of a prop.
+他の [`use`](/reference/react/use) の呼び出しと同様に、`use(browser())` は条件文の中や早期リターンの後でも呼び出せます。これにより、props の値などの条件に基づいて、コンポーネントやカスタムフックをサーバレンダリングの対象から除外できます。
 
-For example, this `useTimeZone` Hook accepts an optional default value. When provided, React renders the default value in the initial HTML and in the browser. Without a default value, the Component suspends during server rendering and shows the device's local time zone in the browser.
+例えば、以下の `useTimeZone` フックは、省略可能なデフォルト値を受け取ります。React はデフォルト値が渡されるとその値を初期 HTML とブラウザで表示します。デフォルト値がない場合、コンポーネントはサーバレンダリング中にサスペンドし、ブラウザではデバイスのローカルタイムゾーンを表示します。
 
-Click **Reload** to see the loading fallback before the user's time zone appears.
+**Reload** をクリックすると、ユーザのタイムゾーンが表示される前のローディングフォールバックを確認できます。
 
 <Sandpack>
 
@@ -371,7 +371,7 @@ iframe {
 
 </Sandpack>
 
-You can apply a similar pattern to conditionally avoid server rendering when using a Suspense-enabled data-fetching library:
+サスペンス対応のデータ取得ライブラリを使う場合も、同様のパターンで条件に応じてサーバレンダリングを回避できます。
 
 ```js {3}
 function useBrowserQuery(query, options) {
@@ -391,13 +391,13 @@ function ProductDetails({ productId, initialData }) {
 }
 ```
 
-With `initialData`, React renders the Component to HTML on the server. Without it, React leaves the closest [`<Suspense>`](/reference/react/Suspense) boundary's fallback in the HTML. In the browser, `useQuery` can fetch the data or read it from its client cache as usual.
+`initialData` がある場合、React はサーバでコンポーネントを HTML にレンダーします。ない場合は、最も近い [`<Suspense>`](/reference/react/Suspense) バウンダリのフォールバックを HTML に残します。ブラウザでは、`useQuery` が通常通りデータを取得したり、クライアント側のキャッシュから読み取ったりできます。
 
 ---
 
-### Reporting browser-only rendering on the server {/*reporting-browser-only-rendering-on-the-server*/}
+### サーバでブラウザ専用レンダーの発生を通知させる {/*reporting-browser-only-rendering-on-the-server*/}
 
-Pass an `onBrowserBailout` callback to the server renderer to report browser-only rendering. When React leaves a Suspense fallback for the browser, it does not call the server renderer's `onError` callback or [`hydrateRoot`'s `onRecoverableError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production) callback. This example also passes a reason, which is available as the reported error's `cause`:
+サーバレンダラに `onBrowserBailout` コールバックを渡すことで、ブラウザ専用レンダーが発生したことを通知させられます。React がサスペンスフォールバックを残してブラウザに引き継ぐ場合、サーバレンダラの `onError` コールバックや、[`hydrateRoot` の `onRecoverableError`](/reference/react-dom/client/hydrateRoot#error-logging-in-production) コールバックは呼び出されません。以下の例では理由も渡しており、報告されるエラーの `cause` として取得できます。
 
 ```js
 import { Suspense, use, useState } from 'react';
@@ -428,20 +428,20 @@ const { pipe } = renderToPipeableStream(<App />, {
 });
 ```
 
-`onBrowserBailout` receives two arguments:
+`onBrowserBailout` は 2 つの引数を受け取ります。
 
-1. An `Error` describing the browser-only render. If you passed a reason to `browser`, it is available as the error's `cause`.
-2. An `errorInfo` object with a `componentStack` showing where browser-only rendering occurred.
+1. ブラウザ専用レンダーが発生したことを説明する `Error`。`browser` に理由を渡してあった場合、このエラーの `cause` として取得できます。
+2. ブラウザ専用レンダーがどこで発生したかを示す `componentStack` を持つ `errorInfo` オブジェクト。
 
-The reason function can return any value. Return a new `Error` to give the cause its own stack without creating the `Error` in the browser. React does not serialize the reason into the HTML.
+理由を生成する関数は、どのような値でも返せます。新しい `Error` を返す関数を使えば、原因を表すエラーに独自スタックを持たせつつ、ブラウザでは `Error` を作成しないようにできます。React は理由を HTML にシリアライズしません。
 
-If there is no Suspense boundary to provide a fallback, the server render fails. React reports the failure through the renderer's usual error callbacks instead of `onBrowserBailout`.
+フォールバックを表示するサスペンスバウンダリがない場合、サーバでのレンダーは失敗します。React は `onBrowserBailout` ではなく、レンダラの通常のエラーコールバックを通じて失敗を報告します。
 
 ---
 
-### Aborting pending server rendering for the browser {/*aborting-pending-server-rendering-for-the-browser*/}
+### 未完了のサーバレンダリングを中止してブラウザに引き継ぐ {/*aborting-pending-server-rendering-for-the-browser*/}
 
-If you call a server rendering API directly, you can stop waiting for pending content and let the browser finish rendering it. Pass the value returned by `browser` as the reason when aborting the server render. React then leaves pending Suspense boundaries in their fallback state and renders their content in the browser:
+サーバレンダリング API を直接呼び出している場合、まだ完了していないコンテンツの待機をやめて、ブラウザにレンダー完了を引き継がせることが可能です。サーバでのレンダーを中止する際に、`browser` の返した値を理由として渡してください。すると React は、まだ完了していないサスペンスバウンダリをフォールバックの状態のまま残し、そのコンテンツをブラウザでレンダーします。
 
 ```js {1,8}
 import { browser } from 'react-dom';
@@ -457,6 +457,6 @@ const { pipe, abort } = renderToPipeableStream(<App />, {
 });
 ```
 
-A `browser` abort reason does not trigger the server renderer's `onError` callback or `hydrateRoot`'s `onRecoverableError` callback. Instead, the server renderer reports each recovered Suspense boundary to `onBrowserBailout`.
+中止の理由として `browser` の返した値を使っても、サーバレンダラの `onError` コールバックや、`hydrateRoot` の `onRecoverableError` コールバックは呼び出されません。代わりに、サーバレンダラは復帰した各サスペンスバウンダリを `onBrowserBailout` に報告します。
 
-For server rendering APIs that accept an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), pass `browser()` as the reason to [`AbortController.abort`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort).
+[`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) を受け取るサーバレンダリング API では、[`AbortController.abort`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort) に中止の理由として `browser()` を渡してください。