Resolve conflicts

Author: smikitky

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

@@ -17,11 +17,7 @@ December 05, 2024 by [The React Team](/community/team)
 - **サスペンド中のツリーのプリウォーム**：[サスペンスに関する改善](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense)
 - **静的サイト用の React DOM API**: [静的サイト用の新 DOM API](#new-react-dom-static-apis)
 
-<<<<<<< HEAD
 _この記事の投稿日時も、安定版リリースに合わせて変更となっています。_
-=======
-_The date for this post has been updated to reflect the stable release date._
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 </Note>
 
@@ -366,11 +362,7 @@ React 19 には、Canary チャンネルにあったすべての React Server Co
 
 #### サーバコンポーネントのサポートを追加する方法 {/*how-do-i-build-support-for-server-components*/}
 
-<<<<<<< HEAD
-React 19 の React Server Components は安定しており、メジャーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。
-=======
-While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+React 19 の React Server Components は安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。
 
 React Server Components をバンドラやフレームワークでサポートする場合は、特定の React バージョンに固定するか、Canary リリースを使用することをお勧めします。React Server Components を実装するために使用される API を安定化させるため、今後もバンドラやフレームワークと連携を続けていきます。
 

src/content/community/team.md

@@ -43,11 +43,7 @@ React コアチームのメンバーは、コアコンポーネントの API、R
 </TeamMember>
 
 <TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta">
-<<<<<<< HEAD
-    Lauren のプログラミングキャリアは `<marquee>` タグを初めて見たときにピークを迎えました。それ以来、彼女はその時の高揚感を追い続けています。大学ではコンピュータサイエンスではなく経済学を学んでいたため、コーディングは Java ではなく Excel で学びました。Lauren はチャットでお茶目なミームを投下したり、パートナとゲームを楽しんだり、犬の Zelda を可愛がったりするのが好きです。
-=======
-    Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+    Lauren のプログラミングキャリアは `<marquee>` タグを初めて見たときにピークを迎えました。それ以来、彼女はその時の高揚感を追い続けています。大学ではコンピュータサイエンスではなく経済学を学んでいたため、コーディングは Excel で学びました。Lauren はチャットでお茶目なミームを投下したり、パートナとゲームを楽しんだり、韓国語を学んだり、犬の Zelda を可愛がったりするのが好きです。
 </TeamMember>
 
 <TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" threads="lunaleaps" title="Engineer at Meta">

src/content/learn/index.md

@@ -4,11 +4,7 @@ title: クイックスタート
 
 <Intro>
 
-<<<<<<< HEAD
 React ドキュメントへようこそ！ このページでは、日々の開発で使用する React のコンセプトのうち 80％ の部分を紹介します。
-=======
-Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 </Intro>
 

src/content/learn/manipulating-the-dom-with-refs.md

@@ -343,16 +343,11 @@ Strict Mode が有効の場合、ref コールバックは開発環境で 2 回
 
 ## 別のコンポーネントの DOM ノードにアクセスする {/*accessing-another-components-dom-nodes*/}
 
-<<<<<<< HEAD
-`<input />` のようなブラウザ要素を出力する組み込みコンポーネントに ref を置いた場合、React はその ref の `current` プロパティを、対応する DOM ノード（ブラウザの実際の `<input />` など）にセットします。
-
-ただし、**独自の**コンポーネント、例えば `<MyInput />` に ref を置こうとすると、デフォルトでは `null` が返されます。以下はそれを示す例です。ボタンをクリックしても入力フィールドにフォーカスが当たらないことに注意してください。
-=======
 <Pitfall>
-Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
+ref は避難ハッチです。他のコンポーネントの DOM ノードを手作業で書き換えるとコードは壊れやすくなってしまいます。
 </Pitfall>
 
-You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
+親コンポーネントからは、[普通の props と全く同じやり方で](/learn/passing-props-to-a-component)子コンポーネントに ref を渡すことができます。
 
 ```js {3-4,9}
 import { useRef } from 'react';
@@ -367,10 +362,9 @@ function MyForm() {
 }
 ```
 
-In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
+上記の例では、ref が親コンポーネントである `MyForm` で作成されており、それが子コンポーネントである `MyInput` に渡されています。`MyInput` は更にその ref を `<input>` に受け渡しています。`<input>` は[組み込みコンポーネント](/reference/react-dom/components/common)なので、React は ref の `.current` プロパティに `<input>` DOM 要素を代入します。
 
-The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+これで `MyForm` で作られた `inputRef` は、`MyInput` から返される `<input>` DOM 要素を指し示すようになります。`MyForm` で作成されたクリックハンドラは `inputRef` にアクセスして `focus()` を呼び出し、`<input>` にフォーカスを設定できるようになります。
 
 <Sandpack>
 
@@ -401,75 +395,11 @@ export default function MyForm() {
 
 </Sandpack>
 
-<<<<<<< HEAD
-問題に気付きやすくするため、React はコンソールにもエラーを出力します。
-
-<ConsoleBlock level="error">
-
-Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
-
-</ConsoleBlock>
-
-これは、デフォルトでは React は、コンポーネントが他のコンポーネントの DOM ノードにアクセスできないようにしているためです。自分自身の子でさえもです！ これは意図的なものです。ただでさえ ref は控えめに使うべき避難ハッチ (escape hatch) です。*別の*コンポーネントの DOM ノードまで手動で操作できてしまうと、コードがさらに壊れやすくなってしまいます。
-
-代わりに、内部の DOM ノードを*意図的に*公開したいコンポーネントは、そのことを**明示的に許可**する必要があります。コンポーネントは、自身が受け取った ref を子のいずれかに「転送 (forward)」するよう指定できます。`MyInput` が `forwardRef` API を使ってこれをどのように行うのか見てみましょう。
-
-```js
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-```
-
-以下が動作の仕組みです。
-
-1. `<MyInput ref={inputRef} />` は、対応する DOM ノードを `inputRef.current` に入れるように React に指示する。ただしそれを許可するかどうかは `MyInput` 次第であり、デフォルトでは許可しない。
-2. `MyInput` コンポーネントは `forwardRef` を使って宣言されている。**これにより、上記の `inputRef` を `props` の後に宣言された 2 番目の `ref` 引数として受け取るよう、明示的に許可している**。
-3. `MyInput` 自体は、受け取った `ref` を内部の `<input>` に渡す。
-
-これで、ボタンをクリックして入力にフォーカスを当てることができます。
-
-<Sandpack>
-
-```js
-import { forwardRef, useRef } from 'react';
-
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-
-export default function Form() {
-  const inputRef = useRef(null);
-
-  function handleClick() {
-    inputRef.current.focus();
-  }
-
-  return (
-    <>
-      <MyInput ref={inputRef} />
-      <button onClick={handleClick}>
-        Focus the input
-      </button>
-    </>
-  );
-}
-```
-
-</Sandpack>
-
-デザインシステムにおいて、ボタン、入力フィールドなどの低レベルなコンポーネントが、内部の DOM ノードに ref を転送することは一般的なパターンです。一方、フォーム、リスト、ページセクションなどの高レベルなコンポーネントは、DOM 構造への偶発的な依存関係を避けるため、通常は DOM ノードを公開しません。
-
-=======
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 <DeepDive>
 
 #### 命令型ハンドルで API の一部を公開する {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-<<<<<<< HEAD
-上記の例では、`MyInput` は元の DOM の input 要素を公開しています。これにより親コンポーネント側からその要素の `focus()` を呼び出すことができます。しかしこれにより、親コンポーネントが他のこと、例えば、CSS スタイルを変更することもできてしまいます。一般的なことではありませんが、公開される機能を制限したいということがあります。それには `useImperativeHandle` を使います。
-=======
-In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+上記の例では、`MyInput` に渡された ref が本来の DOM 要素である input に受け渡されています。これにより親コンポーネント側からその要素の `focus()` を呼び出すことができます。しかしこれにより、親コンポーネントが他のこと、例えば、CSS スタイルを変更することもできてしまいます。一般的なことではありませんが、公開される機能を制限したいということがあります。それには [`useImperativeHandle`](/reference/react/useImperativeHandle) を使います。
 
 <Sandpack>
 
@@ -505,11 +435,7 @@ export default function Form() {
 
 </Sandpack>
 
-<<<<<<< HEAD
-ここでは、`MyInput` 内の `realInputRef` が本物の DOM の input ノードを保持しています。ただし、`useImperativeHandle` は、親コンポーネントに対して渡す ref の値として、独自の特別なオブジェクトを使うよう、React に指示します。そのため、`Form` コンポーネント内の `inputRef.current` には `focus` メソッドのみが含まれます。この例での、ref "handle" とは DOM ノードではなく、`useImperativeHandle` の呼び出し内で作成するカスタムオブジェクトです。
-=======
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+ここでは、`MyInput` 内の `realInputRef` が本物の DOM の input ノードを保持しています。ただし、[`useImperativeHandle`](/reference/react/useImperativeHandle) は、親コンポーネントに対して渡す ref の値として、独自の特別なオブジェクトを使うよう、React に指示します。そのため、`Form` コンポーネント内の `inputRef.current` には `focus` メソッドのみが含まれます。この例での、ref "handle" とは DOM ノードではなく、[`useImperativeHandle`](/reference/react/useImperativeHandle) の呼び出し内で作成するカスタムオブジェクトです。
 
 </DeepDive>
 

src/content/learn/react-compiler.md

@@ -347,11 +347,7 @@ React Comiler は多くの React のルールを静的に検証でき、エラ
 
 ### コンポーネントが最適化されたかどうかを知る方法 {/*how-do-i-know-my-components-have-been-optimized*/}
 
-<<<<<<< HEAD
-[React Devtools](/learn/react-developer-tools) (v5.0+) には React Compiler のサポートが組み込まれており、コンパイラによって最適化されたコンポーネントの横に "Memo ✨" バッジが表示されます。
-=======
-[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+[React DevTools](/learn/react-developer-tools) (v5.0+) と [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) には React Compiler のサポートが組み込まれており、コンパイラによって最適化されたコンポーネントの横に "Memo ✨" バッジが表示されます。
 
 ### コンパイル後に何かが動作しない場合 {/*something-is-not-working-after-compilation*/}
 eslint-plugin-react-compiler がインストールされている場合、コンパイラはエディタ内で React のルールに対する違反を表示します。これが表示された場合、コンパイラはそのコンポーネントやフックの最適化をスキップしたという意味です。これ自体は全く問題なく、コンパイラは他のコンポーネントの最適化を続けることができます。**すべての ESLint 違反をすぐに修正する必要はありません**。自分のペースで対応して、最適化されるコンポーネントやフックの数を増やしていくことができます。

src/content/learn/react-developer-tools.md

@@ -52,33 +52,10 @@ react-devtools
 
 ![スタンドアロン版 React Developer Tools](/images/docs/react-devtools-standalone.png)
 
-<<<<<<< HEAD
 ## モバイル (React Native) {/*mobile-react-native*/}
-React Developer Tools は [React Native](https://reactnative.dev/) を使って構築されたアプリの調査にも利用できます。
 
-React Developer Tools を最も簡単に使う方法は、グローバルにインストールすることです。
-```bash
-# Yarn
-yarn global add react-devtools
-=======
-## Mobile (React Native) {/*mobile-react-native*/}
-
-To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/debugging/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
-
-[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
-
-<<<<<<< HEAD
-次に、ターミナルから開発者ツールを開きます。
-```bash
-react-devtools
-```
-
-これで、実行中のローカルな React Native アプリに接続されるはずです。
+[React Native](https://reactnative.dev/) で作成するアプリの調査を行う場合は、React Developer Tools と密に統合された組み込みデバッガである [React Native DevTools](https://reactnative.dev/docs/debugging/react-native-devtools) を使用できます。要素のハイライトや選択を含むすべての機能が、ブラウザ版の機能拡張と同様に動作します。
 
-> 数秒待っても開発者ツールが接続されない場合は、アプリをリロードしてみてください。
+[React Native のデバッグについてさらに読む](https://reactnative.dev/docs/debugging)
 
-[React Native のデバッグについてもっと学ぶ](https://reactnative.dev/docs/debugging)
-=======
-> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+> 0.76 より前のバージョンの React Native の場合は、上記の [Safari および他のブラウザ](#safari-and-other-browsers)のガイドに従ってスタンドアロン版の React DevTools を使用してください。