Reactコンポーネントへの理解を深める

基礎からはじめるReact入門 第2回

イベントハンドリング

　次にイベントのハンドリングの方法について解説します。ここはReactの良さがよく分かる部分だと思います。通常のJavaScriptの場合、以下のようなコードによって、onclickイベントをloginAuthenticaitonメソッドでハンドルします。あるいはjQueryであれば.onを利用するといった具合でしょう。

<button onclick=“loginAuthentication()“> 
    Login
</button>

　このような表記方法では、どこにでもメソッドを記述できてしまうため、アプリが大きくなるにつれて、どうしてもコードが複雑になってしまうという問題がつきまといます。

　Reactを利用することでコンポーネントクラスにイベント処理をまとめることができ、この複雑さ問題を解決できます。以下のサンプルプログラムで確認しましょう。1から30までの数字のルーレットです。

リスト2　RouletteApp/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

// Reactコンポーネントの宣言
class Roulette extends React.Component {
  constructor(props) { 
    super(props);
    this.state = { number: 1,
            isStart: false};
    this.toggleButton = this.toggleButton.bind(this);  // （1）
  }

  // state.numberを更新するメソッド
  shuffle(){
    var rand = Math.floor(Math.random() * 30) + 1;
    this.setState({number: rand});
  }

  // ルーレットを開始するメソッド
  startRoulette(){
    this.interval = setInterval(() => this.shuffle(), 50);
  }

  // ルーレットを停止するメソッド
  stopRoulette(){
    clearInterval(this.interval);
  }

  // ルーレット開始、または停止とイベントに合わせてボタンのラベルを切り替える
  toggleButton(){
    if(this.state.isStart){
      this.stopRoulette();
    } else {
      this.startRoulette();
    }

    this.setState((prevState) => ({
        isStart : !prevState.isStart
    }));
  }

  // buttonのonClickイベントにtoggleButtonをバインド
  // Reactコンポーネントを返す
  render() {
    return (
      <div>
        <p>number : {this.state.number}</p>
        <button onClick={this.toggleButton}>
          {this.state.isStart ? 'Stop' : 'Start'}
        </button>
      </div>
    );
  }
}

// DomにReact要素を挿入
ReactDOM.render(
  <Roulette />,
  document.getElementById('root')
);

図3　実行結果

　Reactを使うことで、コンポーネント内にイベントハンドラをまとめることができるため、DOM生成時にリスナーを登録する必要がなくなります。コーディングの注意すべきこととしては、（1）のようにハンドラとなるメソッドをクラスにbindする必要がある点です。bindすることで、toggleButtonメソッドがclickイベントハンドラとして登録可能になります。bindを忘れてしまうとonclickイベントが発生したときに、undefinedとなります。

［構文］constructor内でのイベントハンドラ設定

constructor(props) {
  super(props);
  this.state = { ... };

  this.[hadlerName] = this.[functionName].bind(this);
}

handlerName: イベントハンドラ名, functionName: 関数オブジェクト名

　create-react-appを使ってアプリを作成した場合は、以下のように記述することで、bindせずにイベントハンドラを設定することもできます。

<button onClick={(e) => this.toggleButton(e)}>
    {this.state.isStart ? 'Stop' : 'Start'}
</button>

あとがき

　今回は、いくつかのサンプルを交えてコンポーネントに関する重要な概念を紹介しました。

　次回はサードパーティー製のコンポーネントセットであるMaterial-UIを利用して、デザイン性のアプリをクイックに開発する手法を紹介します。