Webアプリ開発 React.js フロントエンド環境 Part(2) 3つ並べゲーム(2)

Contents

はじめに
React開発環境”Code Pen”
React Code “インタラクティブ処理”
React Code “ステート変数の更新”
まとめ

はじめに

こんにちわ、swim-loverです。 Webアプリケーションの勉強をはじめてみました。今の目標は、出席簿アプリを作ることです。まずはフロントエンド側をさわってみます。

第一回は、Webアプリ開発環境、公式サイトにある三つ並べゲームで、React.jsのクラス間データ受け渡し(props)について学びました。

今回も引き続き、三つ並べゲームのサンプルを使って、勉強したいと思います。

React開発環境”Code Pen”

チュートリアルに従って行った第一回の変更内容ですが、ブラウザを閉じると変更内容が元に戻っています。Tic tac Toeアプリは多くの人が参照するため、保存できるようになっていないのも当然ですね。毎回、最初からコードを変更するのはあり得ないため、自分の環境”my tic tac toe”を作れないか調べてみました。

ReactをWeb上で試せる環境として、”Code Pen”が紹介されていました。早速アカウント作ってみました。

そもそも、Tic tac Toeアプリ自体が”Code Pen”で作られていることも、すぐに気がつきました。そこで、Tic tac ToeアプリのHTLM、JS、CSSの３つのファイルをそのままコピーして使わせてもらうことにしました。

さらに、JSの設定が必要だったの、歯車マークをクリックして、以下の設定を行っています。Tic tac Toeアプリの設定をそのまま使用しました。いずれは、設定変更が必要になるかもしれませんが、まずは、この設定で進めたいと思います。

React Code “インタラクティブ処理”

OnClickイベント時に処理を行う関数functionを登録する感じでしょうか？それほど違和感はありません。<button>タグの中に処理を書き込みます。

四角いマスのなかでマウスをクリックすると、開発者コンソール画面に、’click’を表示されます。

なお、開発者コンソール画面は、chromeブラウザの場合、Cmd+opt+J(Mac)で現れます。

class Square extends React.Component {
  render() {
    return (
        <button className="square" onClick={function() { console.log('click'); }}>
        {this.props.value}      
        </button>
    );
  }
}

アロー関数(=>)を使うと、タイプ量が減らせるようです。確かに、”function”は毎回出てきてもコードの可読性が下がるのだと思います。これも慣れの問題だと思います。

class Square extends React.Component {
  render() {
    return (
 //     <button className="square" onClick={function() { console.log('click'); }}>
     <button className="square" onClick={() => console.log('click')}>  
        {this.props.value}
      </button>
    );
  }
}

React Code “ステート変数の更新”

次にSquareクラスに何らかの状態を覚えさせておくための変数stateを使用します。ここで、変数stateは親クラスで定義していいると仮定しています。(なぜなら、this.setState()メソッドで値’X’をセットしているため、あらかじめ、用意されているものとしました。)　

変数stateは、Squreクラスの実態（インスタンス）が実際に生成された時に初期化(null)したいので、コンストラクタconstructor()に書くことになります。チュートリアルでは、superクラス（親クラス）のコンストラクタを明示的に読んでいますので、そのまま従います。

ここで“pros”は親クラスで定義している変数だと理解しておくことにしました。

<button>タグの中身を、State変数にXを設定する処理に書き換えます。

class Square extends React.Component {
  constructor(props) {  //constructor
    super(props);       //call super class
    this.state = {      //init sate value
      value: null,
    };
  }
  render() {
    return (
//     <button className="square" onClick={function() { console.log('click'); }}>
//     <button className="square" onClick={() => console.log('click')}>  
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

クリックされた四角のところが’X’で書きかわりました。