From 9f1ff8ca1401dd27ba55329e730bb4462c73956d Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Mon, 16 Jun 2025 17:35:39 +0900 Subject: [PATCH] Resolve conflicts --- src/content/blog/2024/12/05/react-19.md | 4 --- .../learn/referencing-values-with-refs.md | 6 +--- .../reference/react-dom/createPortal.md | 6 +--- .../reference/react-dom/static/prerender.md | 11 ------- .../react-dom/static/prerenderToNodeStream.md | 9 ------ src/content/reference/react/apis.md | 9 ------ src/content/reference/react/createContext.md | 30 +++++-------------- src/content/reference/react/legacy.md | 11 +------ src/content/reference/react/useContext.md | 30 ++++--------------- src/content/reference/rsc/server-functions.md | 4 --- .../components-and-hooks-must-be-pure.md | 13 -------- 11 files changed, 15 insertions(+), 118 deletions(-) diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index 80ba921df..f9f21c1e0 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -410,11 +410,7 @@ function MyInput({placeholder, ref}) { -<<<<<<< HEAD クラスに渡された `ref` はコンポーネントインスタンスを参照するため、props としては渡されません。 -======= -`ref`s passed to classes are not passed as props since they reference the component instance. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 37519718a..22d6e81a6 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -464,11 +464,7 @@ export default function Toggle() { #### デバウンスの修正 {/*fix-debouncing*/} -<<<<<<< HEAD -この例では、すべてのボタンクリックハンドラが ["デバウンス (debounce)"](https://redd.one/blog/debounce-vs-throttle) されています。この意味を確認するために、ボタンのうちの 1 つを押してみてください。メッセージが 1 秒後に表示されることに気付くでしょう。メッセージを待っている間にボタンを押すと、タイマがリセットされます。ですので、同じボタンを素早く何度もクリックし続けると、メッセージはクリックを*やめた* 1 秒後まで表示されません。デバウンスにより、ユーザが「操作をやめる」まであるアクションを遅らせることができます。 -======= -In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 +この例では、すべてのボタンクリックハンドラが ["デバウンス (debounce)"](https://kettanaito.com/blog/debounce-vs-throttle) されています。この意味を確認するために、ボタンのうちの 1 つを押してみてください。メッセージが 1 秒後に表示されることに気付くでしょう。メッセージを待っている間にボタンを押すと、タイマがリセットされます。ですので、同じボタンを素早く何度もクリックし続けると、メッセージはクリックを*やめた* 1 秒後まで表示されません。デバウンスにより、ユーザが「操作をやめる」まであるアクションを遅らせることができます。 この例は動作していますが、意図した通りではありません。ボタンが独立していないのです。問題を確認するために、ボタンのうちの 1 つをクリックし、すぐに別のボタンをクリックしてみてください。遅延の後、両方のボタンのメッセージが表示されることを期待するでしょう。しかし、最後のボタンのメッセージだけが表示され、最初のボタンのメッセージは失われてしまいます。 diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 13af424db..457bc7b91 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -240,11 +240,7 @@ export default function ModalContent({ onClose }) { ポータルを使用する際には、アプリを正しくアクセシブルにすることが重要です。例えば、ユーザが自然にポータルの内または外へフォーカスを移動できるよう、キーボードフォーカスを管理する必要があるかもしれません。 -<<<<<<< HEAD -モーダルを作成する際には、[WAI-ARIA のモーダル作成実践ガイド](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)に従ってください。コミュニティパッケージを使用する場合は、それがアクセシブルであり、このガイドラインに従っていることを確認してください。 -======= -Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 +モーダルを作成する際には、[WAI-ARIA のモーダル作成実践ガイド](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal)に従ってください。コミュニティパッケージを使用する場合は、それがアクセシブルであり、このガイドラインに従っていることを確認してください。 diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index 348a973f4..96aa2b8e0 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -68,11 +68,7 @@ async function handler(request) { #### 注意点 {/*caveats*/} -<<<<<<< HEAD プリレンダー中に `nonce` オプションは利用できません。nonce はリクエストごとに一意である必要があり、[CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) でアプリケーションを保護するために nonce を使用する場合、プリレンダー自体に nonce 値を含めることは不適切かつ危険です。 -======= -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 @@ -321,13 +317,6 @@ async function renderToString() { ### アプリ全体がレンダーされるまでストリームが始まらない {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/} -<<<<<<< HEAD `prerender` の返り値は解決する前に、全サスペンスバウンダリが解決することも含む、アプリ全体のレンダーの終了を待機します。これは事前静的サイト生成 (SSG) のために設計されているものであり、コンテンツを読み込みながらのストリーミングをサポートしません。 コンテンツを読み込みながらストリームしたい場合は、サーバレンダー API である [renderToReadableStream](/reference/react-dom/server/renderToReadableStream) などを使用してください。 - -======= -The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. - -To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream). ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index 0731d9290..dd5ad9e3f 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -69,11 +69,7 @@ app.use('/', async (request, response) => { #### 注意点 {/*caveats*/} -<<<<<<< HEAD プリレンダー中に `nonce` オプションは利用できません。nonce はリクエストごとに一意である必要があり、[CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) でアプリケーションを保護するために nonce を使用する場合、プリレンダー自体に nonce 値を含めることは不適切かつ危険です。 -======= -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 @@ -323,9 +319,4 @@ async function renderToString() { `prerenderToNodeStream` の返り値は解決する前に、全サスペンスバウンダリが解決することも含む、アプリ全体のレンダーの終了を待機します。これは事前静的サイト生成 (SSG) のために設計されているものであり、コンテンツを読み込みながらのストリーミングをサポートしません。 -<<<<<<< HEAD コンテンツを読み込みながらストリームしたい場合は、サーバレンダー API である [renderToReadableStream](/reference/react-dom/server/renderToReadableStream) などを使用してください。 - -======= -To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream). ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index 4630cafc0..b3dec06bb 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -10,20 +10,11 @@ title: "React の組み込み API" --- -<<<<<<< HEAD * [`createContext`](/reference/react/createContext) を利用すると、子コンポーネントに対してコンテクストを定義および提供できます。[`useContext`](/reference/react/useContext) と一緒に使用されます。 -* [`forwardRef`](/reference/react/forwardRef) を利用すると、コンポーネントの DOM ノードを ref として親に公開できます。[`useRef`](/reference/react/useRef) と一緒に使用されます。 * [`lazy`](/reference/react/lazy) を利用すると、コンポーネントのコードの読み込みを初回レンダーまで遅延することができます。 * [`memo`](/reference/react/memo) を利用すると、同じ props を持つコンポーネントの再レンダーをスキップできます。[`useMemo`](/reference/react/useMemo) や [`useCallback`](/reference/react/useCallback) と一緒に使用されます。 * [`startTransition`](/reference/react/startTransition) を使うと、state の更新を低緊急度 (non-urgent) としてマークできます。[`useTransition`](/reference/react/useTransition) に似ています。 * [`act`](/reference/react/act) を使うと、テスト環境でレンダーやユーザ操作をラップして、アサーションを行う前に更新が確実に処理されるようにします。 -======= -* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) -* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. -* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) -* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) -* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index daeb7668c..74704246d 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -38,22 +38,15 @@ const ThemeContext = createContext('light'); `createContext` はコンテクストオブジェクトを返します。 -<<<<<<< HEAD -**コンテクストオブジェクト自体は情報を持っていません**。他のコンポーネントが*どの*コンテクストを読み取るか、または提供するかを表します。通常、上位のコンポーネントで [`SomeContext.Provider`](#provider) を使用してコンテクストの値を指定し、下位のコンポーネントで [`useContext(SomeContext)`](/reference/react/useContext) を呼び出してコンテクストを読み取ります。コンテクストオブジェクトにはいくつかのプロパティがあります： +**コンテクストオブジェクト自体は情報を持っていません**。他のコンポーネントが*どの*コンテクストを読み取るか、または提供するかを表します。通常、上位のコンポーネントで [`SomeContext`](#provider) を使用してコンテクストの値を指定し、下位のコンポーネントで [`useContext(SomeContext)`](/reference/react/useContext) を呼び出してコンテクストを読み取ります。コンテクストオブジェクトにはいくつかのプロパティがあります： -* `SomeContext.Provider` では、コンポーネントにコンテクストの値を提供できます。 +* `SomeContext` で、コンポーネントにコンテクストの値を提供できます。 * `SomeContext.Consumer` は、コンテクストの値を読み取るための方法ですが、あまり使用されません。 -======= -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: - -* `SomeContext` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. -* `SomeContext.Provider` is a legacy way to provide the context value before React 19. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 +* `SomeContext.Provider` は、React 19 より前のバージョンでコンテクストの値を提供するためのレガシーな記法です。 --- -### `SomeContext` Provider {/*provider*/} +### `SomeContext` プロバイダ {/*provider*/} コンポーネントをコンテクストプロバイダでラップすると、内部のコンポーネントに対してこのコンテクストの値を指定できます。 @@ -69,19 +62,15 @@ function App() { } ``` -<<<<<<< HEAD -#### props {/*provider-props*/} -======= -Starting in React 19, you can render `` as a provider. +React 19 以降では、`` 自体をプロバイダとしてレンダーできます。 -In older versions of React, use ``. +以前のバージョンでは、代わりに `` を使用してください。 -#### Props {/*provider-props*/} ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 +#### props {/*provider-props*/} * `value`: このプロバイダの内側（深さに関わらず）にあるコンポーネントがコンテクストを読み取る際に、渡したい値です。コンテクストの値は任意の型にすることができます。プロバイダ内で [`useContext(SomeContext)`](/reference/react/useContext) を呼び出しているコンポーネントは、それより上位かつ最も内側にある対応するコンテクストプロバイダの `value` を受け取ります。 @@ -233,9 +222,4 @@ const ThemeContext = createContext('light'); この値は決して変わりません。React は、対応するプロバイダを上位のコンポーネントで見つけられない場合にのみ、この値をフォールバックとして使用します。 -<<<<<<< HEAD コンテクストを時間の経過とともに変化させるには、[state を追加し、コンポーネントをコンテクストプロバイダでラップ](/reference/react/useContext#updating-data-passed-via-context)します。 - -======= -To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context) ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md index 1ba1dd10d..80ef462a6 100644 --- a/src/content/reference/react/legacy.md +++ b/src/content/reference/react/legacy.md @@ -27,18 +27,9 @@ title: "レガシー React API" 以下の API は React 19 で削除されました。 -<<<<<<< HEAD * [`createFactory`](https://18.react.dev/reference/react/createFactory): 代わりに JSX を使用してください。 * クラスコンポーネントの [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): 代わりに [`static contextType`](#static-contexttype) を使用してください。 * クラスコンポーネントの [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): 代わりに [`static contextType`](#static-contexttype) を使用してください。 -* クラスコンポーネントの [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): 代わりに [`Context.Provider`](/reference/react/createContext#provider) を使用してください。 +* クラスコンポーネントの [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): 代わりに [`Context`](/reference/react/createContext#provider) を使用してください。 * クラスコンポーネントの [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): 代わりに [TypeScript](https://www.typescriptlang.org/) などの型システムを使用してください。 * クラスコンポーネントの [`this.refs`](https://18.react.dev//reference/react/Component#refs): 代わりに [`createRef`](/reference/react/createRef) を使用してください。 -======= -* [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead. -* Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead. -* Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead. -* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context`](/reference/react/createContext#provider) instead. -* Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead. -* Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index f71003e9a..78e9240ca 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -38,23 +38,13 @@ function MyComponent() { #### 返り値 {/*returns*/} -<<<<<<< HEAD -`useContext` は、呼び出したコンポーネントに対応するコンテクストの値を返します。値は、ツリー内で `useContext` を呼び出したコンポーネントの上位かつ最も近い `SomeContext.Provider` に渡された `value` として決定されます。そのようなプロバイダが存在しない場合は、返り値はそのコンテクストの [`createContext`](/reference/react/createContext) に渡した `defaultValue` になります。返り値は常にコンテクストの最新の値です。React は、コンテクストに変更があると、それを読み取っているコンポーネントを自動的に再レンダーします。 -======= -`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 +`useContext` は、呼び出したコンポーネントに対応するコンテクストの値を返します。値は、ツリー内で `useContext` を呼び出したコンポーネントの上位かつ最も近い `SomeContext` に渡された `value` として決定されます。そのようなプロバイダが存在しない場合は、返り値はそのコンテクストの [`createContext`](/reference/react/createContext) に渡した `defaultValue` になります。返り値は常にコンテクストの最新の値です。React は、コンテクストに変更があると、それを読み取っているコンポーネントを自動的に再レンダーします。 #### 注意点 {/*caveats*/} -<<<<<<< HEAD -* コンポーネントの `useContext()` 呼び出しは、*同じ*コンポーネントから返されるプロバイダの影響を受けません。対応する `` は、`useContext()` を呼び出すコンポーネントの***上*にある**必要があります。 +* コンポーネントの `useContext()` 呼び出しは、*同じ*コンポーネントから返されるプロバイダの影響を受けません。対応する `` は、`useContext()` を呼び出すコンポーネントの***上*にある**必要があります。 * あるコンテクストのプロバイダが異なる `value` を受け取ると、当該プロバイダより下にありそのコンテクストを使用しているすべての子コンポーネントは、React によって**自動的に再レンダーされます**。前の値と次の値は、[`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) で比較されます。[`memo`](/reference/react/memo) を使って再レンダーをスキップする場合でも、子コンポーネントがコンテクストから新しい値を受け取ることによる再レンダーは妨げられません。 * ビルドシステムが生成する出力の中にモジュールの重複がある場合（シンボリックリンクで起こり得る場合がある）、コンテクストが壊れる可能性があります。コンテクストを介した値の受け渡しが動作するのは、コンテクストを提供するために使用する `SomeContext` と、読み込むために使用する `SomeContext` が、`===` による比較で***厳密*に同じオブジェクト**である場合のみです。 -======= -* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. -* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values. -* If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 --- @@ -1359,15 +1349,9 @@ function MyApp() { これが起こる一般的な理由はいくつかあります： -<<<<<<< HEAD -1. `useContext()` を呼び出しているコンポーネントと同じ（または下位の）コンポーネントで `` をレンダーしている。`` を `useContext()` を呼び出すコンポーネントの*外側かつ上位*に移動してください。 -2. コンポーネントを `` でラップし忘れているか、ツリー内の思っているのとは違う場所に配置してしまっている。[React DevTools](/learn/react-developer-tools) を使ってツリー階層が正しいか確認してみてください。 +1. `useContext()` を呼び出しているコンポーネントと同じ（または下位の）コンポーネントで `` をレンダーしている。`` を `useContext()` を呼び出すコンポーネントの*外側かつ上位*に移動してください。 +2. コンポーネントを `` でラップし忘れているか、ツリー内の思っているのとは違う場所に配置してしまっている。[React DevTools](/learn/react-developer-tools) を使ってツリー階層が正しいか確認してみてください。 3. プロバイダコンポーネントから見た `SomeContext` と、利用側のコンポーネントから見た `SomeContext` が、ビルドツールの問題により 2 つの異なるオブジェクトになっている。これは例えば、シンボリックリンクを使用している場合などに発生します。これを確認するために、それらを `window.SomeContext1` や `window.SomeContext2` のようなグローバル変数に割り当て、コンソールで `window.SomeContext1 === window.SomeContext2` が成り立つか確認してみてください。もし同一でないなら、ビルドツールのレベルで、その問題を修正する必要があります。 -======= -1. You're rendering `` in the same component (or below) as where you're calling `useContext()`. Move `` *above and outside* the component calling `useContext()`. -2. You may have forgotten to wrap your component with ``, or you might have put it in a different part of the tree than you thought. Check whether the hierarchy is right using [React DevTools.](/learn/react-developer-tools) -3. You might be running into some build issue with your tooling that causes `SomeContext` as seen from the providing component and `SomeContext` as seen by the reading component to be two different objects. This can happen if you use symlinks, for example. You can verify this by assigning them to globals like `window.SomeContext1` and `window.SomeContext2` and then checking whether `window.SomeContext1 === window.SomeContext2` in the console. If they're not the same, fix that issue on the build tool level. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 ### 違うデフォルト値を指定しているのにコンテクストから常に `undefined` が返ってくる {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/} @@ -1400,8 +1384,4 @@ function MyApp() { ``` -<<<<<<< HEAD -[createContext(defaultValue) で指定するデフォルト値](#specifying-a-fallback-default-value)は、ツリーの上側に**一致するプロバイダが一切存在しない場合**にのみ使用されることに注意してください。親のツリーのどこかに `` のようなコンポーネントがあれば、`useContext(SomeContext)` を呼び出すコンポーネントはコンテクスト値として*その* `undefined` を受け取ります。 -======= -Note that the [default value from your `createContext(defaultValue)` call](#specifying-a-fallback-default-value) is only used **if there is no matching provider above at all.** If there is a `` component somewhere in the parent tree, the component calling `useContext(SomeContext)` *will* receive `undefined` as the context value. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 +[createContext(defaultValue) で指定するデフォルト値](#specifying-a-fallback-default-value)は、ツリーの上側に**一致するプロバイダが一切存在しない場合**にのみ使用されることに注意してください。親のツリーのどこかに `` のようなコンポーネントがあれば、`useContext(SomeContext)` を呼び出すコンポーネントはコンテクスト値として*その* `undefined` を受け取ります。 diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index f28697623..0542860b9 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -28,11 +28,7 @@ React 19 のサーバ関数は安定しており、マイナーバージョン -<<<<<<< HEAD サーバ関数が `"use server"` ディレクティブを付けて定義されると、フレームワークは自動的にそのサーバ関数への参照を作成し、その参照をクライアントコンポーネントに渡します。クライアントでこの関数が呼び出されると、React はサーバにリクエストを送信して元の関数を実行し、その結果を返します。 -======= -When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 サーバアクションはサーバコンポーネント内で作成し、クライアントコンポーネントに props として渡すことができます。また、クライアントコンポーネントで直接インポートして使用することも可能です。 diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index 93f928444..ad6a07f8e 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -206,13 +206,8 @@ function ProductDetailPage({ product }) { props と state の値は、レンダーが終わってから更新されるスナップショットと考えることができます。したがって props や state 変数を直接書き換えることはありません。代わりに新しい props を渡すか、あるいはセッタ関数を使用して React に state をコンポーネントの次回レンダー時に更新する必要があると伝えます。 -<<<<<<< HEAD ### props を書き換えない {/*props*/} props はイミュータブルです。props を変更すると、アプリケーションが一貫性のない出力を生成し、状況によって動作したりしなかったりするためデバッグが困難になるからです。 -======= -### Don't mutate Props {/*props*/} -Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug as it may or may not work depending on the circumstances. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 ```js {2} function Post({ item }) { @@ -312,11 +307,7 @@ function useIconStyle(icon) { } ``` -<<<<<<< HEAD フックの引数を書き換えた場合、カスタムフック内のメモ化が正しく動作しなくなります。これを避けることが重要です。 -======= -If you were to mutate the Hook's arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 ```js {4} style = useIconStyle(icon); // `style` is memoized based on `icon` @@ -336,11 +327,7 @@ style = useIconStyle(icon); // new value of `style` is calculated ## JSX に渡された値はイミュータブル {/*values-are-immutable-after-being-passed-to-jsx*/} -<<<<<<< HEAD JSX で使用された後に値を書き換えてはいけません。ミューテーションは JSX が作成される前に行ってください。 -======= -Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created. ->>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 式として JSX を使用する際、React はコンポーネントのレンダーが完了する前に JSX を先行して評価してしまうかもしれません。つまり JSX に渡された後で値を変更した場合、React がコンポーネントの出力を更新する必要があることを認識しないため、古い UI が表示され続ける可能性があるということです。