コンポーネントの作成

  • 目標：コンポーネントを作成し、クライアントサイドで処理させて表示
  • 学習：コンポーネントの構成要素、Sailsでの構築方法

概要

Reactはコンポーネント指向のUIライブラリです。すべての画面要素はコンポーネントとして作成し管理します。ルート要素もページ要素もフォームもパーツも、すべてコンポーネントとして作成します。

コンポーネント化するメリットは、「責務の分離」「再利用性の向上」だと思います。

実装

  1. コンポーネントの大枠
  2. Sailsでの単純なコンポーネント表示

コンポーネントの大枠

  • React.Component をextendsすると、コンポーネントを作れる
  • コンポーネントが保持する状態は、コンストラクタで this.state として設定する
  • render 関数で JSX を記述すると、そのコンポーネントが表現するDOM要素を記述できる
  • JSXのDOM要素中にイベントハンドラを作成でき、コンポーネントの関数を呼び出せる

/assets/react/Main.js

※boilerplateに作りこみ済です。

'use strict';

import React from 'react';

// React.Componentクラスを継承する
export default class Main extends React.Component {
  constructor() {
    super();

    // 自身の管理する状態変数を定義
    this.state = {
      count: 123
    };
  }

  // 自身の状態を変更するためのハンドラ
  _handleClick(e) {
    const newCount = this.state.count + 1;

    // 新しい、自身の状態を設定する。
    // 必ずsetStateを使う。（使わないと状態がViewに反映されない）
    this.setState({
      count: newCount
    });
  }

  render() {
    // JSX記法。HTMLのように書ける。
    // ※必ず1つのブロックでくくらなければならない
    return ( 
      <div>
        <div>
          {/* クリックイベントを、指定のハンドラにバインドできる */}
          <button onClick={this._handleClick.bind(this)}>Click to Increment</button>
        </div>
        {/* 変数は自動で更新される */}
        <span>{this.state.count}</span>
      </div>
    );
  }
}

Sailsでの単純なコンポーネント表示

※boilerplateに作りこみ済です。

  • HTMLテンプレート
  • レンダリング処理のためのController
  • URLルーティング設定
  • クライアントサイドのエントリポイント

/views/react.ejs

id付きのdivブロックを1つ作り、Reactのレンダリングターゲットにする。

<div id="main">
</div>

/api/controllers/ViewController.js

レンダリングターゲットを出力するためのControllerを作成。

'use strict';

class ViewController {
  first(req, res) {
    res.view('react');
  }
}

module.exports = new ViewController;

/config/routes.js

サーバサイドルーティング。rootのアクセスを、ViewController.firstに割り当てる。

module.exports.routes = {
  'GET /': 'ViewController.first'
};

/assets/scripts/app.js

クライアントサイドのエントリポイント。Mainコンポーネントをdivに書き出すように指示。

import React from 'react/addons';
import Main from './main';

React.render( <Main />, 
  document.getElementById("main")
);