Translate "<Fragment>" by jp-knj · Pull Request #626 · reactjs/ja.react.dev
Expand Up
@@ -4,7 +4,7 @@ title: <Fragment> (<>...</>)
<Intro>
`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node. `<Fragment>` を使うことで、ラッパ用のノードを用いずに要素をグループ化することができます。通常は `<>...</>` という構文で使用されます。
```js <> Expand All @@ -19,29 +19,29 @@ 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 には影響を与えません。要素がグループ化されていないときと同じです。空の 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>` 構文で宣言されたフラグメントは [key](/learn/rendering-lists#keeping-list-items-in-order-with-key) を持つことができます。
#### Caveats {/*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>`. - `key` をフラグメントに渡したい場合は、`<>...</>` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`<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) - React は、`<><Child /></>` と `[<Child />]` のレンダー間、あるいは `<><Child /></>` と `<Child />` のレンダー間で行き来する場合に [state をリセット](/learn/preserving-and-resetting-state)しません。これは単一レベルの深さのときのみの動作です。例えば、`<><><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` や、それと同等の `<>...</>` 構文を使用することができます。これにより単一の要素が置ける場所であればどこにでも、複数の要素を配置することができるようになります。例えば、コンポーネントは 1 つの要素しか返すことができませんが、フラグメントを使用すれば複数の要素をまとめて、グループとして返せます。
```js {3,6} function Post() { Expand All @@ -54,7 +54,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: フラグメントが有用なのは、DOM 要素のような他のコンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。以下の例をブラウザツールでインスペクト（inspect, 調査）してみると、全ての `<h1>` や `<article>` DOM ノードがラップされずに兄弟として表示されることがわかります。
<Sandpack>
Expand Down Expand Up @@ -94,9 +94,9 @@ function PostBody({ body }) {
<DeepDive>
#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/} #### 特別な構文を使わずにフラグメントを記述する方法 {/*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'; Expand All @@ -111,15 +111,15 @@ 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: 他の要素と同じように、フラグメントも要素として変数に割り当てたり、props として渡したりすることができます：
```js function CloseDialog() { Expand All @@ -139,9 +139,9 @@ function CloseDialog() {
---
### Grouping elements with text {/*grouping-elements-with-text*/} ### テキストと要素をグループ化する {/*grouping-elements-with-text*/}
You can use `Fragment` to group text together with components: `Fragment` を使うとテキストとコンポーネントをグループ化することができます：
```js function DateRangePicker({ start, end }) { Expand All @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) {
---
### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/} ### フラグメントのリストをレンダーする {/*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` を割り当てる必要があります。ループ内の要素がフラグメントの場合は、`key` 属性を渡すために通常の JSX 要素の構文を使用する必要があります。
```js {3,6} function Blog() { Expand All @@ -173,7 +173,7 @@ function Blog() { } ```
You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: DOM をインスペクトすると、フラグメントの子要素のまわりにラッパ要素がないことを確認できます。
<Sandpack>
Expand Down
<Intro>
`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node. `<Fragment>` を使うことで、ラッパ用のノードを用いずに要素をグループ化することができます。通常は `<>...</>` という構文で使用されます。
```js <> Expand All @@ -19,29 +19,29 @@ 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 には影響を与えません。要素がグループ化されていないときと同じです。空の 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>` 構文で宣言されたフラグメントは [key](/learn/rendering-lists#keeping-list-items-in-order-with-key) を持つことができます。
#### Caveats {/*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>`. - `key` をフラグメントに渡したい場合は、`<>...</>` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`<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) - React は、`<><Child /></>` と `[<Child />]` のレンダー間、あるいは `<><Child /></>` と `<Child />` のレンダー間で行き来する場合に [state をリセット](/learn/preserving-and-resetting-state)しません。これは単一レベルの深さのときのみの動作です。例えば、`<><><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` や、それと同等の `<>...</>` 構文を使用することができます。これにより単一の要素が置ける場所であればどこにでも、複数の要素を配置することができるようになります。例えば、コンポーネントは 1 つの要素しか返すことができませんが、フラグメントを使用すれば複数の要素をまとめて、グループとして返せます。
```js {3,6} function Post() { Expand All @@ -54,7 +54,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: フラグメントが有用なのは、DOM 要素のような他のコンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。以下の例をブラウザツールでインスペクト（inspect, 調査）してみると、全ての `<h1>` や `<article>` DOM ノードがラップされずに兄弟として表示されることがわかります。
<Sandpack>
Expand Down Expand Up @@ -94,9 +94,9 @@ function PostBody({ body }) {
<DeepDive>
#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/} #### 特別な構文を使わずにフラグメントを記述する方法 {/*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'; Expand All @@ -111,15 +111,15 @@ 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: 他の要素と同じように、フラグメントも要素として変数に割り当てたり、props として渡したりすることができます：
```js function CloseDialog() { Expand All @@ -139,9 +139,9 @@ function CloseDialog() {
---
### Grouping elements with text {/*grouping-elements-with-text*/} ### テキストと要素をグループ化する {/*grouping-elements-with-text*/}
You can use `Fragment` to group text together with components: `Fragment` を使うとテキストとコンポーネントをグループ化することができます：
```js function DateRangePicker({ start, end }) { Expand All @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) {
---
### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/} ### フラグメントのリストをレンダーする {/*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` を割り当てる必要があります。ループ内の要素がフラグメントの場合は、`key` 属性を渡すために通常の JSX 要素の構文を使用する必要があります。
```js {3,6} function Blog() { Expand All @@ -173,7 +173,7 @@ function Blog() { } ```
You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: DOM をインスペクトすると、フラグメントの子要素のまわりにラッパ要素がないことを確認できます。
<Sandpack>
Expand Down