From e59453d289ac007f193fa1633819d85d4b5d192f Mon Sep 17 00:00:00 2001 From: Koji Ishimoto Date: Wed, 25 Dec 2024 14:15:36 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=9A=E3=82=A4=E3=83=B3=E3=83=88?= =?UTF-8?q?=E3=81=AE=E7=BF=BB=E8=A8=B3=E3=82=92=E6=8F=8F=E7=94=BB=E3=81=B8?= =?UTF-8?q?=E3=81=A8=E7=B5=B1=E4=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/render-and-commit.md | 8 ++++---- src/content/learn/understanding-your-ui-as-a-tree.md | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index ca43b9a62..7a6f99db6 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -194,11 +194,12 @@ export default function App() { これが上手く動作するのは、最終ステップで React によって更新されるのが、新しい `time` の値で更新される `

` の中身だけだからです。`` は JSX 内で前回と同じ場所にあるので、React は `` やその `value` に触れません！ -## エピローグ：ブラウザのペイント {/*epilogue-browser-paint*/} -レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「ペイント」と呼ぶことにします。 +## エピローグ：ブラウザの描画 {/*epilogue-browser-paint*/} - +レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「描画」と呼ぶことにします。 + + @@ -210,4 +211,3 @@ export default function App() { * レンダー結果が前回と同一である場合、React は DOM を触らない。 - diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 4dfb2fc76..38535160a 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -293,7 +293,7 @@ React アプリにおいて、ツリー構造で関係性をモデル化でき * レンダーツリーの概念は、トップレベルとリーフコンポーネントを特定するのに役立つ。トップレベルのコンポーネントはそれらの下の全コンポーネントのレンダーパフォーマンスに影響を与え、リーフコンポーネントは頻繁に再レンダーされる。これらを把握することでレンダーパフォーマンスの理解とデバッグに役立つ。 * 依存関係ツリーは、React アプリ内のモジュール依存関係を表現する。 * 依存関係ツリーは、アプリを届けるために必要なコードをバンドルするビルドツールによって使用される。 -* 依存関係ツリーは、ペイントまでの時間を遅らせるバンドルサイズの問題をデバッグしたり、どのコードをバンドル対象とするか最適化するきっかけとなることに役立つ。 +* 依存関係ツリーは、描画までの時間を遅らせるバンドルサイズの問題をデバッグしたり、どのコードをバンドル対象とするか最適化するきっかけとなることに役立つ。 From 4185564bb9823ec9c04b90f9b489d2a44b402be3 Mon Sep 17 00:00:00 2001 From: Koji Ishimoto Date: Mon, 30 Dec 2024 20:30:05 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=E6=94=B9=E8=A1=8C=E3=81=AE=E4=BB=95?= =?UTF-8?q?=E6=96=B9=E3=82=92=E5=8E=9F=E6=96=87=E3=81=A8=E5=90=8C=E3=81=98?= =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/render-and-commit.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 7a6f99db6..acc8ce3de 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -194,7 +194,6 @@ export default function App() { これが上手く動作するのは、最終ステップで React によって更新されるのが、新しい `time` の値で更新される `

` の中身だけだからです。`` は JSX 内で前回と同じ場所にあるので、React は `` やその `value` に触れません！ - ## エピローグ：ブラウザの描画 {/*epilogue-browser-paint*/} レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「描画」と呼ぶことにします。 From c05039de621f4993e0bbb4c3c2117875ed20ca5f Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 5 Oct 2026 17:23:42 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Unify=20translation=20of=20"paint"=20to=20?= =?UTF-8?q?=E3=83=9A=E3=82=A4=E3=83=B3=E3=83=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../blog/2023/03/16/introducing-react-dev.md | 2 +- src/content/blog/2024/12/05/react-19.md | 4 ++-- .../learn/build-a-react-app-from-scratch.md | 2 +- src/content/learn/render-and-commit.md | 7 +++--- .../learn/understanding-your-ui-as-a-tree.md | 2 +- src/content/reference/react/Component.md | 6 ++--- src/content/reference/react/hooks.md | 2 +- src/content/reference/react/useEffect.md | 8 +++---- .../reference/react/useLayoutEffect.md | 24 +++++++++---------- 9 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index dad81d189..37ada4468 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -449,7 +449,7 @@ export default function PackingList() { -ドキュメントの中にはイラストもいくつかあります。こちらは[ブラウザが画面を描画しているイラスト](/learn/render-and-commit#epilogue-browser-paint)となります： +ドキュメントの中にはイラストもいくつかあります。こちらは[ブラウザが画面をペイントしているイラスト](/learn/render-and-commit#epilogue-browser-paint)となります： diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 0620a9a5f..4c9538f26 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -626,7 +626,7 @@ function ComponentTwo() { } ``` -サーバサイドレンダリングの場合、React は `` にスタイルシートを含めることで、それをブラウザがロードするまで描画が起きないことを保証します。ストリーミングを既に開始した後でスタイルシートが見つかった場合でも、React はサスペンスバウンダリ内でスタイルシートに依存するコンテンツが表示される前に、クライアントの `` にそのスタイルシートが挿入されることを保証します。 +サーバサイドレンダリングの場合、React は `` にスタイルシートを含めることで、それをブラウザがロードするまでペイントが起きないことを保証します。ストリーミングを既に開始した後でスタイルシートが見つかった場合でも、React はサスペンスバウンダリ内でスタイルシートに依存するコンテンツが表示される前に、クライアントの `` にそのスタイルシートが挿入されることを保証します。 クライアントサイドレンダリングの場合、React は新しくレンダーされたスタイルシートが読み込まれるのを待ってからレンダーをコミットします。そのコンポーネントをアプリケーション内の複数の場所からレンダーする場合でも、React はドキュメントにスタイルシートを一度だけ挿入します。 @@ -675,7 +675,7 @@ function App() { すべてのレンダー環境で非同期スクリプトの重複解消処理が行われます。複数の異なるコンポーネントが同じスクリプトをレンダーしている場合でも、React はそれを一度だけ読み込み、実行します。 -サーバサイドレンダリングでは、非同期スクリプトは `` に挿入され、描画をブロックするスタイルシート・フォント・画像プリロードなどのより重要なリソースよりも低優先度で処理されます。 +サーバサイドレンダリングでは、非同期スクリプトは `` に挿入され、ペイントをブロックするスタイルシート・フォント・画像プリロードなどのより重要なリソースよりも低優先度で処理されます。 詳細については、[`