From 7f5ca0138ac53b6a46d771d516010a9c880f6ed2 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sun, 10 Feb 2019 01:13:05 +0900 Subject: [PATCH 1/4] docs:translate web-components.md --- content/docs/web-components.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index cbfcc80e1..1ebf08a87 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -6,11 +6,11 @@ redirect_from: - "docs/webcomponents.html" --- -React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both. +React と [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) は異なる課題を解決する為に構築されました。Web Components はコンポーネントをパッケージ化して、高い再利用性を与えます。一方で React は DOM とデータを同期させる為の宣言型のライブラリを提供しています。この2つの目標は互いを補完しあっています。あなたは開発者として、Web Component 内で React を使用することも、React 内で Web Components を使用することも、あるいはその両方を行うこともできます。 -Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components. +React を使用するほとんどの人は Web Components を使用しませんが、Web Components を用いたサードパーティ製の UI コンポーネントを使用したい時などには活用できるかもしれません。 -## Using Web Components in React {#using-web-components-in-react} +## React で Web Components を使用する {#using-web-components-in-react} ```javascript class HelloMessage extends React.Component { @@ -20,14 +20,14 @@ class HelloMessage extends React.Component { } ``` -> Note: +> 注意: > -> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component. +> Web Components はよく命令形の API を公開しています。例えば、`video` という Web Component が `play()` や `pause()` といった関数を公開しているかもしれません。Web Component が使う命令形の API にアクセスするには DOM ノードと直接やり取りするために ref を使う必要があります。サードパーティ製の Web Components を使用している場合は、Web Component の Wrapper として機能する React のコンポーネントを作成するのがベストな選択でしょう。 > -> Events emitted by a Web Component may not properly propagate through a React render tree. -> You will need to manually attach event handlers to handle these events within your React components. +> Web Component から発された Event は React のレンダーツリーを正しく伝わってこない可能性があります。 +> React コンポーネント内でイベントに適切に対応するにはそのためのイベントハンドラを与える必要があります。 -One common confusion is that Web Components use "class" instead of "className". +よくある混乱の1つとして、Web Components が "className" の代わりに "class" を使用しているケースがあります。 ```javascript function BrickFlipbox() { @@ -40,7 +40,7 @@ function BrickFlipbox() { } ``` -## Using React in your Web Components {#using-react-in-your-web-components} +## Web Components で React を使用する {#using-react-in-your-web-components} ```javascript class XSearch extends HTMLElement { @@ -56,7 +56,7 @@ class XSearch extends HTMLElement { customElements.define('x-search', XSearch); ``` ->Note: +>注釈: > ->This code **will not** work if you transform classes with Babel. See [this issue](https://github.com/w3c/webcomponents/issues/587) for the discussion. ->Include the [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) before you load your web components to fix this issue. +>Babel を使ってクラス変換を行うと上記のコードは**機能しません**。 詳細や議論は[この issue](https://github.com/w3c/webcomponents/issues/587) を参照してください. +>この問題を解決するには [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) を Web Component の前に読み込む必要があります。 From b3c91c4fe81968a98535057ec8e68aa6e092ec92 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Sun, 10 Feb 2019 01:50:58 +0900 Subject: [PATCH 2/4] docs: fix minor details --- content/docs/web-components.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 1ebf08a87..1d0e639c1 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -6,7 +6,7 @@ redirect_from: - "docs/webcomponents.html" --- -React と [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) は異なる課題を解決する為に構築されました。Web Components はコンポーネントをパッケージ化して、高い再利用性を与えます。一方で React は DOM とデータを同期させる為の宣言型のライブラリを提供しています。この2つの目標は互いを補完しあっています。あなたは開発者として、Web Component 内で React を使用することも、React 内で Web Components を使用することも、あるいはその両方を行うこともできます。 +React と [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) は異なる課題を解決する為に構築されました。Web Components はコンポーネントをパッケージ化して、高い再利用性を与えます。一方で React は DOM とデータを同期させる為の宣言型のライブラリを提供しています。この 2 つの目標は互いを補完しあっています。あなたは開発者として、Web Components 内で React を使用することも、React 内で Web Components を使用することも、あるいはその両方を行うこともできます。 React を使用するほとんどの人は Web Components を使用しませんが、Web Components を用いたサードパーティ製の UI コンポーネントを使用したい時などには活用できるかもしれません。 @@ -20,14 +20,14 @@ class HelloMessage extends React.Component { } ``` -> 注意: +> 補足: > > Web Components はよく命令形の API を公開しています。例えば、`video` という Web Component が `play()` や `pause()` といった関数を公開しているかもしれません。Web Component が使う命令形の API にアクセスするには DOM ノードと直接やり取りするために ref を使う必要があります。サードパーティ製の Web Components を使用している場合は、Web Component の Wrapper として機能する React のコンポーネントを作成するのがベストな選択でしょう。 > > Web Component から発された Event は React のレンダーツリーを正しく伝わってこない可能性があります。 > React コンポーネント内でイベントに適切に対応するにはそのためのイベントハンドラを与える必要があります。 -よくある混乱の1つとして、Web Components が "className" の代わりに "class" を使用しているケースがあります。 +よくある混乱のひとつとして、Web Components が "className" の代わりに "class" を使用しているケースがあります。 ```javascript function BrickFlipbox() { @@ -56,7 +56,7 @@ class XSearch extends HTMLElement { customElements.define('x-search', XSearch); ``` ->注釈: +>補足: > ->Babel を使ってクラス変換を行うと上記のコードは**機能しません**。 詳細や議論は[この issue](https://github.com/w3c/webcomponents/issues/587) を参照してください. ->この問題を解決するには [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) を Web Component の前に読み込む必要があります。 +>Babel を使ってクラス変換を行うと上記のコードは**機能しません**。詳細や議論は[この issue](https://github.com/w3c/webcomponents/issues/587) を参照してください。 +>この問題を解決するには [custom-elements-es5-adapter](https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs) をあなたの web component の前に読み込む必要があります。 From dc0e32e7d326337cd7c204d6b987d580e93d10d7 Mon Sep 17 00:00:00 2001 From: jesse Date: Wed, 13 Feb 2019 11:12:40 +0900 Subject: [PATCH 3/4] doc: modify imperative wording --- content/docs/web-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index 1d0e639c1..e4aa2e945 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -22,7 +22,7 @@ class HelloMessage extends React.Component { > 補足: > -> Web Components はよく命令形の API を公開しています。例えば、`video` という Web Component が `play()` や `pause()` といった関数を公開しているかもしれません。Web Component が使う命令形の API にアクセスするには DOM ノードと直接やり取りするために ref を使う必要があります。サードパーティ製の Web Components を使用している場合は、Web Component の Wrapper として機能する React のコンポーネントを作成するのがベストな選択でしょう。 +> Web Components はよく命令型の API を公開しています。例えば、`video` という Web Component が `play()` や `pause()` といった関数を公開しているかもしれません。Web Component が使う命令型の API にアクセスするには DOM ノードと直接やり取りするために ref を使う必要があります。サードパーティ製の Web Components を使用している場合は、Web Component のラッパとして機能する React のコンポーネントを作成するのがベストな選択でしょう。 > > Web Component から発された Event は React のレンダーツリーを正しく伝わってこない可能性があります。 > React コンポーネント内でイベントに適切に対応するにはそのためのイベントハンドラを与える必要があります。 From 58b362dca1202ff76b6a5d0e56b61908ccdf55b8 Mon Sep 17 00:00:00 2001 From: jesse Date: Wed, 13 Feb 2019 11:15:08 +0900 Subject: [PATCH 4/4] docs: apply text lint --- content/docs/web-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/web-components.md b/content/docs/web-components.md index e4aa2e945..b1e27b030 100644 --- a/content/docs/web-components.md +++ b/content/docs/web-components.md @@ -22,7 +22,7 @@ class HelloMessage extends React.Component { > 補足: > -> Web Components はよく命令型の API を公開しています。例えば、`video` という Web Component が `play()` や `pause()` といった関数を公開しているかもしれません。Web Component が使う命令型の API にアクセスするには DOM ノードと直接やり取りするために ref を使う必要があります。サードパーティ製の Web Components を使用している場合は、Web Component のラッパとして機能する React のコンポーネントを作成するのがベストな選択でしょう。 +> Web Components はよく命令型の API を公開しています。例えば、`video` という Web Component が `play()` や `pause()` といった関数を公開しているかもしれません。Web Component が使う命令型の API にアクセスするには DOM ノードと直接やり取りするために ref を使う必要があります。サードパーティ製の Web Components を使用している場合は、Web Component のラッパとして機能する React のコンポーネントを作成するのがベストな選択でしょう。 > > Web Component から発された Event は React のレンダーツリーを正しく伝わってこない可能性があります。 > React コンポーネント内でイベントに適切に対応するにはそのためのイベントハンドラを与える必要があります。