Merge pull request #816 from dowdiness/paint

paintの翻訳として使われているペイントを描画へと統一しました

Author: honey32

src/content/blog/2023/03/16/introducing-react-dev.md

@@ -449,7 +449,7 @@ export default function PackingList() {
 
 </Diagram>
 
-ドキュメントの中にはイラストもいくつかあります。こちらは[ブラウザが画面を描画しているイラスト](/learn/render-and-commit#epilogue-browser-paint)となります：
+ドキュメントの中にはイラストもいくつかあります。こちらは[ブラウザが画面をペイントしているイラスト](/learn/render-and-commit#epilogue-browser-paint)となります：
 
 <Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />
 

src/content/blog/2024/12/05/react-19.md

@@ -626,7 +626,7 @@ function ComponentTwo() {
 }
 ```
 
-サーバサイドレンダリングの場合、React は `<head>` にスタイルシートを含めることで、それをブラウザがロードするまで描画が起きないことを保証します。ストリーミングを既に開始した後でスタイルシートが見つかった場合でも、React はサスペンスバウンダリ内でスタイルシートに依存するコンテンツが表示される前に、クライアントの `<head>` にそのスタイルシートが挿入されることを保証します。
+サーバサイドレンダリングの場合、React は `<head>` にスタイルシートを含めることで、それをブラウザがロードするまでペイントが起きないことを保証します。ストリーミングを既に開始した後でスタイルシートが見つかった場合でも、React はサスペンスバウンダリ内でスタイルシートに依存するコンテンツが表示される前に、クライアントの `<head>` にそのスタイルシートが挿入されることを保証します。
 
 クライアントサイドレンダリングの場合、React は新しくレンダーされたスタイルシートが読み込まれるのを待ってからレンダーをコミットします。そのコンポーネントをアプリケーション内の複数の場所からレンダーする場合でも、React はドキュメントにスタイルシートを一度だけ挿入します。
 
@@ -675,7 +675,7 @@ function App() {
 
 すべてのレンダー環境で非同期スクリプトの重複解消処理が行われます。複数の異なるコンポーネントが同じスクリプトをレンダーしている場合でも、React はそれを一度だけ読み込み、実行します。
 
-サーバサイドレンダリングでは、非同期スクリプトは `<head>` に挿入され、描画をブロックするスタイルシート・フォント・画像プリロードなどのより重要なリソースよりも低優先度で処理されます。
+サーバサイドレンダリングでは、非同期スクリプトは `<head>` に挿入され、ペイントをブロックするスタイルシート・フォント・画像プリロードなどのより重要なリソースよりも低優先度で処理されます。
 
 詳細については、[`<script>`](/reference/react-dom/components/script) のドキュメントを参照してください。
 

src/content/learn/build-a-react-app-from-scratch.md

@@ -113,7 +113,7 @@ GraphQL API からデータを取得する場合、以下の使用をお勧め
 
 また、アプリが使っている独自フレームワークにコード分割を任せていると、コード分割がまったく行われていない場合より却って読み込みが遅くなるという状況に遭遇することがあります。例えば、チャートの[遅延読み込み](/reference/react/lazy)を使えば、チャートのコードをアプリの他の部分から分離し、チャートのレンダーに必要なコードだけ送信を遅らせることができます。[Parcel は React.lazy を使用したコード分割をサポートしています](https://parceljs.org/recipes/react/#code-splitting)。ところが、チャートのコード自身が初回レンダー後にデータを読み込む場合、2 回の待機が発生することになります。これがウォーターフォールです。チャートデータとそれを表示するためのコードを同時にフェッチするのではなく、各ステップが順番に完了するのを待たなければならないという状況です。
 
-ルートごとにコードを分割するだけでなく、バンドルやデータフェッチと統合することで、アプリの初期読み込み時間とアプリの最大可視コンテンツのレンダー時間 ([Largest Contentful Paint](https://web.dev/articles/lcp)) を短縮できます。
+ルートごとにコードを分割するだけでなく、バンドルやデータフェッチと統合することで、アプリの初期読み込み時間とアプリの最大可視コンテンツが描画されるまでの時間 ([Largest Contentful Paint](https://web.dev/articles/lcp)) を短縮できます。
 
 コード分割の手順については、ビルドツールのドキュメントを参照してください。
 - [Vite のビルド最適化](https://vite.dev/guide/features.html#build-optimizations)

src/content/learn/render-and-commit.md

@@ -196,7 +196,7 @@ export default function App() {
 これが上手く動作するのは、最終ステップで React によって更新されるのが、新しい `time` の値で更新される `<h1>` の中身だけだからです。`<input>` は JSX 内で前回と同じ場所にあるので、React は `<input>` やその `value` に触れません！
 ## エピローグ：ブラウザのペイント {/*epilogue-browser-paint*/}
 
-レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再描画します。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「ペイント」と呼ぶことにします。
+レンダーが完了し、React が DOM を更新した後、ブラウザは画面を再ペイントします。このプロセスは「ブラウザレンダリング」として知られていますが、我々は、混乱を避けるために、ドキュメント全体を通して「ペイント」と呼ぶことにします。
 
 <Illustration alt="ブラウザが「カード要素と静物画」をペイントしている" src="/images/docs/illustrations/i_browser-paint.png" />
 

src/content/reference/react/Component.md

@@ -286,7 +286,7 @@ class ChatRoom extends Component {
 
 <Note>
 
-多くのユースケースにおいて、クラスコンポーネントで `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` をまとめて定義することは、関数コンポーネントで [`useEffect`](/reference/react/useEffect) を呼び出すことと同等です。ブラウザの描画前にコードを実行することが重要となる稀なケースでは、[`useLayoutEffect`](/reference/react/useLayoutEffect) がより近いものになります。
+多くのユースケースにおいて、クラスコンポーネントで `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` をまとめて定義することは、関数コンポーネントで [`useEffect`](/reference/react/useEffect) を呼び出すことと同等です。ブラウザのペイント前にコードを実行することが重要となる稀なケースでは、[`useLayoutEffect`](/reference/react/useLayoutEffect) がより近いものになります。
 
 [移行方法を見る](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 
@@ -353,7 +353,7 @@ class ChatRoom extends Component {
 
 <Note>
 
-多くのユースケースにおいて、クラスコンポーネントで `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` をまとめて定義することは、関数コンポーネントで [`useEffect`](/reference/react/useEffect) を呼び出すことと同等です。ブラウザの描画前にコードを実行することが重要となる稀なケースでは、[`useLayoutEffect`](/reference/react/useLayoutEffect) がより近いものになります。
+多くのユースケースにおいて、クラスコンポーネントで `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` をまとめて定義することは、関数コンポーネントで [`useEffect`](/reference/react/useEffect) を呼び出すことと同等です。ブラウザのペイント前にコードを実行することが重要となる稀なケースでは、[`useLayoutEffect`](/reference/react/useLayoutEffect) がより近いものになります。
 
 [移行方法を見る](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 
@@ -446,7 +446,7 @@ class ChatRoom extends Component {
 
 <Note>
 
-多くのユースケースにおいて、クラスコンポーネントで `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` をまとめて定義することは、関数コンポーネントで [`useEffect`](/reference/react/useEffect) を呼び出すことと同等です。ブラウザの描画前にコードを実行することが重要となる稀なケースでは、[`useLayoutEffect`](/reference/react/useLayoutEffect) がより近いものになります。
+多くのユースケースにおいて、クラスコンポーネントで `componentDidMount`、`componentDidUpdate`、`componentWillUnmount` をまとめて定義することは、関数コンポーネントで [`useEffect`](/reference/react/useEffect) を呼び出すことと同等です。ブラウザのペイント前にコードを実行することが重要となる稀なケースでは、[`useLayoutEffect`](/reference/react/useLayoutEffect) がより近いものになります。
 
 [移行方法を見る](#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 

src/content/reference/react/hooks.md

@@ -76,7 +76,7 @@ function ChatRoom({ roomId }) {
 
 `useEffect` には、実行タイミングが異なり、まれに使われることのある 2 つのバリエーションがあります：
 
-* [`useLayoutEffect`](/reference/react/useLayoutEffect) はブラウザが画面を再描画する前に発火します。このフックでレイアウトを測定できます。
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) はブラウザが画面を再ペイントする前に発火します。このフックでレイアウトを測定できます。
 * [`useInsertionEffect`](/reference/react/useInsertionEffect) は React が DOM に変更を加える前に発火します。ライブラリは動的な CSS をこのフックで挿入できます。
 
 エフェクトからイベントを分離することもできます：

src/content/reference/react/useEffect.md

@@ -62,11 +62,11 @@ function ChatRoom({ roomId }) {
 
 * 依存配列の一部にコンポーネント内で定義されたオブジェクトや関数がある場合、**エフェクトが必要以上に再実行される**可能性があります。これを修正するには、[オブジェクト型](#removing-unnecessary-object-dependencies)および[関数型](#removing-unnecessary-function-dependencies)の不要な依存値を削除します。また、エフェクトの外部に [state の更新](#updating-state-based-on-previous-state-from-an-effect)や[非リアクティブなロジック](#reading-the-latest-props-and-state-from-an-effect)を抽出することもできます。
 
-* エフェクトがユーザ操作（クリックなど）によって引き起こされたものでない場合、React は通常、ブラウザが**新しい画面を描画した後にエフェクトを実行**します。あなたのエフェクトが（ツールチップの配置など）何か視覚的な作業を行っており遅延が目立つ場合（ちらつくなど）、`useEffect` を [`useLayoutEffect` に置き換えてください](/reference/react/useLayoutEffect)。
+* エフェクトがユーザ操作（クリックなど）によって引き起こされたものでない場合、React は通常、ブラウザが**新しい画面をペイントした後にエフェクトを実行**します。あなたのエフェクトが（ツールチップの配置など）何か視覚的な作業を行っており遅延が目立つ場合（ちらつくなど）、`useEffect` を [`useLayoutEffect` に置き換えてください](/reference/react/useLayoutEffect)。
 
-* エフェクトがユーザ操作（クリックなど）によって引き起こされた場合、**React はブラウザが更新後の画面を描画する前にエフェクトを実行することがあります**。これによりエフェクトの結果がイベントシステムに見えることが保証されます。これは通常は期待通りに動作します。しかし、`alert()` のように描画後まで作業を遅らせる必要がある場合は、`setTimeout` を使用できます。詳細については、[reactwg/react-18/128](https://github.com/reactwg/react-18/discussions/128) を参照してください。
+* エフェクトがユーザ操作（クリックなど）によって引き起こされた場合、**React はブラウザが更新後の画面をペイントする前にエフェクトを実行することがあります**。これによりエフェクトの結果がイベントシステムに見えることが保証されます。これは通常は期待通りに動作します。しかし、`alert()` のようにペイント後まで作業を遅らせる必要がある場合は、`setTimeout` を使用できます。詳細については、[reactwg/react-18/128](https://github.com/reactwg/react-18/discussions/128) を参照してください。
 
-* エフェクトがユーザ操作（クリックなど）によって引き起こされた場合、**React はエフェクト内で起きた state 更新を処理する前に、ブラウザに画面を再描画させる**ことがあります。これは通常は期待通りに動作します。しかし、ブラウザによる画面の再描画をブロックしなければならない場合は、`useEffect` を [`useLayoutEffect`](/reference/react/useLayoutEffect) に置き換える必要があります。
+* エフェクトがユーザ操作（クリックなど）によって引き起こされた場合、**React はエフェクト内で起きた state 更新を処理する前に、ブラウザに画面を再ペイントさせる**ことがあります。これは通常は期待通りに動作します。しかし、ブラウザによる画面の再ペイントをブロックしなければならない場合は、`useEffect` を [`useLayoutEffect`](/reference/react/useLayoutEffect) に置き換える必要があります。
 
 * エフェクトは**クライアント上でのみ実行されます**。サーバレンダリング中には実行されません。
 
@@ -1859,4 +1859,4 @@ useEffect(() => {
 
 ### エフェクトが表示に関することを行っており、実行前にちらつきが見られる {/*my-effect-does-something-visual-and-i-see-a-flicker-before-it-runs*/}
 
-エフェクトがブラウザの[画面描画をブロック](/learn/render-and-commit#epilogue-browser-paint)する必要がある場合は、`useEffect` の代わりに [`useLayoutEffect`](/reference/react/useLayoutEffect) を使用してください。ただし、これは**ほとんどのエフェクトには必要ない**ということに注意してください。これは、ブラウザ描画の前にエフェクトを実行することが重要な場合にのみ必要です。例えば、ユーザがツールチップを見る前に、ツールチップのサイズを測定して配置するために使用します。
+エフェクトがブラウザの[画面ペイントをブロック](/learn/render-and-commit#epilogue-browser-paint)する必要がある場合は、`useEffect` の代わりに [`useLayoutEffect`](/reference/react/useLayoutEffect) を使用してください。ただし、これは**ほとんどのエフェクトには必要ない**ということに注意してください。これは、ブラウザペイントの前にエフェクトを実行することが重要な場合にのみ必要です。例えば、ユーザがツールチップを見る前に、ツールチップのサイズを測定して配置するために使用します。