みんな大好き TodoMVC を MagJS で書いてみました。一応 MagJS も仮想 DOM ファミリーの一員とみなせなくもないし、空きがあったのでお邪魔しまーす。

たぶんどこかで詰まるだろうなーという事前の予想に反して半日くらいでほぼ形になったので、なんとか頑張ってみました。コメント少なかったり、ちょっと微妙なところもあると思いますが、ご笑覧ください。

React + Alt や Mithril などと見比べて、あーだこーだ言うのが楽しくていいんじゃないでしょうか ;-)

動作確認状況

Chrome と Firefox、Safari は大丈夫そうです。IE は Promise の Polyfill 入れて Edge だけ確認しました。ダブルクリックで編集した後 Enter で確定すると、テキストボックスは消えるのにカーソルが点滅するというオカルト現象が発生しますが、それ以外は動いてます。

あと、IE の localStorage はローカルファイルのブラウズ時は無効なので、もし試すなら http サーバー立てて下さい。

変なところあったらコメントもらえれば。または PR ください。

とりあえずの感想

mag.module を使ったコンポーネント分割が自然で、依存関係も必要最小限で済みます。今回はトップレベルのコントローラーも書いてますが、これは MagJS のライフサイクルイベント調査するのが目的だったので、実は削除しても問題なく動きます。

そうするとアプリの基本構成はブートストラップ、ビュー、モデルぐらいで足りる。必要なところだけ書けば良いので、ボイラープレート感もない。何より素の js だけってのが爽快です。Mithril 由来の仕組みもとても便利なので、書いてて楽しい。

ビューは何か困った時すぐに dom を弄れるので安心感あります。ただ、第一引数の state が、コントローラーのインスタンスと dom をマージしたオブジェクトなので要注意。最初よくわからず、間違ってコントローラーのメソッドを上書きして悩んだりしました。

というわけで、ちょっと気をつけるところはあるものの、総じてシンプルで素直。あ、ちなみに一箇所だけ js に html が混じったところあります。まあ、そういう風にも書けるよというサンプルとして良いかなと思い、そのままにしてます。

今後の予定

TodoMVC 書いて色々気付きがあったので、コード解説がてら何回かに分けて書きます。あとできれば、テストも追加してみたいです。どっちも年明け以降になりますが。

パフォーマンステストは誰か好きな人がやればいいと思います。

まとめ

MagJS でも、ある程度実用的なアプリケーションを開発できる手応えを掴むことができて良かったです。TodoMVC は小さくて取るに足らないアプリかも知れませんが、まずそのレベルを見通しよく書ける（た）ということは、今後の展開を考える上での最低条件をクリアできたかなと思います。

学びが多くてなかなかいい一年でした。来年もまたよろしくお願いします。

参考

TodoMVC 仕様