Mithril.jsを使ってみた

　Webアプリを作る際に、
フレームワークとか使うと、
労力の低減とか作業効率とかを期待できそうです。

　一方で、
それぞれの流儀に従った書き方をする必要が出てきます。
新たに学習したことが当面はムダにならないように、
フレームワークの選択は重要かもしれませんが、
好きなように色々試してみるのが良いのかも。

　こちらにあるように、
JavaScriptなMVCフレームワークはたくさんあります。
Angular.js や Vue.js とかが良さげかなと、
調べてみたことはありましたが、
実際に使ってみたことはなかったりします(^_^;)

　そんな折、
こちらやこちらで書かれている Mithril.js に興味を持ちました。
軽量で高速というのに惹かれました。
APIの数が少なくて学習コスト低めなのも良さげです。
公式に準じた（？）日本語のページがあるのも嬉しいですね。
ちなみに、現状の最新バージョンは 0.2.0 です。

　ということで、こちらのページで学んでみました。
こちらは英語のページですが、より具体的で参考になるかも。
とりあえず大体理解しました。

　データ構造となるModelの各プロパティに、
m.prop() で生成した getter/setter をセットし、
それらをViewとなる仮想DOMの属性にも設定することで、
getter/setter 経由で同期するようにして、
双方向バインディングを実現しているようです。
また、m.withAttr() を使うことで、
仮想DOMの属性に対するイベントハンドラを簡便に作れるようになってます。

　仮想DOMというのは、
実DOMを生成するための内部的なデータオブジェクトで、
それらの変更を監視して実DOMの生成や更新を行うことで、
必要最小限の描画コストになるようにする仕組みです。

　非同期処理など自動的に監視できないような場合は、
こちらにあるように対処する必要があるようです。
というか非同期処理が完了するまで描画を遅延させる仕組みと言えるかも。
プログレス表示とかしたい場合は明示的に m.redraw() すれば良さそうです。

　仮想DOMはMithril独特の書き方をする必要があります。
慣れればそれほど手間ではないように感じますが、
HTMLをMithrilな仮想DOMに変換するツールを使うと楽かも。
JSX形式で記述してMSXというコンパイラで変換するやり方もあるようです。

　そして、
m.mount() を使って、
ControllerとViewを実DOMに結びつけます。
あとはMithrilがうまいことやってくれます。
仮想DOMに設定したイベントハンドラが呼ばれると、
Modelも更新されるようにできるので、
Controllerでやるのは初期化くらいな感じですね。

　ということで、
実践的な学習も兼ねて、
ちょっとしたアプリっぽいのを作ってみました。
こちらの寸評に書いてある３つの確率を入力して、
運試しをするというアプリです(^_^;)
各ボックスには0~100の値しか入力できないようになってます。
横に並んだ３つの入力値の合計が100になると、
背景が淡いピンク色から淡い空色に変わります。
全ての背景を淡い空色にすると、
「運試し」ボタンが押せるようになります。
ボタンを押すたびに、
各面の確率が異なる３面サイコロを転がして結果を表示します。
試すにはこちらからどうぞ(^_^;)

　実際に試してみると、双方向バインディングは便利ですね。
DOMにidやclassを振って選択するといった従来のやり方でも、
数が少なければそれほどの手間ではないかと思いますが、
数が多くなると双方向バインディングの方が楽チンです。

　使ったAPIは、
仮想DOMを記述するための m と、
m.prop, m.withAttr, m.mount の４つだけ。
これだけ覚えればなんとかなりそうな雰囲気です。
他にも、
m.request, m.route, m.componentなど
便利そうな機能があるようです。
Mithrilはなかなか良さげかも、