山下寛人オフィシャルブログ

オイシックス株式会社 執行役員 システム本部長 山下寛人の公式ブログです。

Mithrilを使ってみた(MVC,Virtual DOM)

今後の開発でMithrilを使っていこうという話が出ているので使ってみました。

MithrilというのはJavaScriptMVCフレームワークです。あまりメジャーではありません。メジャーなものではBackbone.jsやAngularといったものがあります。流行りのReact.jsというのもありますね。AngularはMVWでReactはV(View)だけらしいです。他のものはちらっとググっただけなのでよくわかりません。でもMithril含めある程度の範囲の違いはあるもののざっくり同じ範疇だと思っていいのではないかと思います。

感想としては最初の敷居はちょっと高いです。公式のgetting startedがややわかりにくいと思います。余計なことが書いてあるしミニマムな解説になっていません。また外部の入門的な記事があまりありません。そのため要はどんな仕組みなのか把握するのに手間取りました。そこでわかったことを紹介してみようと思います。

Mithrilの目的はMVCフレームワークなので、ModelとViewを分けることです。JQueryのイメージは画面をぐりぐりいじりまわす感じです。これだと複雑なアプリケーションになってくるとコードが煩雑になってきます。そこで画面内の情報を抽象化したオブジェクトをmodelとしてviewと分離することでわかりやすくしようとするものです。例えばECサイトだと画面に商品が並んでいてカゴに入れるボタンがついていて、ショッピングカートがあります。こういう商品やショッピングカートをオブジェクトとするのですね。modelが変わったらそれに応じてviewが変わるイメージです。カゴに入れるボタンを押すとショッピングカートオブジェクトの中に商品が加わり、画面でも表示されるということです。

Mithrilが提供する仕組みは主にViewだと思います。
最小限の使い方は
1)画面を描画するfunctionを用意する
2)画面内にはめこむところを指定して組み込む
こうするとクリックなどのイベントを拾って画面を再描画してくれます。
そしてデータがちょっとしか変わらないのに画面が全部再描画になると重くなるので自動的に差分だけ反映してくれるのが特徴です。これがVirtual DOMです。

1)はこんな具合です。

csstest.view = function() {
  return m("span", {class: csstest.getClass()}, csstest.value);
}

これでspanタグに囲まれたHTMLが出力されます。

2)はこんなふうになります。

m.mount(document.getElementById("csstest"),
  {controller:function() {}, view: csstest.view}
);

これでコンテンツが表示されます。

これだけだとただHTMLを書いたほうがよっぽど早いです。1)をちょっと変えてonclickイベントを追加してみましょう。

csstest.view = function() {
  return m("span",
    {class: csstest.getClass(),
     onclick: function() {csstest.change();}
    },
    csstest.value);
}

呼び先のメソッドなどのコードは以下です。

Testclass = function(val) {
  this.value = val;
  this.change = function() {
    this.value = 1;
  };
  this.getClass = function() {
    if (this.value == 0) {
      return "red";
    } else {
      return "yellow";
    }
  }
};
var csstest = new Testclass(0);

こうすると、クリックで色が変わります。onclickイベントではオブジェクトの値を1に変えているだけです。でも色が変わるのがミソです。これはviewで再描画が走っているからです。画面をいじるという考え方とは発想が違うのがわかると思います。

Mithrilの機能は描画が主ですがわかりやすくメンテナンスしやすいMVCにするには以下のようにするとよいでしょう。
・画面を構成する要素をModelオブジェクトにする
ビジネスロジックはModelオブジェクトに実装する
・画面操作的なロジック(onclickなど)はview modelオブジェクトを作ってそこにまとめる
このへんはMithrilのgetting startedのサンプルを参照するとよいでしょう。

画面の描画がHTMLタグでなくm()で記述するというのがなかなかやっかいなところです。これについてはHTMLタグで書ける仕組みが用意されています。MSXといいます。

解説としては以上です。

所感としては慣れれば複雑なjsアプリをいい感じに書けそうではあるがもうちょっとこなれてほしいかなと思います。ドキュメントが変わればだいぶよくなりそうですし、プログラムの記述方法も初めて使う人がすっと理解できるようになるとよいと思います。これからに期待ですね。