From 4ed56222e11ef8131f6b1648d326f71109065617 Mon Sep 17 00:00:00 2001 From: riku929hr <33782267+riku929hr@users.noreply.github.com> Date: Mon, 14 Aug 2023 23:20:48 +0900 Subject: [PATCH 1/6] chatgpt translation and textlint --- src/content/reference/react-dom/hydrate.md | 68 +++++++++++----------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 639c7ab25..9f7ba2021 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -4,15 +4,15 @@ title: hydrate -This API will be removed in a future major version of React. +この API は、将来のメジャーバージョンの React で削除される予定です。 -In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) +React 18 では、`hydrate` は [`hydrateRoot` に置き換えられました。](/reference/react-dom/client/hydrateRoot)React 18 で `hydrate` を使用すると、アプリが React 17 で実行されているかのように動作することを警告します。詳細は[こちらをご覧ください。](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) -`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below. +`hydrate` を使用すると、React 17 以前で [`react-dom/server`](/reference/react-dom/server) によって以前に生成されたブラウザの DOM ノードの HTML コンテンツ内に React コンポーネントを表示できます。 ```js hydrate(reactNode, domNode, callback?) @@ -24,11 +24,11 @@ hydrate(reactNode, domNode, callback?) --- -## Reference {/*reference*/} +## 参照 {/*reference*/} ### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/} -Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment. +React 17 以前では、`hydrate` を呼び出して、サーバー環境で既に React によってレンダリングされた既存の HTML に React を「アタッチ」します。 ```js import { hydrate } from 'react-dom'; @@ -36,33 +36,33 @@ import { hydrate } from 'react-dom'; hydrate(reactNode, domNode); ``` -React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component. +React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM を管理します。React で完全に構築されたアプリは通常、ルートコンポーネントを持つ 1 つの `hydrate` 呼び出しのみを持ちます。 -[See more examples below.](#usage) +[以下にさらなる例を参照してください。](#usage) -#### Parameters {/*parameters*/} +#### パラメータ {/*parameters*/} -* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `` which was rendered with a `ReactDOM Server` method such as `renderToString()` in React 17. +* `reactNode`: 既存の HTML をレンダーするために使用される「React ノード」。これは通常、React 17 で `ReactDOM Server` のメソッド（例：`renderToString()`）でレンダリングされた JSX の一部である``のようなものです。 -* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server. +* `domNode`: サーバー上でルート要素としてレンダリングされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 -* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated. +* **オプション**: `callback`: 関数。渡された場合、React はコンポーネントのハイドレーション後にそれを呼び出します。 -#### Returns {/*returns*/} +#### 戻り値 {/*returns*/} -`hydrate` returns null. +`hydrate` は null を返します。 -#### Caveats {/*caveats*/} -* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them. -* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive. -* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you. -* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead. +#### 注意事項 {/*caveats*/} +* `hydrate` は、レンダリングされたコンテンツがサーバーでレンダリングされたコンテンツと同一であることを期待しています。React はテキストコンテンツの違いを修正できますが、不一致はバグとして扱い修正する必要があります。 +* 開発モードでは、React はハイドレーション中の不一致について警告します。不一致の場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。ほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになります。 +* アプリには通常、1 つの `hydrate` 呼び出しだけが存在するでしょう。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。 +* HTML が既にレンダリングされていないクライアントレンダリングの場合、`hydrate()` はサポートされていません。代わりに、React 17 以前では [render()](/reference/react-dom/render)、React 18 以降では [createRoot()](/reference/react-dom/client/createRoot) を使用してください。 --- -## Usage {/*usage*/} +## 使用方法 {/*usage*/} -Call `hydrate` to attach a React component into a server-rendered browser DOM node. +`hydrate` を呼び出して、React コンポーネントをサーバーレンダリングされた ブラウザの DOM ノードにアタッチします。 ```js [[1, 3, ""], [2, 3, "document.getElementById('root')"]] import { hydrate } from 'react-dom'; @@ -70,13 +70,13 @@ import { hydrate } from 'react-dom'; hydrate(, document.getElementById('root')); ``` -Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead. +`hydrate()` を使用して、クライアントのみのアプリ（サーバーレンダリングされた HTML がないアプリ）をレンダーすることはサポートされていません。代わりに、React 17 以前では [`render()`](/reference/react-dom/render)、React 18+ では [`createRoot()`](/reference/react-dom/client/createRoot) を使用してください。 -### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/} +### サーバーレンダリングされた HTML のハイドレーション {/*hydrating-server-rendered-html*/} -In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client. +React では、「ハイドレーション」とは、サーバー環境で既に React によってレンダリングされた既存の HTML に React が「アタッチ」する方法です。ハイドレーション中、React は既存のマークアップにイベントリスナをアタッチし、クライアントでアプリをレンダーします。 -In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**. +React で完全に構築されたアプリでは、**通常、アプリ全体の起動時に 1 つの「ルート」をハイドレートするだけです**。 @@ -104,17 +104,17 @@ export default function App() { -Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState) +通常、`hydrate` を再度呼び出す必要はなく、複数の場所で呼び出す必要もありません。この時点から、React がアプリケーションの DOM を管理します。UI を更新するには、コンポーネントが [ステートを使用します。](/reference/react/useState) -For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) +ハイドレーションに関する詳細は、[`hydrateRoot` のドキュメント](/reference/react-dom/client/hydrateRoot)を参照してください。 --- -### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### 避けられないハイドレーションの不一致エラーの抑制 {/*suppressing-unavoidable-hydration-mismatch-errors*/} -If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning. +サーバーとクライアントの間で、単一の要素の属性やテキストコンテンツが避けられない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーションの不一致警告を抑制することができます。 -To silence hydration warnings on an element, add `suppressHydrationWarning={true}`: +要素のハイドレーション警告を抑制するには、`suppressHydrationWarning={true}` を追加します。 @@ -146,13 +146,13 @@ export default function App() { -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. +これは 1 レベルの深さまでしか機能せず、エスケープハッチとしての使用を意図しています。過度に使用しないでください。テキストコンテンツ以外の場合、React はそれを修正しようとはせず、将来のアップデートまで一貫性が保たれない可能性があります。 --- -### Handling different client and server content {/*handling-different-client-and-server-content*/} +### クライアントとサーバのコンテンツの処理 {/*handling-different-client-and-server-content*/} -If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect): +サーバとクライアントで意図的に異なるものをレンダーする必要がある場合、2 回のレンダリングを行うことができます。クライアントで異なるものをレンダーするコンポーネントは、[state 変数](/reference/react/useState)である `isClient` を読み取ることができます。この変数は、[effect](/reference/react/useEffect) 内で `true` に設定することができます。 @@ -192,10 +192,10 @@ export default function App() { -This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. +この方法では、初回のレンダリングはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加のパスが同期的にハイドレーションの直後に行われます。 -This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user. +このアプローチはハイドレーションを遅くするため、コンポーネントは 2 回レンダーする必要があります。低速な接続の場合、ユーザエクスペリエンスに注意してください。JavaScript コードは初回の HTML レンダリングよりもかなり遅く読み込まれる場合があるため、ユーザにとってハイドレーション直後に異なる UI をレンダーすることは違和感を感じるかもしれません。 From 219d37562b307d021224362639b32825483d0c14 Mon Sep 17 00:00:00 2001 From: riku929hr <33782267+riku929hr@users.noreply.github.com> Date: Tue, 15 Aug 2023 22:42:51 +0900 Subject: [PATCH 2/6] fix translation --- src/content/reference/react-dom/hydrate.md | 54 +++++++++++----------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 9f7ba2021..b2e999ccc 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -4,9 +4,9 @@ title: hydrate -この API は、将来のメジャーバージョンの React で削除される予定です。 +この API は、今後のメジャーバージョンの React で削除される予定です。 -React 18 では、`hydrate` は [`hydrateRoot` に置き換えられました。](/reference/react-dom/client/hydrateRoot)React 18 で `hydrate` を使用すると、アプリが React 17 で実行されているかのように動作することを警告します。詳細は[こちらをご覧ください。](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) +React 18 では、`hydrate` は [`hydrateRoot` に置き換えられました。](/reference/react-dom/client/hydrateRoot)React 18 で `hydrate` を使用すると、アプリは React 17 を実行しているかのような振る舞いになるとの警告が表示されます。詳細は[こちらをご覧ください。](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) @@ -24,11 +24,11 @@ hydrate(reactNode, domNode, callback?) --- -## 参照 {/*reference*/} +## リファレンス {/*reference*/} ### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/} -React 17 以前では、`hydrate` を呼び出して、サーバー環境で既に React によってレンダリングされた既存の HTML に React を「アタッチ」します。 +React 17 以前では、`hydrate` を呼び出して、サーバー環境で既に React がレンダーした既存の HTML に React を「アタッチ」します。 ```js import { hydrate } from 'react-dom'; @@ -38,29 +38,29 @@ hydrate(reactNode, domNode); React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM を管理します。React で完全に構築されたアプリは通常、ルートコンポーネントを持つ 1 つの `hydrate` 呼び出しのみを持ちます。 -[以下にさらなる例を参照してください。](#usage) +[さらに例を読む](#usage) -#### パラメータ {/*parameters*/} +#### 引数 {/*parameters*/} -* `reactNode`: 既存の HTML をレンダーするために使用される「React ノード」。これは通常、React 17 で `ReactDOM Server` のメソッド（例：`renderToString()`）でレンダリングされた JSX の一部である``のようなものです。 +* `reactNode`: 既存の HTML をレンダーするのに使用される「React ノード」。これは通常、React 17 における `ReactDOM Server` のメソッド（例：`renderToString()`）でレンダーされた JSX の一部である``のようなものです。 -* `domNode`: サーバー上でルート要素としてレンダリングされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 +* `domNode`: サーバー上でルート要素としてレンダーされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 -* **オプション**: `callback`: 関数。渡された場合、React はコンポーネントのハイドレーション後にそれを呼び出します。 +* **省略可能**: `callback`: 関数。渡された場合、React はコンポーネントのハイドレーション後にそれを呼び出します。 -#### 戻り値 {/*returns*/} +#### 返り値 {/*returns*/} `hydrate` は null を返します。 -#### 注意事項 {/*caveats*/} -* `hydrate` は、レンダリングされたコンテンツがサーバーでレンダリングされたコンテンツと同一であることを期待しています。React はテキストコンテンツの違いを修正できますが、不一致はバグとして扱い修正する必要があります。 -* 開発モードでは、React はハイドレーション中の不一致について警告します。不一致の場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。ほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになります。 -* アプリには通常、1 つの `hydrate` 呼び出しだけが存在するでしょう。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。 -* HTML が既にレンダリングされていないクライアントレンダリングの場合、`hydrate()` はサポートされていません。代わりに、React 17 以前では [render()](/reference/react-dom/render)、React 18 以降では [createRoot()](/reference/react-dom/client/createRoot) を使用してください。 +#### 注意点 {/*caveats*/} +* `hydrate` は、レンダーされたコンテンツが、サーバーでレンダーされたコンテンツと同一であることを期待しています。React はテキストコンテンツの差異を修正できますが、不一致はバグとして扱い修正する必要があります。 +* 開発モードでは、React はハイドレーション中の不一致について警告します。不一致が発生した場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。なぜならほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになるからです。 +* アプリには通常、1 つだけ `hydrate` 呼び出しが存在するでしょう。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。 +* HTML が既にレンダーされていないクライアントレンダリングの場合、`hydrate()` はサポートされていません。代わりに、React 17 以前では [render()](/reference/react-dom/render)、React 18 以降では [createRoot()](/reference/react-dom/client/createRoot) を使用してください。 --- -## 使用方法 {/*usage*/} +## 使用法 {/*usage*/} `hydrate` を呼び出して、React コンポーネントをサーバーレンダリングされた ブラウザの DOM ノードにアタッチします。 @@ -70,13 +70,13 @@ import { hydrate } from 'react-dom'; hydrate(, document.getElementById('root')); ``` -`hydrate()` を使用して、クライアントのみのアプリ（サーバーレンダリングされた HTML がないアプリ）をレンダーすることはサポートされていません。代わりに、React 17 以前では [`render()`](/reference/react-dom/render)、React 18+ では [`createRoot()`](/reference/react-dom/client/createRoot) を使用してください。 +`hydrate()` を使用して、クライアントのみのアプリ（サーバーレンダリングされた HTML がないアプリ）をレンダーすることはサポートされていません。代わりに、React 17 以前では [`render()`](/reference/react-dom/render)、React 18 以降では [`createRoot()`](/reference/react-dom/client/createRoot) を使用してください。 ### サーバーレンダリングされた HTML のハイドレーション {/*hydrating-server-rendered-html*/} -React では、「ハイドレーション」とは、サーバー環境で既に React によってレンダリングされた既存の HTML に React が「アタッチ」する方法です。ハイドレーション中、React は既存のマークアップにイベントリスナをアタッチし、クライアントでアプリをレンダーします。 +React では、「ハイドレーション」とは、サーバー環境の React によって既にレンダリングされた既存の HTML に React が「アタッチ」する方法を指します。ハイドレーション中、React は既存のマークアップにイベントリスナをアタッチし、クライアントでアプリをレンダーします。 -React で完全に構築されたアプリでは、**通常、アプリ全体の起動時に 1 つの「ルート」をハイドレートするだけです**。 +React で完全に構築されたアプリでは、**通常、アプリ全体の起動時に 1 つの「ルート」を一度だけハイドレートします**。 @@ -104,15 +104,15 @@ export default function App() { -通常、`hydrate` を再度呼び出す必要はなく、複数の場所で呼び出す必要もありません。この時点から、React がアプリケーションの DOM を管理します。UI を更新するには、コンポーネントが [ステートを使用します。](/reference/react/useState) +通常、`hydrate` を再度呼び出したり、複数の場所で呼び出したりする必要はありません。ここから先は、React がアプリケーションの DOM を管理しています。UI を更新するには、コンポーネントは [state を使うことになるでしょう。](/reference/react/useState) ハイドレーションに関する詳細は、[`hydrateRoot` のドキュメント](/reference/react-dom/client/hydrateRoot)を参照してください。 --- -### 避けられないハイドレーションの不一致エラーの抑制 {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### やむを得ないハイドレーションの不一致エラーの抑制 {/*suppressing-unavoidable-hydration-mismatch-errors*/} -サーバーとクライアントの間で、単一の要素の属性やテキストコンテンツが避けられない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーションの不一致警告を抑制することができます。 +サーバーとクライアントの間で、単一の要素の属性やテキストコンテンツがやむを得ない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーションの不一致警告を抑制することができます。 要素のハイドレーション警告を抑制するには、`suppressHydrationWarning={true}` を追加します。 @@ -146,13 +146,13 @@ export default function App() { -これは 1 レベルの深さまでしか機能せず、エスケープハッチとしての使用を意図しています。過度に使用しないでください。テキストコンテンツ以外の場合、React はそれを修正しようとはせず、将来のアップデートまで一貫性が保たれない可能性があります。 +これはレベル 1 の深さまでしか機能せず、避難ハッチとしての使用を意図しています。過度に使用しないでください。テキストコンテンツ以外の場合、React はそれを修正しようとはせず、将来の更新まで一貫性が保たれない可能性があります。 --- -### クライアントとサーバのコンテンツの処理 {/*handling-different-client-and-server-content*/} +### クライアントとサーバで異なるコンテンツの処理 {/*handling-different-client-and-server-content*/} -サーバとクライアントで意図的に異なるものをレンダーする必要がある場合、2 回のレンダリングを行うことができます。クライアントで異なるものをレンダーするコンポーネントは、[state 変数](/reference/react/useState)である `isClient` を読み取ることができます。この変数は、[effect](/reference/react/useEffect) 内で `true` に設定することができます。 +サーバとクライアントで意図的に異なるものをレンダーする必要がある場合、2 回のレンダーを行うことができます。クライアントで異なるものをレンダーするコンポーネントは、以下の `isClient` のような [state 変数](/reference/react/useState)を読み取ることができます。この変数は、[effect](/reference/react/useEffect) 内で `true` に設定することができます。 @@ -192,10 +192,10 @@ export default function App() { -この方法では、初回のレンダリングはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加のパスが同期的にハイドレーションの直後に行われます。 +この方法では、初回のレンダーはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加のパスがハイドレーションの直後に同期的に行われます。 -このアプローチはハイドレーションを遅くするため、コンポーネントは 2 回レンダーする必要があります。低速な接続の場合、ユーザエクスペリエンスに注意してください。JavaScript コードは初回の HTML レンダリングよりもかなり遅く読み込まれる場合があるため、ユーザにとってハイドレーション直後に異なる UI をレンダーすることは違和感を感じるかもしれません。 +このアプローチはハイドレーションを遅くするため、コンポーネントは 2 回レンダーする必要があります。低速な接続の場合、ユーザ体験に注意してください。JavaScript コードは初回の HTML レンダーよりもかなり遅く読み込まれる場合があるため、ユーザにとってハイドレーション直後に異なる UI をレンダーすることは違和感を感じるかもしれません。 From c0b7bc5bf58d0cfd04033035041625bca8b9cb08 Mon Sep 17 00:00:00 2001 From: riku929hr <33782267+riku929hr@users.noreply.github.com> Date: Sun, 20 Aug 2023 23:23:46 +0900 Subject: [PATCH 3/6] fix after review --- src/content/reference/react-dom/hydrate.md | 34 +++++++++++----------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index b2e999ccc..33dab59b6 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -12,7 +12,7 @@ React 18 では、`hydrate` は [`hydrateRoot` に置き換えられました。 -`hydrate` を使用すると、React 17 以前で [`react-dom/server`](/reference/react-dom/server) によって以前に生成されたブラウザの DOM ノードの HTML コンテンツ内に React コンポーネントを表示できます。 +`hydrate` を使用すると、React 17 以前の [`react-dom/server`](/reference/react-dom/server) によって事前生成した HTML コンテンツが含まれるブラウザ DOM ノード内に、React コンポーネントを表示できます。 ```js hydrate(reactNode, domNode, callback?) @@ -28,7 +28,7 @@ hydrate(reactNode, domNode, callback?) ### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/} -React 17 以前では、`hydrate` を呼び出して、サーバー環境で既に React がレンダーした既存の HTML に React を「アタッチ」します。 +React 17 以前の環境で `hydrate` を呼び出して、サーバ環境で事前に React がレンダーした HTML に対して React を「アタッチ」します。 ```js import { hydrate } from 'react-dom'; @@ -36,17 +36,17 @@ import { hydrate } from 'react-dom'; hydrate(reactNode, domNode); ``` -React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM を管理します。React で完全に構築されたアプリは通常、ルートコンポーネントを持つ 1 つの `hydrate` 呼び出しのみを持ちます。 +React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM を管理します。React で完全に構築されたアプリには、ルートコンポーネントを引数にした `hydrate` 呼び出しが通常 1 つのみ存在します。 [さらに例を読む](#usage) #### 引数 {/*parameters*/} -* `reactNode`: 既存の HTML をレンダーするのに使用される「React ノード」。これは通常、React 17 における `ReactDOM Server` のメソッド（例：`renderToString()`）でレンダーされた JSX の一部である``のようなものです。 +* `reactNode`: 既存の HTML をレンダーするのに使用される「React ノード」。これは通常、React 17 における `ReactDOM Server` のメソッド（例：`renderToString()`）でレンダーされた JSX のである``のようなものです。 -* `domNode`: サーバー上でルート要素としてレンダーされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 +* `domNode`: サーバ上でルート要素としてレンダーされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 -* **省略可能**: `callback`: 関数。渡された場合、React はコンポーネントのハイドレーション後にそれを呼び出します。 +* **省略可能** `callback`: 関数。渡された場合、React はコンポーネントのハイドレーション後にそれを呼び出します。 #### 返り値 {/*returns*/} @@ -55,14 +55,14 @@ React は、`domNode` 内に存在する HTML にアタッチし、その内部 #### 注意点 {/*caveats*/} * `hydrate` は、レンダーされたコンテンツが、サーバーでレンダーされたコンテンツと同一であることを期待しています。React はテキストコンテンツの差異を修正できますが、不一致はバグとして扱い修正する必要があります。 * 開発モードでは、React はハイドレーション中の不一致について警告します。不一致が発生した場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。なぜならほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになるからです。 -* アプリには通常、1 つだけ `hydrate` 呼び出しが存在するでしょう。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。 +* アプリには通常、`hydrate` 呼び出しは 1 つだけ存在します。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。 * HTML が既にレンダーされていないクライアントレンダリングの場合、`hydrate()` はサポートされていません。代わりに、React 17 以前では [render()](/reference/react-dom/render)、React 18 以降では [createRoot()](/reference/react-dom/client/createRoot) を使用してください。 --- ## 使用法 {/*usage*/} -`hydrate` を呼び出して、React コンポーネントをサーバーレンダリングされた ブラウザの DOM ノードにアタッチします。 +`hydrate` を呼び出して、React コンポーネントをサーバでレンダーされたブラウザの DOM ノードにアタッチします。 ```js [[1, 3, ""], [2, 3, "document.getElementById('root')"]] import { hydrate } from 'react-dom'; @@ -70,13 +70,13 @@ import { hydrate } from 'react-dom'; hydrate(, document.getElementById('root')); ``` -`hydrate()` を使用して、クライアントのみのアプリ（サーバーレンダリングされた HTML がないアプリ）をレンダーすることはサポートされていません。代わりに、React 17 以前では [`render()`](/reference/react-dom/render)、React 18 以降では [`createRoot()`](/reference/react-dom/client/createRoot) を使用してください。 +`hydrate()` を使用して、クライアントのみのアプリ（サーバでレンダーされた HTML がないアプリ）をレンダーすることはサポートされていません。代わりに、React 17 以前では [`render()`](/reference/react-dom/render)、React 18 以降では [`createRoot()`](/reference/react-dom/client/createRoot) を使用してください。 -### サーバーレンダリングされた HTML のハイドレーション {/*hydrating-server-rendered-html*/} +### サーバでレンダーされた HTML のハイドレーション {/*hydrating-server-rendered-html*/} -React では、「ハイドレーション」とは、サーバー環境の React によって既にレンダリングされた既存の HTML に React が「アタッチ」する方法を指します。ハイドレーション中、React は既存のマークアップにイベントリスナをアタッチし、クライアントでアプリをレンダーします。 +React では、"ハイドレーション (hydration)" とは、サーバ環境の React によって事前レンダーされている HTML に React が「アタッチ」することを指します。ハイドレーション中、React は既存のマークアップにイベントリスナをアタッチし、アプリのレンダー処理をクライアントに引き継ぎます。 -React で完全に構築されたアプリでは、**通常、アプリ全体の起動時に 1 つの「ルート」を一度だけハイドレートします**。 +React で完全に構築されたアプリでは、**通常、アプリ全体の起動時に 1 つの「ルート」のハイドレーションを一度だけ行います**。 @@ -110,7 +110,7 @@ export default function App() { --- -### やむを得ないハイドレーションの不一致エラーの抑制 {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### やむを得ないハイドレーション不一致エラーの抑制 {/*suppressing-unavoidable-hydration-mismatch-errors*/} サーバーとクライアントの間で、単一の要素の属性やテキストコンテンツがやむを得ない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーションの不一致警告を抑制することができます。 @@ -146,13 +146,13 @@ export default function App() { -これはレベル 1 の深さまでしか機能せず、避難ハッチとしての使用を意図しています。過度に使用しないでください。テキストコンテンツ以外の場合、React はそれを修正しようとはせず、将来の更新まで一貫性が保たれない可能性があります。 +これは単一レベルの深さまでしか機能せず、避難ハッチとしての使用を意図しています。過度に使用しないでください。これを使用してもテキストコンテンツ以外の場合は React は違いを修正しようとはしないため、将来の更新まで一貫性が保たれない可能性があります。 --- ### クライアントとサーバで異なるコンテンツの処理 {/*handling-different-client-and-server-content*/} -サーバとクライアントで意図的に異なるものをレンダーする必要がある場合、2 回のレンダーを行うことができます。クライアントで異なるものをレンダーするコンポーネントは、以下の `isClient` のような [state 変数](/reference/react/useState)を読み取ることができます。この変数は、[effect](/reference/react/useEffect) 内で `true` に設定することができます。 +サーバとクライアントで意図的に異なるものをレンダーする必要がある場合、2 回に分けたレンダーを行うことができます。クライアントで異なるものをレンダーするコンポーネントは、`isClient` のような [state 変数](/reference/react/useState)を読み取るようにし、この変数を[エフェクト](/reference/react/useEffect)内で `true` に設定することができます。 @@ -192,10 +192,10 @@ export default function App() { -この方法では、初回のレンダーはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加のパスがハイドレーションの直後に同期的に行われます。 +この方法では、初回のレンダーはサーバと同じコンテンツをレンダーし、不一致を回避しますが、追加のレンダーがハイドレーションの直後に同期的に行われます。 -このアプローチはハイドレーションを遅くするため、コンポーネントは 2 回レンダーする必要があります。低速な接続の場合、ユーザ体験に注意してください。JavaScript コードは初回の HTML レンダーよりもかなり遅く読み込まれる場合があるため、ユーザにとってハイドレーション直後に異なる UI をレンダーすることは違和感を感じるかもしれません。 +このアプローチではコンポーネントを 2 回レンダーする必要があるためハイドレーションが遅くなります。低速な接続の場合、ユーザ体験に注意してください。JavaScript コードは初期レンダーされた HTML よりもかなり遅く読み込まれる場合があるため、ハイドレーション直後に異なる UI をレンダーするとユーザに不快感を与えるかもしれません。 From de82398650767e4e8deeed442b54a6a79468ca9f Mon Sep 17 00:00:00 2001 From: riku929hr <33782267+riku929hr@users.noreply.github.com> Date: Tue, 22 Aug 2023 21:18:43 +0900 Subject: [PATCH 4/6] fix --- src/content/reference/react-dom/hydrate.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 33dab59b6..eed33b4bf 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -36,13 +36,13 @@ import { hydrate } from 'react-dom'; hydrate(reactNode, domNode); ``` -React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM を管理します。React で完全に構築されたアプリには、ルートコンポーネントを引数にした `hydrate` 呼び出しが通常 1 つのみ存在します。 +React は、`domNode` 内に存在する HTML にアタッチし、その内部の DOM の管理を引き継ぎます。React で完全に構築されたアプリには、ルートコンポーネントを引数にした `hydrate` 呼び出しが通常 1 つのみ存在します。 -[さらに例を読む](#usage) +[さらに例を見る](#usage) #### 引数 {/*parameters*/} -* `reactNode`: 既存の HTML をレンダーするのに使用される「React ノード」。これは通常、React 17 における `ReactDOM Server` のメソッド（例：`renderToString()`）でレンダーされた JSX のである``のようなものです。 +* `reactNode`: 既存の HTML をレンダーするのに使用される "React ノード"。これは通常、`ReactDOM Server` のメソッド（例：React 17 の `renderToString()`）でレンダーされた JSX である``のようなものです。 * `domNode`: サーバ上でルート要素としてレンダーされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 From cfadc24ae21b9f8ffce40187761ba857aaa4d557 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Wed, 23 Aug 2023 11:26:04 +0900 Subject: [PATCH 5/6] Apply suggestions from code review --- src/content/reference/react-dom/hydrate.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index eed33b4bf..572667734 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -53,10 +53,10 @@ React は、`domNode` 内に存在する HTML にアタッチし、その内部 `hydrate` は null を返します。 #### 注意点 {/*caveats*/} -* `hydrate` は、レンダーされたコンテンツが、サーバーでレンダーされたコンテンツと同一であることを期待しています。React はテキストコンテンツの差異を修正できますが、不一致はバグとして扱い修正する必要があります。 +* `hydrate` は、レンダーされたコンテンツが、サーバでレンダーされたコンテンツと同一であることを期待しています。React はテキストコンテンツの差異を修正できますが、不一致はバグとして扱い修正する必要があります。 * 開発モードでは、React はハイドレーション中の不一致について警告します。不一致が発生した場合、属性の違いが修正される保証はありません。これはパフォーマンス上の理由から重要です。なぜならほとんどのアプリでは、不一致はまれであり、すべてのマークアップを検証することは非常に高コストになるからです。 * アプリには通常、`hydrate` 呼び出しは 1 つだけ存在します。フレームワークを使用している場合、フレームワークがこの呼び出しを行うかもしれません。 -* HTML が既にレンダーされていないクライアントレンダリングの場合、`hydrate()` はサポートされていません。代わりに、React 17 以前では [render()](/reference/react-dom/render)、React 18 以降では [createRoot()](/reference/react-dom/client/createRoot) を使用してください。 +* アプリがクライアントでレンダーする形式であり、事前レンダーされた HTML がない場合、`hydrate()` は使用できません。代わりに、React 17 以前では [render()](/reference/react-dom/render)、React 18 以降では [createRoot()](/reference/react-dom/client/createRoot) を使用してください。 --- @@ -112,7 +112,7 @@ export default function App() { ### やむを得ないハイドレーション不一致エラーの抑制 {/*suppressing-unavoidable-hydration-mismatch-errors*/} -サーバーとクライアントの間で、単一の要素の属性やテキストコンテンツがやむを得ない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーションの不一致警告を抑制することができます。 +サーバとクライアントの間で、単一の要素の属性やテキストコンテンツがやむを得ない理由で異なる場合（たとえば、タイムスタンプなど）、ハイドレーションの不一致警告を抑制することができます。 要素のハイドレーション警告を抑制するには、`suppressHydrationWarning={true}` を追加します。 From bcc86a8e399e3541b8470bce68a8853e00f93e95 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 27 Aug 2023 16:54:49 +0900 Subject: [PATCH 6/6] Small tweak for consistency --- src/content/reference/react-dom/hydrate.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 572667734..537f6fe1a 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -42,7 +42,7 @@ React は、`domNode` 内に存在する HTML にアタッチし、その内部 #### 引数 {/*parameters*/} -* `reactNode`: 既存の HTML をレンダーするのに使用される "React ノード"。これは通常、`ReactDOM Server` のメソッド（例：React 17 の `renderToString()`）でレンダーされた JSX である``のようなものです。 +* `reactNode`: 既存の初期 HTML をレンダーするのに使用された "React ノード"。これは通常、`ReactDOM Server` のメソッド（例：React 17 の `renderToString()`）でレンダーされた JSX、例えば `` になります。 * `domNode`: サーバ上でルート要素としてレンダーされた [DOM 要素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 @@ -196,6 +196,6 @@ export default function App() { -このアプローチではコンポーネントを 2 回レンダーする必要があるためハイドレーションが遅くなります。低速な接続の場合、ユーザ体験に注意してください。JavaScript コードは初期レンダーされた HTML よりもかなり遅く読み込まれる場合があるため、ハイドレーション直後に異なる UI をレンダーするとユーザに不快感を与えるかもしれません。 +このアプローチではコンポーネントを 2 回レンダーする必要があるためハイドレーションが遅くなります。低速な接続におけるユーザ体験に注意してください。JavaScript コードは初期レンダーされた HTML よりもかなり遅く読み込まれる場合があるため、ハイドレーション直後に異なる UI をレンダーするとユーザに不快感を与えるかもしれません。