Reactに注目が集まっているのは特にVirtual DOMによるところが大きいのではないでしょうか。JavaScript側ではとにかく必要な部分全体をレンダリングしてしまって、実際の描画についてはReactに任せられるのがメリットです。 そんなReactと同じくVirtual DOMをサポートしたJavaScript UIフレームワークがCape.JSです。他にもいくつもの機能が備わっています。

Cape.JSの使い方

Cape.JSのサンプルコードです。mというオブジェクトにタグを追加していくのが基本形です。

"use strict";

var TodoList = Cape.createComponentClass({
  render: function(m) {
    m.ul(function(m) {
      this.items.forEach(function(item) {
        this.renderItem(m, item);
      }.bind(this))
    });
    this.renderForm(m);
  },

  renderItem: function(m, item) {
    m.li(function(m) {
      m.label({ class: { completed: item.done }}, function(m) {
        m.input({ type: 'checkbox', checked: item.done,
          onclick: function(e) { this.toggle(item) } });
        m.space().text(item.title);
      })
    })
  },

  renderForm: function(m) {
    m.form(function(m) {
      m.textField('title', { onkeyup: function(e) { this.refresh() } });
      m.button("Add", {
        disabled: this.val('title') === '',
        onclick: function(e) { this.addItem() }
      });
    });
  },

  init: function() {
    this.items = [
      { title: 'Foo', done: false },
      { title: 'Bar', done: true }
    ];
    this.refresh();
  },

  toggle: function(item) {
    item.done = !item.done;
    this.refresh();
  },

  addItem: function() {
    this.items.push({ title: this.val('title'), done: false });
    this.val('title', '');
    this.refresh();
  }
});

もっと小さなデモとしては次のようになります。data要素を使って、data.nameといった指定で文字を取得できるのが特徴です。

index.html

<h1>Greeting from Cape.JS</h1>
<div id="hello-message" data-name="World"></div>

<script src="./hello_message.js"></script>
<script>
  var component = new HelloMesage();
  component.mount('hello-message');
</script>
hello_message.js

var HelloMesage = Cape.createComponentClass({
  render: function(m) {
    m.div('Hello, ' + this.root.data.name + '!')
  }
});

上記のコードを実行した結果がこちらです。

他にもフォームを使ったデモがあります。

簡単なTodoリストのデモです。

Cape.JSの特徴としては、SPA（シングルページアプリケーション）をフルスタックにサポート、マークアップビルダー、フォームのデータ操作、データストア、Railsライクなルーターが挙がっています。React、Ruby on Railsから強く影響を受けているようです。

Cape.JSはJavaScript製、MIT Licenseのオープンソース・ソフトウェア（MIT License）です。

oiax/capejs