From 00d810dad608e780bd8bb4ffa85f10dc063cbe07 Mon Sep 17 00:00:00 2001 From: ginpei Date: Sat, 2 Feb 2019 22:09:11 -0800 Subject: [PATCH 01/23] translate react-without-es6 --- content/docs/react-without-es6.md | 58 +++++++++++++++---------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 8cb01c6f3..b61406a9c 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -1,10 +1,10 @@ --- id: react-without-es6 -title: React Without ES6 +title: ES6を使わないReact permalink: docs/react-without-es6.html --- -Normally you would define a React component as a plain JavaScript class: +通常、React コンポーネントはプレーンな JavaScript クラスとして定義されます。 ```javascript class Greeting extends React.Component { @@ -14,8 +14,7 @@ class Greeting extends React.Component { } ``` -If you don't use ES6 yet, you may use the `create-react-class` module instead: - +もしあなたがまだ ES6 を使っていないのであれば、代わりに `create-react-class` モジュールを使うとよいかもしれません。 ```javascript var createReactClass = require('create-react-class'); @@ -26,11 +25,11 @@ var Greeting = createReactClass({ }); ``` -The API of ES6 classes is similar to `createReactClass()` with a few exceptions. +ES6 のクラス API は、一部の例外を除いて `createReactClass()` と似ています。 -## Declaring Default Props +## デフォルトPropsの宣言 -With functions and ES6 classes `defaultProps` is defined as a property on the component itself: +関数や ES6 クラスでは、 `defaultProps` はコンポーネント自体のプロパティとして定義されます。 ```javascript class Greeting extends React.Component { @@ -42,7 +41,7 @@ Greeting.defaultProps = { }; ``` -With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object: +`createReactClass()` の場合、渡されるオブジェクトの関数として `getDefaultProps()` を定義する必要があります。 ```javascript var Greeting = createReactClass({ @@ -57,9 +56,9 @@ var Greeting = createReactClass({ }); ``` -## Setting the Initial State +## stateの初期値の設定 -In ES6 classes, you can define the initial state by assigning `this.state` in the constructor: +ES6 クラスでは、コンストラクターで `this.state` へ代入することでstateの初期値を定義できます。 ```javascript class Counter extends React.Component { @@ -71,7 +70,7 @@ class Counter extends React.Component { } ``` -With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state: +`createReactClass()` の場合、state の初期値を返す `getInitialState` メソッドを別途用意しなければなりません。 ```javascript var Counter = createReactClass({ @@ -82,9 +81,9 @@ var Counter = createReactClass({ }); ``` -## Autobinding +## 自動バインド -In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor: +ES6 クラスとして宣言されたReact コンポーネントでは、メソッドは通常の ES6 クラスと同様のセマンティクスに従います。つまり、 `this` がそのインスタンスへ自動的にバインドされることはありません。コンストラクターで明示的に `.bind(this)` を利用する必要があります。 ```javascript class SayHello extends React.Component { @@ -110,7 +109,7 @@ class SayHello extends React.Component { } ``` -With `createReactClass()`, this is not necessary because it binds all methods: +`createReactClass()` の場合は全てのメソッドがバインドされるため、明示的なバインドは必要ありません。 ```javascript var SayHello = createReactClass({ @@ -132,10 +131,9 @@ var SayHello = createReactClass({ }); ``` -This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications. - -If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel: +これはつまり、ES6 クラスで書くとイベントハンドラーのための定型文 (boilerplate) が少し多くなってしまうということなのですが、一方では大きなアプリケーションの場合にわずかながらパフォーマンスが向上するという側面もあります。 +この定型文的コードがあまりに醜く感じられる場合、Babelを使って **実験的** な [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) 構文提案を有効にするとよいかもしれません。 ```javascript class SayHello extends React.Component { @@ -159,27 +157,27 @@ class SayHello extends React.Component { } ``` -Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language. +上記の構文は **実験的** なものであり、構文が変わるかもしれないこと、あるいは言語に取り入れられないかもしれないことに留意してください。 -If you'd rather play it safe, you have a few options: +安全にやりたい場合は他の選択肢もあります。 -* Bind methods in the constructor. -* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`. -* Keep using `createReactClass`. +* コンストラクターでメソッドをバインドする。 +* アロー関数を利用する。例： `onClick={(e) => this.handleClick(e)}`。 +* 引き続き `createReactClass` を利用する。 -## Mixins +## ミックスイン ->**Note:** +>**補足：** > ->ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. +>ES6 はミックスインのサポートを含んでいません。従って、React を ES6 クラスで使う場合にミックスインのサポートはありません。 > ->**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/blog/2016/07/13/mixins-considered-harmful.html).** +>**加えて、ミックスインを用いたコードによる多くの課題が報告されおり、[新規コードで利用することは推奨されません](/blog/2016/07/13/mixins-considered-harmful.html)。** > ->This section exists only for the reference. +>この章は参照のためだけに存在します。 -Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). `createReactClass` lets you use a legacy `mixins` system for that. +時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これらは [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、それ用にレガシーな `mixins` 機能を使うことができます。 -One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/react-component.html#the-component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed. +よくある利用例のひとつは、一定時間が経過するまで自身の更新を待機するコンポーネントです。`setInterval()` を使うのは簡単ですが、その場合はメモリ節約のため、コンポーネントが不要になった際に待機をキャンセルすることが重要です。React は[ライフサイクルメソッド](/docs/react-component.html#the-component-lifecycle)を提供しており、コンポーネントが生成、破棄されるときに知らせてくれます。次のようなシンプルなミックスインを作ってみましょう。このミックスインのメソッドは簡単な `setInterval()` 機能を提供し、コンポーネントが破棄されるタイミングで自動的にクリーンアップされます。 ```javascript var SetIntervalMixin = { @@ -222,4 +220,4 @@ ReactDOM.render( ); ``` -If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component. +コンポーネントが複数のミックスインを使っており、いくつかのミックスインが同じライフサイクルメソッドを定義している場合（例：コンポーネント破棄時に複数のミックスインがクリーンアップ処理をする）、全てのライフサイクルメソッドが呼ばれることが保証されています。ミックスインで定義されているメソッドはミックスインとして列挙された順に実行され、そのあとにコンポーネントのメソッドが呼ばれます。 From 66629d5a42d57c9165aa7b5b541ba6638f068a7d Mon Sep 17 00:00:00 2001 From: ginpei Date: Sat, 2 Feb 2019 22:39:50 -0800 Subject: [PATCH 02/23] found the Japanese expression --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index b61406a9c..5219c6ed2 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -175,7 +175,7 @@ class SayHello extends React.Component { > >この章は参照のためだけに存在します。 -時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これらは [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、それ用にレガシーな `mixins` 機能を使うことができます。 +時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これらは[横断的関心事 (cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、それ用にレガシーな `mixins` 機能を使うことができます。 よくある利用例のひとつは、一定時間が経過するまで自身の更新を待機するコンポーネントです。`setInterval()` を使うのは簡単ですが、その場合はメモリ節約のため、コンポーネントが不要になった際に待機をキャンセルすることが重要です。React は[ライフサイクルメソッド](/docs/react-component.html#the-component-lifecycle)を提供しており、コンポーネントが生成、破棄されるときに知らせてくれます。次のようなシンプルなミックスインを作ってみましょう。このミックスインのメソッドは簡単な `setInterval()` 機能を提供し、コンポーネントが破棄されるタイミングで自動的にクリーンアップされます。 From 7979f50a91a61f7e53a6f9376332077640092061 Mon Sep 17 00:00:00 2001 From: ginpei Date: Sat, 2 Feb 2019 22:44:05 -0800 Subject: [PATCH 03/23] misec --- content/docs/react-without-es6.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 5219c6ed2..9968ef4af 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -25,7 +25,7 @@ var Greeting = createReactClass({ }); ``` -ES6 のクラス API は、一部の例外を除いて `createReactClass()` と似ています。 +ES6 のクラス API は、一部の例外を除いて `createReactClass()` とよく似ています。 ## デフォルトPropsの宣言 @@ -173,9 +173,9 @@ class SayHello extends React.Component { > >**加えて、ミックスインを用いたコードによる多くの課題が報告されおり、[新規コードで利用することは推奨されません](/blog/2016/07/13/mixins-considered-harmful.html)。** > ->この章は参照のためだけに存在します。 +>この章は参考のためだけに存在します。 -時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これらは[横断的関心事 (cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、それ用にレガシーな `mixins` 機能を使うことができます。 +時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これは[横断的関心事 (cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、それ用にレガシーな `mixins` 機能を使うことができます。 よくある利用例のひとつは、一定時間が経過するまで自身の更新を待機するコンポーネントです。`setInterval()` を使うのは簡単ですが、その場合はメモリ節約のため、コンポーネントが不要になった際に待機をキャンセルすることが重要です。React は[ライフサイクルメソッド](/docs/react-component.html#the-component-lifecycle)を提供しており、コンポーネントが生成、破棄されるときに知らせてくれます。次のようなシンプルなミックスインを作ってみましょう。このミックスインのメソッドは簡単な `setInterval()` 機能を提供し、コンポーネントが破棄されるタイミングで自動的にクリーンアップされます。 From fc86c5ae5f2f4b211c8e5f72eb0deabda9d8b6e4 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:53:46 -0800 Subject: [PATCH 04/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 9968ef4af..c904a6fe9 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -1,6 +1,6 @@ --- id: react-without-es6 -title: ES6を使わないReact +title: ES6 なしで React を使う permalink: docs/react-without-es6.html --- From d34be5c6b432e27053649633ecfb92baf87152f8 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:54:05 -0800 Subject: [PATCH 05/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index c904a6fe9..116bcea9d 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -14,7 +14,7 @@ class Greeting extends React.Component { } ``` -もしあなたがまだ ES6 を使っていないのであれば、代わりに `create-react-class` モジュールを使うとよいかもしれません。 +もしあなたがまだ ES6 を使っていないのであれば、代わりに `create-react-class` モジュールを使うことができます。 ```javascript var createReactClass = require('create-react-class'); From 488607b4a0f0ca453e5cc93743c5b42c14270eb4 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:54:35 -0800 Subject: [PATCH 06/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 116bcea9d..bf9ac0014 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -25,7 +25,7 @@ var Greeting = createReactClass({ }); ``` -ES6 のクラス API は、一部の例外を除いて `createReactClass()` とよく似ています。 +ES6 のクラス API は `createReactClass()` とよく似ていますが、いくつかの例外があります。 ## デフォルトPropsの宣言 From 3220bffff974e9baa51fef2cabbe33e59d300117 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:54:47 -0800 Subject: [PATCH 07/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index bf9ac0014..849ac817d 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -27,7 +27,7 @@ var Greeting = createReactClass({ ES6 のクラス API は `createReactClass()` とよく似ていますが、いくつかの例外があります。 -## デフォルトPropsの宣言 +## デフォルト props の宣言 関数や ES6 クラスでは、 `defaultProps` はコンポーネント自体のプロパティとして定義されます。 From 82928c8815a412822b778ebc82504374fb8b3d3a Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:54:59 -0800 Subject: [PATCH 08/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 849ac817d..82354c40a 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -29,7 +29,7 @@ ES6 のクラス API は `createReactClass()` とよく似ていますが、い ## デフォルト props の宣言 -関数や ES6 クラスでは、 `defaultProps` はコンポーネント自体のプロパティとして定義されます。 +関数や ES6 クラスでは、`defaultProps` はコンポーネント自体のプロパティとして定義されます。 ```javascript class Greeting extends React.Component { From 4f284a4dbfd129be05af0529b12ae7096ad24e17 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:55:15 -0800 Subject: [PATCH 09/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 82354c40a..14090d212 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -41,7 +41,7 @@ Greeting.defaultProps = { }; ``` -`createReactClass()` の場合、渡されるオブジェクトの関数として `getDefaultProps()` を定義する必要があります。 +`createReactClass()` の場合、渡されるオブジェクト内の関数として `getDefaultProps()` を定義する必要があります。 ```javascript var Greeting = createReactClass({ From c829bfddbf9811c120ac1b876bc79c8ec5f1a97b Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:56:45 -0800 Subject: [PATCH 10/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 14090d212..a09157d9a 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -56,7 +56,7 @@ var Greeting = createReactClass({ }); ``` -## stateの初期値の設定 +## state の初期値の設定 ES6 クラスでは、コンストラクターで `this.state` へ代入することでstateの初期値を定義できます。 From 0aa3d9d289159ecad987d56d4e0156b350b62234 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:57:27 -0800 Subject: [PATCH 11/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index a09157d9a..8828b8e64 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -58,7 +58,7 @@ var Greeting = createReactClass({ ## state の初期値の設定 -ES6 クラスでは、コンストラクターで `this.state` へ代入することでstateの初期値を定義できます。 +ES6 クラスでは、コンストラクターで `this.state` へ代入することで state の初期値を定義できます。 ```javascript class Counter extends React.Component { From 2e3cc58fde55bf4d7d7002217ed522e7ac42f584 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:57:52 -0800 Subject: [PATCH 12/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 8828b8e64..49c67a3c6 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -83,7 +83,7 @@ var Counter = createReactClass({ ## 自動バインド -ES6 クラスとして宣言されたReact コンポーネントでは、メソッドは通常の ES6 クラスと同様のセマンティクスに従います。つまり、 `this` がそのインスタンスへ自動的にバインドされることはありません。コンストラクターで明示的に `.bind(this)` を利用する必要があります。 +ES6 クラスとして宣言された React コンポーネントでは、メソッドは通常の ES6 クラスと同様のセマンティクスに従います。つまり、`this` がそのインスタンスへ自動的にバインドされることはありません。コンストラクタで明示的に `.bind(this)` を利用する必要があります。 ```javascript class SayHello extends React.Component { From 0acf07fbd1b83a217e4f5610b5d1d2de3120f1d2 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:58:56 -0800 Subject: [PATCH 13/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 49c67a3c6..26bb6a326 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -162,7 +162,7 @@ class SayHello extends React.Component { 安全にやりたい場合は他の選択肢もあります。 * コンストラクターでメソッドをバインドする。 -* アロー関数を利用する。例： `onClick={(e) => this.handleClick(e)}`。 +* 例えば `onClick={(e) => this.handleClick(e)}` のような形でアロー関数を利用する。 * 引き続き `createReactClass` を利用する。 ## ミックスイン From 91d4dd20944f890cfbb69190f398497ee90695c0 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:59:10 -0800 Subject: [PATCH 14/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 26bb6a326..7d23c651b 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -171,7 +171,7 @@ class SayHello extends React.Component { > >ES6 はミックスインのサポートを含んでいません。従って、React を ES6 クラスで使う場合にミックスインのサポートはありません。 > ->**加えて、ミックスインを用いたコードによる多くの課題が報告されおり、[新規コードで利用することは推奨されません](/blog/2016/07/13/mixins-considered-harmful.html)。** +>**加えて、ミックスインを用いたコードによる多くの問題が見つかっており、[新規コードで利用することは推奨されません](/blog/2016/07/13/mixins-considered-harmful.html)。** > >この章は参考のためだけに存在します。 From 5ec71c8bf01b84f9aa5b29c5c7f33390c0609504 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:59:42 -0800 Subject: [PATCH 15/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 7d23c651b..ce405fe63 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -173,7 +173,7 @@ class SayHello extends React.Component { > >**加えて、ミックスインを用いたコードによる多くの問題が見つかっており、[新規コードで利用することは推奨されません](/blog/2016/07/13/mixins-considered-harmful.html)。** > ->この章は参考のためだけに存在します。 +>この節は参考のためだけに存在します。 時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これは[横断的関心事 (cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、それ用にレガシーな `mixins` 機能を使うことができます。 From 1b058243ec38959de209080da230c5a4a34acea8 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 10:59:56 -0800 Subject: [PATCH 16/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index ce405fe63..fe0005bb6 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -175,7 +175,7 @@ class SayHello extends React.Component { > >この節は参考のためだけに存在します。 -時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これは[横断的関心事 (cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、それ用にレガシーな `mixins` 機能を使うことができます。 +時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これは[横断的関心事 (cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、横断的関心事のためにレガシーな `mixins` 機能を使うことができます。 よくある利用例のひとつは、一定時間が経過するまで自身の更新を待機するコンポーネントです。`setInterval()` を使うのは簡単ですが、その場合はメモリ節約のため、コンポーネントが不要になった際に待機をキャンセルすることが重要です。React は[ライフサイクルメソッド](/docs/react-component.html#the-component-lifecycle)を提供しており、コンポーネントが生成、破棄されるときに知らせてくれます。次のようなシンプルなミックスインを作ってみましょう。このミックスインのメソッドは簡単な `setInterval()` 機能を提供し、コンポーネントが破棄されるタイミングで自動的にクリーンアップされます。 From 2c7b689c0ebb7d7bec65edd5deddf963c050af71 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 11:03:32 -0800 Subject: [PATCH 17/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index fe0005bb6..2ec1255ba 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -131,7 +131,7 @@ var SayHello = createReactClass({ }); ``` -これはつまり、ES6 クラスで書くとイベントハンドラーのための定型文 (boilerplate) が少し多くなってしまうということなのですが、一方では大きなアプリケーションの場合にわずかながらパフォーマンスが向上するという側面もあります。 +これはつまり、ES6 クラスで書くとイベントハンドラーのための定型文が少し多くなってしまうということなのですが、一方では大きなアプリケーションの場合にわずかながらパフォーマンスが向上するという側面もあります。 この定型文的コードがあまりに醜く感じられる場合、Babelを使って **実験的** な [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) 構文提案を有効にするとよいかもしれません。 From 8f04e4fd23b4330528f4cc210b98250287bf5dc8 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 11:04:16 -0800 Subject: [PATCH 18/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 2ec1255ba..14442ce50 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -133,7 +133,7 @@ var SayHello = createReactClass({ これはつまり、ES6 クラスで書くとイベントハンドラーのための定型文が少し多くなってしまうということなのですが、一方では大きなアプリケーションの場合にわずかながらパフォーマンスが向上するという側面もあります。 -この定型文的コードがあまりに醜く感じられる場合、Babelを使って **実験的** な [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) 構文提案を有効にするとよいかもしれません。 +この定型文的コードがあまりに醜く感じられる場合、Babel を使って**実験的**な [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) 構文提案を有効にするとよいかもしれません。 ```javascript class SayHello extends React.Component { From d874e5b2cef281391d5a8713e182b4b24a9356d8 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Sun, 3 Feb 2019 11:04:27 -0800 Subject: [PATCH 19/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 14442ce50..606bf2e50 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -157,7 +157,7 @@ class SayHello extends React.Component { } ``` -上記の構文は **実験的** なものであり、構文が変わるかもしれないこと、あるいは言語に取り入れられないかもしれないことに留意してください。 +上記の構文は**実験的**なものであり、構文が変わるかもしれないこと、あるいは言語に取り入れられないかもしれないことに留意してください。 安全にやりたい場合は他の選択肢もあります。 From 01948bec56b7040c5686627e0fea9b3cf06ae1c9 Mon Sep 17 00:00:00 2001 From: ginpei Date: Sun, 3 Feb 2019 11:12:14 -0800 Subject: [PATCH 20/23] not waiting but wanting --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 606bf2e50..68b7b6826 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -177,7 +177,7 @@ class SayHello extends React.Component { 時には同じ機能が全く異なるコンポーネント間で共有されることがあります。これは[横断的関心事 (cross-cutting concerns)](https://en.wikipedia.org/wiki/Cross-cutting_concern) と呼ばれることがあります。 `createReactClass` であれば、横断的関心事のためにレガシーな `mixins` 機能を使うことができます。 -よくある利用例のひとつは、一定時間が経過するまで自身の更新を待機するコンポーネントです。`setInterval()` を使うのは簡単ですが、その場合はメモリ節約のため、コンポーネントが不要になった際に待機をキャンセルすることが重要です。React は[ライフサイクルメソッド](/docs/react-component.html#the-component-lifecycle)を提供しており、コンポーネントが生成、破棄されるときに知らせてくれます。次のようなシンプルなミックスインを作ってみましょう。このミックスインのメソッドは簡単な `setInterval()` 機能を提供し、コンポーネントが破棄されるタイミングで自動的にクリーンアップされます。 +よくある利用例のひとつは、一定時間ごとに自分自身を更新するコンポーネントです。`setInterval()` を使うのは簡単ですが、その場合はメモリ節約のため、コンポーネントが不要になった際にキャンセルすることが重要です。React は[ライフサイクルメソッド](/docs/react-component.html#the-component-lifecycle)を提供しており、コンポーネントが生成、破棄されるときに知らせてくれます。次のようなシンプルなミックスインを作ってみましょう。このミックスインのメソッドは簡単な `setInterval()` 機能を提供し、コンポーネントが破棄されるタイミングで自動的にクリーンアップされます。 ```javascript var SetIntervalMixin = { From b8a909a59fb07a46863d13e74c6d6764429a075e Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sun, 3 Feb 2019 21:35:36 -0800 Subject: [PATCH 21/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 68b7b6826..a2fd1fb1f 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -58,7 +58,7 @@ var Greeting = createReactClass({ ## state の初期値の設定 -ES6 クラスでは、コンストラクターで `this.state` へ代入することで state の初期値を定義できます。 +ES6 クラスでは、コンストラクタで `this.state` へ代入することで state の初期値を定義できます。 ```javascript class Counter extends React.Component { From 6ce55af8981a8a39b6c95f57fa84d7a192cadd8d Mon Sep 17 00:00:00 2001 From: Toru Kobayashi Date: Sun, 3 Feb 2019 21:35:45 -0800 Subject: [PATCH 22/23] Update content/docs/react-without-es6.md Co-Authored-By: ginpei --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index a2fd1fb1f..c2a8a4e97 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -131,7 +131,7 @@ var SayHello = createReactClass({ }); ``` -これはつまり、ES6 クラスで書くとイベントハンドラーのための定型文が少し多くなってしまうということなのですが、一方では大きなアプリケーションの場合にわずかながらパフォーマンスが向上するという側面もあります。 +これはつまり、ES6 クラスで書くとイベントハンドラのための定型文が少し多くなってしまうということなのですが、一方では大きなアプリケーションの場合にわずかながらパフォーマンスが向上するという側面もあります。 この定型文的コードがあまりに醜く感じられる場合、Babel を使って**実験的**な [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) 構文提案を有効にするとよいかもしれません。 From ee1e08ed17ce78dd907fc4cb5cc8eaab1cd8d2ae Mon Sep 17 00:00:00 2001 From: ginpei Date: Sun, 3 Feb 2019 21:38:50 -0800 Subject: [PATCH 23/23] remove unnecessary cho-onpu --- content/docs/react-without-es6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index c2a8a4e97..b871161b1 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -161,7 +161,7 @@ class SayHello extends React.Component { 安全にやりたい場合は他の選択肢もあります。 -* コンストラクターでメソッドをバインドする。 +* コンストラクタでメソッドをバインドする。 * 例えば `onClick={(e) => this.handleClick(e)}` のような形でアロー関数を利用する。 * 引き続き `createReactClass` を利用する。