Vue.js 1.x で bouzuya/bbn-drawing-vuejs をつくっている。
まず今回の目的だ。突然「あるひとつ HTML に JavaScript での動きを加える」というお題が与えられた。ぼくはこの状況に適したなにかを探すことになった。それを探して試すことが目的だ。
なぜ Vue.js なのか?
jQuery は手っ取り早いがつまらない。React は HTML が既にあるとき JavaScript で HTML をつくることになってしまい二度手間だ。Template として HTML を使うものが良い。AngularJS は RALLY で使っているのでつまらない。Vue.js が良さそうだ。Vue.js は以前に (2016-07-21, 2015-07-24, 2015-07-27, 2015-08-05) 試している。React / Flux を経て、いま使うとどうなるのか……。
なぜ Vue.js 1.x なのか?
せっかくなので 2.0 をと思ったのだけど、はじめようとしたときに document が見当たらなかったので (あとで @kazu_pon が教えてくれた) 。とりあえず、Vue.js 1.x を選んだ。
なぜ bouzuya/bbn-drawing-vuejs なのか?
検証のために適当なお題をでっち上げた。いままでの「毎週なにか描く」の一覧を表示することにした。まとめて展示したい。
Vue.js はどうか?
まだ模索している段階だ。
改めて Vue.js を試してみて View, ViewModel としての書き心地は良好だ。簡潔に書けるし、直感的に動く。
ただ React などの Virtual DOM の感覚とはやはり違う。あちらは関数で最終的に表示したい View (Virtual DOM) をつくり、あとは差分更新に期待する。こちらは data
を wrap した proxy object の操作時に再描画が要求されることを意識する。View が状態を持つことを意識させられる。この違いが大きい。
全体として見たときの Vue.js は Flux のような構造をつくりにくい。ただ意識の問題でうまく切り分けられるとは思う。まだこのあたりで模索している。
大枠としては Flux / Redux に近い。操作から Command を発行して Event を受けて再描画という一連の流れをつくる。bouzuya/bbn-cycle でためしている形に持っていきたい。
何も考えずに書いてみたところ ViewModel の構造に Model が引きずられてしまった。先に書いた再描画のための変更監視の目的の proxy object を Model 側に受け渡してしまった。これは良くない。再描画の判断は ViewModel で閉じるべきだ。
また可変の object を前提としている点も嬉しくない。同一の参照を保持し続ける構造も ViewModel で閉じてほしい。ViewModel に Model が引きずられるのは良くない。
ちなみに Vuex は試していない。Model について外部から口出しされたくないので。