wip

Author: jp-knj

Diff for: src/content/reference/react/Fragment.md

@@ -4,7 +4,7 @@ title: <Fragment> (<>...</>)
 
 <Intro>
 
-`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
+`<Fragment>` は頻繁に `<>...</>` 構文で使用され、ノードでラップせずに要素をグループ化することができます。
 
 ```js
 <>
@@ -19,29 +19,28 @@ title: <Fragment> (<>...</>)
 
 ---
 
-## Reference {/*reference*/}
+## リファレンス {/*reference*/}
 
 ### `<Fragment>` {/*fragment*/}
 
-Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases.
+単一の要素が必要な場合は、`<Fragment>` でラップすると複数の要素をグループ化することができます。Fragment で要素をグループ化しても、出力される DOM には影響を与えません。要素がグループ化されていないときの DOM と同じです。空の JSX タグ `<></>` は、ほとんどの場合 `<Fragment></Fragment>` の省略記法です。
 
-#### Props {/*props*/}
+#### props {/*props*/}
 
-- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
+- **省略可能** `key`: 明示的な `<Fragment>` 構文で宣言されたフラグメントは [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) を持つことができます。
 
-#### Caveats {/*caveats*/}
-
-- If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`.
-
-- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
+#### 注意点 {/*caveats*/}
 
+- `key` をフラグメントに渡したい場合は、`<>...</>` の構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`<Fragment key={yourKey}>...</Fragment>` をレンダーしなければなりません。
+-
+- React は、`<><Child /></>` のレンダリングから `[<Child />]` に戻るとき、または `<><Child /></>` のレンダリングから `<Child />` に戻るときは [state をリセット](/learn/preserving-and-resetting-state) されません。これは 1 つ分の階層のみ動作します：例えば、`<><><Child /></></>` から `<Child />` への変更は state がリセットされます。詳しくは [こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)を参照してください。
 ---
 
-## Usage {/*usage*/}
+## 使い方 {/*usage*/}
 
-### Returning multiple elements {/*returning-multiple-elements*/}
+### 複数の要素を返す {/*returning-multiple-elements*/}
 
-Use `Fragment`, or the equivalent `<>...</>` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
+複数の要素をグループ化するために `Fragment` や同等の `<>...</>` 構文を使用することができます。You can use it to put multiple elements in any place where a single element can go.例えば、1 つのコンポーネントは 1 つの要素しか返すことができませんが、`Fragment` を使用すれば、複数の要素を一緒にグループ化して、グループとして返します。
 
 ```js {3,6}
 function Post() {
@@ -54,7 +53,7 @@ function Post() {
 }
 ```
 
-Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<article>` DOM nodes appear as siblings without wrappers around them:
+`Fragment` は実用的です。理由として、DOM 要素のような他のコンテナで要素をラップする場合と異なり、`Fragment` で要素をグループ化してもレイアウトやスタイルに影響を与えないからです。この例をブラウザツールで検証すると、全ての `<h1>` や `<article>` DOM ノードがそれらを囲むラッパーなしに兄弟として表示されることがわかります。
 
 <Sandpack>
 
@@ -94,9 +93,9 @@ function PostBody({ body }) {
 
 <DeepDive>
 
-#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
+#### 特別な構文を使わずにFragmentをどのように記述するか？ {/*how-to-write-a-fragment-without-the-special-syntax*/}
 
-The example above is equivalent to importing `Fragment` from React:
+上述の例は、React から `Fragment` をインポートすることと同じです：
 
 ```js {1,5,8}
 import { Fragment } from 'react';
@@ -111,15 +110,14 @@ function Post() {
 }
 ```
 
-Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
-
+通常なら [Fragment に key を渡す](#rendering-a-list-of-fragments) 必要がある場合以外では必要ありません。
 </DeepDive>
 
 ---
 
-### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
+### 複数の要素を変数に割り当てる {/*assigning-multiple-elements-to-a-variable*/}
 
-Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
+他の要素と同じように、Fragment の要素を変数に割り当てたり、props として渡したりすることができます：
 
 ```js
 function CloseDialog() {
@@ -158,9 +156,9 @@ function DateRangePicker({ start, end }) {
 
 ---
 
-### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
+### Fragment のリストをレンダーする {/*rendering-a-list-of-fragments*/}
 
-Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute:
+以下は `<></>` 構文の代わりに `Fragment` を明示的に記述する必要がある場面です。ループ内で[複数の要素をレンダーする]((/learn/rendering-lists))ときには、各要素に key を割り当てる必要があります。ループ内の要素が Fragment である場合は、`key` 属性を提供するために標準的な JSX 要素の構文を使用する必要があります。
 
 ```js {3,6}
 function Blog() {
@@ -173,7 +171,7 @@ function Blog() {
 }
 ```
 
-You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
+Fragment の子要素の周りにラッパー要素がないことを確認するために、DOM を検査できます：
 
 <Sandpack>