[MarionetteJS→React 001] 静的コンテンツの表示

このエントリーをはてなブックマークに追加

はじめに

本業ではMarionetteJSを使っていて、Backbone.Marionette.js: A Gentle Introductionという本と出会ったのですが、いい感じにMarionetteJSでSPAを作る方法をまとめている良書です。

だけどMarionetteJSを使ってみるとやっぱりコードを追いかけるのが大変すぎる。。。イベント地獄でどこで何が起きているのか常に把握し続けるのは至難の業。(特に自分が作っていないコードなど)これはでもMarionetteJSの特性上仕方ないのかなー、と思いつつ、やっぱり最近の流行のReactを知っておきたいってのが組み合わさって、MarionetteJSの理解も深めつつ、それをReactで書くとどうなるのかっていうのを二兎追うものはなんとやら的なスタンスで検証していきたいと思います。
参考にするのは上の著書でも使われているリポジトリです。これをReactで書いてみます。
React側については現時点でmasterブランチでしか手に入らない1.6系のTypeScriptでTSX書いて行きたいと思います。

準備

gulpやらなにやらって話はここではしません。割りとソースとか設計思想にだけ注目したいので、いきなり実装の方に進みます。もちろん、指摘や質問がある場合はコメント欄等で書いてもらえるうれしいです。
とりあえずは自分で作ったminimal-tsx-starterリポジトリからテンプレをとってきて

npm install
tsd reinstall --save --overwrite
gulp browserify

実行して動作確認。

静的コンテンツの表示

MarionetteJS

まずはMarionetteJSによる静的コンテンツの表示です。
以下、ソース抜粋。

<div id="app-container">
      <div id="main-region" class="container">
        <p>Here is static content in the web page. You'll notice that it gets replaced by our app as soon as we start it.</p>
      </div>
    </div>

    <script type="text/template" id="static-template">
      <p>This is text that was rendered by our Marionette app.</p>
    </script>

    <script src="./assets/js/vendor/jquery.js"></script>
    <script src="./assets/js/vendor/json2.js"></script>
    <script src="./assets/js/vendor/underscore.js"></script>
    <script src="./assets/js/vendor/backbone.js"></script>
    <script src="./assets/js/vendor/backbone.marionette.js"></script>

    <script type="text/javascript">
      var ContactManager = new Marionette.Application();

      ContactManager.StaticView = Marionette.ItemView.extend({
        template: "#static-template"
      });

      ContactManager.on("before:start", function(){
        var RegionContainer = Marionette.LayoutView.extend({
          el: "#app-container",

          regions: {
            main: "#main-region"
          }
        });

        ContactManager.regions = new RegionContainer();
      });

      ContactManager.on("start", function(){
        var staticView = new ContactManager.StaticView();
        ContactManager.regions.main.show(staticView);
      });

      ContactManager.start();
    </script>

 

MarionetteJSは定番のパターンですが、まずレイアウトを決めるLayoutViewで、使用する領域(region)を定義して、その中に子ViewとしてItemViewを入れています。MarionetteJSのコーディングスタイルは基本的にこんな感じになるかと思います。
marionette→react_001

React

似たようなページをReactで書いてみます。個人的にTSXをいっぱい書きたかったので、ReactはTypeScriptで書くことにしています。

/// <reference path="../typings/tsd.d.ts" />

import * as React from "react";

class ContactManager extends React.Component {
  render () {
    return <p>
    This is text that was rendered by our React app.
    </p>
  }
}

let element = React.createElement(ContactManager);
React.render(element, document.querySelector('#main-region'));

 

なんの変哲もないコードですが、Reactはコンポーネントを作って仮想DOMを作成していくコーディングスタイルです。TypeScript1.6からJSXがサポートされるようになるので、TypeScriptでReactが書けるようになったのです!
上のコードはContactManagerというコンポーネントを#main-regionrenderしてねーっていう単純な内容です。
DOMもしっかり仮想DOMから変換されてます。

<div id="app-container>
  <div id="main-region" class="container"><p data-reactid=".0">This is text that was rendered by our React app.</p></div>
</div>

特に述べることはありませんが、2つとも意図通りには動いています。

Written on July 30, 2015
このエントリーをはてなブックマークに追加