第3回 React OSS Rader Scopeのソースコード解説 （1/3）

今まで学んできたことを生かしてReact OSS Radar Scope®の各コンポーネントの実装を解説します。

１）カレンダーコンポーネント

カレンダーコンポーネントは単純なリストコンポーネントです。ここまで読み進めてきた方であればだいたい理解できると思います。

var React = require('react');
var uuid = require('node-uuid');
var Constants = require('../Constants');
var Router = require('react-router');
var Link = Router.Link;
require('date-utils');
 
var Calendar = React.createClass({
  _dates: function() {
    var _this = this;
    return this.props.rankDates.map(function(d) {
      var dateStr = d.toFormat('YYYY年MM月');
      var link = Constants.ROOT_PATH + 'radarScope/' + d.toFormat(Constants.YEAR_MONTH_FORMAT);
      return <li key={"calendar-month-" + dateStr}><Link to={link}>{dateStr}</Link></li>;
    });
  },
  render: function() {
    return (
      <div key="calendar" className="list-container">
        <div key="calendar-container">
          <h3 key="calendar-title">表示月</h3>
          <ul key="calendar-list">
            { this._dates() }
          </ul>
        </div>
      </div>
    );
  }
});
 
module.exports = Calendar;

単純にリストで表示月をレンダリングしているだけですが、クリックしたときに画面遷移をするために、ReactRouterの機能である<Link/>タグを利用しています。<Link/>タグはtoに指定したURLへの遷移を行います。

routes.jsx

初期表示や、上記のカレンダーがクリックされた場合に実行されるのがRoute処理です。 routes.jsxでは下記のように定義しています。

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var Constants = require('./Constants');
var Main = require('./components/Main');
 
module.exports = (
  <Route name="radar-scope" path={Constants.ROOT_PATH}>
    <Route name="radarScope" path="radarScope" handler={Main}/>
    <Route name="radarScopeYM" path="radarScope/:yearMonth" handler={Main}/>
    <Route name="radarScopeCategory" path="radarScope/category/:categoryId/:yearMonth" handler={Main}/>
    <DefaultRoute handler={Main} />
  </Route>
);

カレンダーがクリックされた時には/radarScope/201502といったURLになるので<Route name="radarScopeYM" path="radarScope/:yearMonth" handler={Main}/>が該当します。ここでのハンドラがclient.jsxで指定されているRouter.run()に渡ります。Router.run()に渡されたroute情報から年月のデータを取得し、サーバサイドのランキングデータ、カテゴリ一覧、プロダクト一覧を取得してReact.render()します。