質問: this.state; return ( this.setState({count: count -1})}>- {count} this.setState({count: count +1})}>+ ); } } ``` 【1つ目の疑問】 ・1つ目と2つ目のコードでは同じ**stateの初期化**を行っているのか? 【2つ目の疑問】 ・1つ目の`constructor`内ではthis.stateと`this`が必要であるが、2つ目ではなぜ`this`が必要ではないのか。 【3つ目の疑問】 ・これらの疑問を調べていた結果`class fields proposal`という用語にたどり着きました。 しかし、これがなにを意味しているのかがわかりませんでした。。。ES7で提案された儀式?? 疑問が多くて申し訳ありません。。よろしくお願いいたします。
回答: javascriptの class ブロックは、オブジェクト定義の方法におけるシンタックスシュガーに過ぎません。 古典的な手法 でオブジェクトを定義すると、非常に多くのコードを書くとこになります。 ``` function App(props){ React.Component.call(this,props); // 親オブジェクトを呼ぶ this.state = { count:0 }; } // 継承の設定 App.prototype = React.Component.prototype; App.prototype.constructor = App; // メンバ (class fields) App.prototype.render = function() { const { count } = this.state; return ( this.setState({count: count -1})}>- {count} this.setState({count: count +1})}>+ ); }; ``` class ブロックによって 1つ目, 2つ目 と短く書けるように変わっています。 > > ・1つ目と2つ目のコードでは同じstateの初期化を行っているのか? > > > いえ、1つ目は、コンストラクタ関数(Ctor)内で、state プロパティを初期化していますが、 2つ目は、コンストラクタ関数の[[Prototype]]に定義されたオブジェクトを**分割代入**することで、stateプロパティは初期化する必要がなくなっています。 class ブロックの書き方が変わったというのもあります。 1つ目はプロパティを書くシンタックスシュガーが実装されておらず、関数内で state プロパティに代入する必要があった。2つ目はその制約が解消され、分割代入の恩恵により [[Prototype]] に予め定義されている state の count(プリミティブ) を参照するだけでよくなった。 > > 1つ目のconstructor内ではthis.stateとthisが必要であるが、2つ目ではなぜthisが必要ではないのか。 > > > constructor内に限らず、メンバ関数内では、メンバを参照するときにthisが必要です。 2つ目の方法で、render() 内部で this.state を参照するときに thisを使っています。 > > class fields proposal これがなにを意味しているのか > > > class field(オブジェクトのメンバの書き方) + proposal(提案) ということで、class ブロックの書き方(シンタックスシュガー)のルールを詰めていこうという、仕様策定されている人たちのご都合を意味しています。