クラスの基本を勉強しよう

前回までの実装で気になったところは、値を変更するたびにrenderCounterApp関数を呼び出さなければいけないところです。そこを修正していきたいのですが、その前にjavascriptのクラスの概念を勉強しましょう。

クラスとは設計図のようなもので、ポイントは以下の通りです。

●　classというキーワードで宣言
●　newというキーワードで、クラスを使う。
●　constructorはnewが使われた時に、実行される。

例として、Animalクラスを作成してみます。

class Animal {
 constructor(name) {
   this.name = name;
 }
 bark() {
   console.log(this.name + "が吠えています");
 }
}
animal = new Animal('動物');
animal.bark();
//動物が吠えています

クラスは継承することもできます。

●　extendsキーワードを使って継承します。
●　継承することによって、親クラスのメソッドも実行できます。

class Dog extends Animal {
 constructor(name) {
   super(name)
 }
}
dog = new Dog('犬');
dog.bark();
//犬が吠えています

Reactのクラスを使ってみよう

●　React.Componentを継承したクラスを作ります。今回はCounterクラスです。
●　作成したクラスは、CounterというタグでReactDOMに渡すことができます。

src/app.jsを作成してみましょう。

class Counter extends React.Component {
 handleAddOne() {
   console.log('handleAddOne');
 }
 handleMinusOne() {
   console.log('handleMinusOne');
 }
 handleReset() {
   console.log('handleReset');
 }
 render() {
   return (
     <div>
       <h1>Count: </h1>
       <button onClick={this.handleAddOne}>+1</button>
       <button onClick={this.handleMinusOne}>-1</button>
       <button onClick={this.handleReset}>reset</button>
     </div>
   );
 }
}
ReactDOM.render(<Counter />, document.getElementById('app'));

この状態だと、このように表示されるはずです。