From ec5ef4fe8fbf1fcf66bc8af2dc9087b1227b7ec7 Mon Sep 17 00:00:00 2001 From: jp-knj Date: Mon, 17 Jul 2023 01:18:38 +0900 Subject: [PATCH 1/4] Translate Fragment --- src/content/reference/react/Fragment.md | 46 ++++++++++++------------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index aa72b08a0..2ddaef0ba 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, often used via `<>...` syntax, lets you group elements without a wrapper node. +`` は頻繁に `<>...` 構文で使用され、ノードでラップせずに要素をグループ化することができます。 ```js <> @@ -19,29 +19,28 @@ title: (<>...) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `` {/*fragment*/} -Wrap elements in `` 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 `` in most cases. +単一の要素が必要な場合は、`` でラップすると複数の要素をグループ化することができます。`Fragment` で要素をグループ化しても、出力される DOM には影響を与えません。要素がグループ化されていないときと同じです。空の JSX タグ `<>` は、ほとんどの場合 `` の省略記法です。 -#### Props {/*props*/} +#### props {/*props*/} -- **optional** `key`: Fragments declared with the explicit `` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **省略可能** `key`: 明示的な `` 構文で宣言されたフラグメントは [keys.](/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 `...`. - -- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<>` to `[]` or back, or when you go from rendering `<>` to `` and back. This only works a single level deep: for example, going from `<><>` to `` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) +- `key` をフラグメントに渡したい場合は、`<>...` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`...` をレンダーしなければなりません。 +- React は、`<>` のレンダーから `[]` に変更されるときか戻るとき、または `<>` のレンダーから `` に変更されるときや戻るときは [state はリセット](/learn/preserving-and-resetting-state)されません。これは 1 つの階層のときのみ動作します：例えば、`<><>` から `` への変更は state がリセットされます。詳細なセマンティクス（semantics, 意味論）は[こちら](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 つのコンポーネントは 1 つの要素しか返すことができませんが、フラグメントを使用すれば複数の要素を一度にグループ化して、それらをグループとして返します。 ```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 `

` and `
` DOM nodes appear as siblings without wrappers around them: +フラグメントは便利です。なぜなら、DOM 要素のような他のコンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。この例を、ブラウザツールでインスペクト（inspect, 調査）してみると、全ての `

` や `
` DOM ノードがラップされずに兄弟として表示されることがわかります。 @@ -94,9 +93,9 @@ function PostBody({ body }) { -#### 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) 場合以外では必要ありません。 --- -### 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() { @@ -139,9 +137,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 }) { @@ -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` を割り当てる必要があります。ループ内の要素がフラグメントの場合は、`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: +フラグメントの子要素のまわりにラッパー要素がないことを確認するために、DOM をインスペクトできます： From 4ed6e947d4292cd5d354b4e8eeeb9b71349fa6ee Mon Sep 17 00:00:00 2001 From: jp-knj Date: Thu, 20 Jul 2023 23:30:28 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E8=A1=8C=E3=82=92=E6=8F=83=E3=81=88?= =?UTF-8?q?=E3=82=8B=E3=81=9F=E3=82=81=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/Fragment.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 2ddaef0ba..776a9c3e4 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -34,6 +34,7 @@ title: (<>...) - `key` をフラグメントに渡したい場合は、`<>...` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`...` をレンダーしなければなりません。 - React は、`<>` のレンダーから `[]` に変更されるときか戻るとき、または `<>` のレンダーから `` に変更されるときや戻るときは [state はリセット](/learn/preserving-and-resetting-state)されません。これは 1 つの階層のときのみ動作します：例えば、`<><>` から `` への変更は state がリセットされます。詳細なセマンティクス（semantics, 意味論）は[こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)を参照してください。 + --- ## 使用法 {/*usage*/} From eff6dd62c0da8137d5fec3ec06d41dc3b8a5c314 Mon Sep 17 00:00:00 2001 From: jp-knj Date: Fri, 21 Jul 2023 00:15:31 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E8=A1=8C=E3=82=92=E6=8F=83=E3=81=88?= =?UTF-8?q?=E3=81=9F=E3=82=8A=E3=80=81=E8=A8=B3=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/Fragment.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 776a9c3e4..7316a15bf 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -33,7 +33,7 @@ title: (<>...) - `key` をフラグメントに渡したい場合は、`<>...` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`...` をレンダーしなければなりません。 -- React は、`<>` のレンダーから `[]` に変更されるときか戻るとき、または `<>` のレンダーから `` に変更されるときや戻るときは [state はリセット](/learn/preserving-and-resetting-state)されません。これは 1 つの階層のときのみ動作します：例えば、`<><>` から `` への変更は state がリセットされます。詳細なセマンティクス（semantics, 意味論）は[こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)を参照してください。 +- React は、`<>` のレンダーから `[]` に変更されるときか戻るとき、または `<>` のレンダーから `` に変更されるときや戻るときは [state はリセット](/learn/preserving-and-resetting-state)されません。これは単一レベルの深さのときのみ動作します：例えば、`<><>` から `` への変更は state がリセットされます。詳細なセマンティクス（semantics, 意味論）は[こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)を参照してください。 --- @@ -112,6 +112,7 @@ function Post() { ``` 通常なら [`Fragment` に `key` を渡す](#rendering-a-list-of-fragments) 場合以外では必要ありません。 + --- From 9d997336ed04a439013a2aa5d4d28c34e90b50e9 Mon Sep 17 00:00:00 2001 From: knj <70939128+jp-knj@users.noreply.github.com> Date: Mon, 24 Jul 2023 08:32:57 +0900 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Soichiro Miki --- src/content/reference/react/Fragment.md | 30 ++++++++++++------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 7316a15bf..8710253c8 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -`` は頻繁に `<>...` 構文で使用され、ノードでラップせずに要素をグループ化することができます。 +`` を使うことで、ラッパ用のノードを用いずに要素をグループ化することができます。通常は `<>...` という構文で使用されます。 ```js <> @@ -23,17 +23,17 @@ title: (<>...) ### `` {/*fragment*/} -単一の要素が必要な場合は、`` でラップすると複数の要素をグループ化することができます。`Fragment` で要素をグループ化しても、出力される DOM には影響を与えません。要素がグループ化されていないときと同じです。空の JSX タグ `<>` は、ほとんどの場合 `` の省略記法です。 +単一の要素が必要な場面で、複数の要素を `` でラップすることでグループ化することができます。`Fragment` で要素をグループ化しても、出力される DOM には影響を与えません。要素がグループ化されていないときと同じです。空の JSX タグ `<>` は、ほとんどの場合 `` の省略記法です。 #### props {/*props*/} -- **省略可能** `key`: 明示的な `` 構文で宣言されたフラグメントは [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) を持つことができます。 +- **省略可能** `key`: 明示的な `` 構文で宣言されたフラグメントは [key](/learn/rendering-lists#keeping-list-items-in-order-with-key) を持つことができます。 #### 注意点 {/*caveats*/} -- `key` をフラグメントに渡したい場合は、`<>...` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`...` をレンダーしなければなりません。 +- `key` をフラグメントに渡したい場合は、`<>...` 構文を使用することはできません。`'react'` から `Fragment` を明示的にインポートし、`...` とレンダーしなければなりません。 -- React は、`<>` のレンダーから `[]` に変更されるときか戻るとき、または `<>` のレンダーから `` に変更されるときや戻るときは [state はリセット](/learn/preserving-and-resetting-state)されません。これは単一レベルの深さのときのみ動作します：例えば、`<><>` から `` への変更は state がリセットされます。詳細なセマンティクス（semantics, 意味論）は[こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)を参照してください。 +- React は、`<>` と `[]` のレンダー間、あるいは `<>` と `` のレンダー間で行き来する場合に [state をリセット](/learn/preserving-and-resetting-state)しません。これは単一レベルの深さのときのみの動作です。例えば、`<><>` から `` への変更では state がリセットされます。具体的な振る舞いの詳細は[こちら](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)を参照してください。 --- @@ -41,7 +41,7 @@ title: (<>...) ### 複数の要素を返す {/*returning-multiple-elements*/} -複数の要素をグループ化するために `Fragment` や同等の `<>...` 構文を使用することができます。単一の要素が行き来できる場所ならどこでも、複数の要素を配置することができます。例えば、1 つのコンポーネントは 1 つの要素しか返すことができませんが、フラグメントを使用すれば複数の要素を一度にグループ化して、それらをグループとして返します。 +複数の要素をグループ化するために `Fragment` や、それと同等の `<>...` 構文を使用することができます。これにより単一の要素が置ける場所であればどこにでも、複数の要素を配置することができるようになります。例えば、コンポーネントは 1 つの要素しか返すことができませんが、フラグメントを使用すれば複数の要素をまとめて、グループとして返せます。 ```js {3,6} function Post() { @@ -54,7 +54,7 @@ function Post() { } ``` -フラグメントは便利です。なぜなら、DOM 要素のような他のコンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。この例を、ブラウザツールでインスペクト（inspect, 調査）してみると、全ての `

` や `
` DOM ノードがラップされずに兄弟として表示されることがわかります。 +フラグメントが有用なのは、DOM 要素のような他のコンテナで要素をラップする場合と異なり、フラグメントで要素をグループ化してもレイアウトやスタイルに影響を与えないからです。以下の例をブラウザツールでインスペクト（inspect, 調査）してみると、全ての `

` や `
` DOM ノードがラップされずに兄弟として表示されることがわかります。 @@ -94,9 +94,9 @@ function PostBody({ body }) { -#### 特別な構文を使わずに Fragment をどのように記述するか？ {/*how-to-write-a-fragment-without-the-special-syntax*/} +#### 特別な構文を使わずにフラグメントを記述する方法 {/*how-to-write-a-fragment-without-the-special-syntax*/} -上述の例は、React から `Fragment` をインポートすることと同じです： +上述の例は、React から `Fragment` をインポートして以下のように書くことと同じです。 ```js {1,5,8} import { Fragment } from 'react'; @@ -111,7 +111,7 @@ function Post() { } ``` -通常なら [`Fragment` に `key` を渡す](#rendering-a-list-of-fragments) 場合以外では必要ありません。 +[`Fragment` に `key` を渡す](#rendering-a-list-of-fragments)場合以外では、通常必要ありません。 @@ -119,7 +119,7 @@ function Post() { ### 複数の要素を変数に割り当てる {/*assigning-multiple-elements-to-a-variable*/} -他の要素と同じように、フラグメントの要素を変数に割り当てたり、props として渡したりすることができます： +他の要素と同じように、フラグメントも要素として変数に割り当てたり、props として渡したりすることができます： ```js function CloseDialog() { @@ -141,7 +141,7 @@ function CloseDialog() { ### テキストと要素をグループ化する {/*grouping-elements-with-text*/} -`Fragment` を使うとテキストとコンポーネントを一度にグループ化することができます： +`Fragment` を使うとテキストとコンポーネントをグループ化することができます： ```js function DateRangePicker({ start, end }) { @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) { --- -### Fragment のリストをレンダーする {/*rendering-a-list-of-fragments*/} +### フラグメントのリストをレンダーする {/*rendering-a-list-of-fragments*/} -こちらは `<>` 構文の代わりに `Fragment` を明示的に記述する必要がある場面です。ループ内で[複数の要素をレンダーする](/learn/rendering-lists)ときには、各要素に `key` を割り当てる必要があります。ループ内の要素がフラグメントの場合は、`key` 属性を提供するために通常の JSX 要素の構文を使用する必要があります。 +こちらは `<>` 構文の代わりに `Fragment` を明示的に記述する必要がある場面です。ループ内で[複数の要素をレンダーする](/learn/rendering-lists)ときには、各要素に `key` を割り当てる必要があります。ループ内の要素がフラグメントの場合は、`key` 属性を渡すために通常の JSX 要素の構文を使用する必要があります。 ```js {3,6} function Blog() { @@ -173,7 +173,7 @@ function Blog() { } ``` -フラグメントの子要素のまわりにラッパー要素がないことを確認するために、DOM をインスペクトできます： +DOM をインスペクトすると、フラグメントの子要素のまわりにラッパ要素がないことを確認できます。