From 13d57e313fdff32f93260e18394902818ea51bc8 Mon Sep 17 00:00:00 2001 From: shooontan Date: Wed, 6 Feb 2019 01:40:46 +0900 Subject: [PATCH 1/6] docs: Translate fragments --- content/docs/fragments.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 7c6f4fd6c..99ac95268 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,10 +1,10 @@ --- id: fragments -title: Fragments +title: フラグメント permalink: docs/fragments.html --- -A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. +React でよくあるパターンの1つに、コンポーネントが複数の要素を返すというものがあります。フラグメントを使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。 ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet. +このようなものを宣言するための[短い記法](#短い記法)もありますが、現時点ではまだ人気のあるツールすべてでサポートされているわけではありません。 -## Motivation +## モチベーション -A common pattern is for a component to return a list of children. Take this example React snippet: +コンポーネントが子要素のリストを返すというのはよくあるパターンです。この React スニペットを例にしましょう： ```jsx class Table extends React.Component { @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -`` would need to return multiple `` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid. +レンダリングされる HTML が正しくあるためには、`` は複数の `` 要素を返す必要があります。 `` 中の `render()` 内で親の div 要素を使ってしまうと、結果として出力される HTML は不正なものとなってしまいます。 ```jsx class Columns extends React.Component { @@ -53,7 +53,7 @@ class Columns extends React.Component { } ``` -results in a `` output of: +上記では、以下のような `
` の出力となってしまいます： ```jsx
@@ -66,9 +66,9 @@ results in a `
` output of:
``` -Fragments solve this problem. +このような場合のためにフラグメントが導入されました。 -## Usage +## 使い方 ```jsx{4,7} class Columns extends React.Component { @@ -83,7 +83,7 @@ class Columns extends React.Component { } ``` -which results in a correct `` output of: +上記は、以下のような正しい `
` の出力となります： ```jsx
@@ -94,9 +94,9 @@ which results in a correct `
` output of:
``` -### Short Syntax +### 短い記法 -There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags: +フラグメントを宣言するための新しい短縮記法があります。それは空のタグのようにも見えます： ```jsx{4,7} class Columns extends React.Component { @@ -111,13 +111,13 @@ class Columns extends React.Component { } ``` -You can use `<>` the same way you'd use any other element except that it doesn't support keys or attributes. +この `<>` は他の要素と同じように使うことが可能ですが、key や属性のサポートはありません。 -Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `` until the tooling catches up. +**[現時点では多くのツールがまだこの記法をサポートしていない](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**ため、ツールのサポートが追いつくまでは明示的に `` と記述する方がよいかもしれません。 -### Keyed Fragments +### key 付きフラグメント -Fragments declared with the explicit `` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list: +明示的に `` と宣言したフラグメントでは key を持つことができます。 これはコレクションをフラグメントの配列に変換するときに有用です。たとえば定義リストを作成する時に利用します： ```jsx function Glossary(props) { @@ -135,8 +135,8 @@ function Glossary(props) { } ``` -`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers. +`key` はフラグメントに渡すことができる唯一の属性です。将来的には、イベントハンドラのような他の属性を渡すこともサポートするかもしれません。 -### Live Demo +### ライブデモ -You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +この [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000) で新しい JSX フラグメントの記法を試すことができます。 From 5a580d916709442c1d14acd21845e89b8dee3a42 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 15:56:10 +0900 Subject: [PATCH 2/6] Update content/docs/fragments.md Co-Authored-By: shooontan --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 99ac95268..c6c2d6877 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: フラグメント permalink: docs/fragments.html --- -React でよくあるパターンの1つに、コンポーネントが複数の要素を返すというものがあります。フラグメントを使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。 +React でよくあるパターンの 1 つに、コンポーネントが複数の要素を返すというものがあります。フラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。 ```js render() { From 52a316af4caf10388a5e44b459bf65166971471c Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 15:56:29 +0900 Subject: [PATCH 3/6] Update content/docs/fragments.md Co-Authored-By: shooontan --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index c6c2d6877..3f126e336 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -20,7 +20,7 @@ render() { このようなものを宣言するための[短い記法](#短い記法)もありますが、現時点ではまだ人気のあるツールすべてでサポートされているわけではありません。 -## モチベーション +## 動機 コンポーネントが子要素のリストを返すというのはよくあるパターンです。この React スニペットを例にしましょう： From fa7bcccecb863e0f4c9bd61211ccc07f1b660013 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 16:17:58 +0900 Subject: [PATCH 4/6] Update content/docs/fragments.md Co-Authored-By: shooontan --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 3f126e336..4597de474 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -レンダリングされる HTML が正しくあるためには、`` は複数の `` 要素を返す必要があります。 `` 中の `render()` 内で親の div 要素を使ってしまうと、結果として出力される HTML は不正なものとなってしまいます。 +レンダーされる HTML が正しいものであるためには、`` は複数の `` 要素を返す必要があります。 `` 中の `render()` 内で親の div 要素を使ってしまうと、結果として出力される HTML は不正なものとなってしまいます。 ```jsx class Columns extends React.Component { From 2e983d722e9985c820cfdc4ac2a315d04dac7e9a Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 16:18:11 +0900 Subject: [PATCH 5/6] Update content/docs/fragments.md Co-Authored-By: shooontan --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 4597de474..c9fae0be3 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -66,7 +66,7 @@ class Columns extends React.Component { ``` -このような場合のためにフラグメントが導入されました。 +フラグメントはこのような問題を解決します。 ## 使い方 From f58a52627d9c1a77e0f013e9d4232b4c584e02d0 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Thu, 7 Feb 2019 16:35:41 +0900 Subject: [PATCH 6/6] Update content/docs/fragments.md Co-Authored-By: shooontan --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index c9fae0be3..a9de53d74 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -18,7 +18,7 @@ render() { } ``` -このようなものを宣言するための[短い記法](#短い記法)もありますが、現時点ではまだ人気のあるツールすべてでサポートされているわけではありません。 +このようなものを宣言するための[短い記法](#short-syntax)もありますが、現時点ではまだ人気のあるツールすべてでサポートされているわけではありません。 ## 動機