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 について外部から口出しされたくないので。