Vue.js が辛くなってきた。

ひとまず現状の辛さをダンプ

今日チームで改めて話し合って辛さがハッキリしてきたので、それをつらつらと書いてく。

(今のチームは僕を含めて Rails プログラマが多くて、フロントエンドを専門にやってる人はいない。)

グローバル変数大量問題(もしくはイベント地獄問題)

たくさんの状態(変数)が必要 && 複数 DOM にまたがるレンダリングがしたい。

今は、左ペインで選択して右ペインに出す、みたいな事をしている。 左ペインはタブで様々な種類の項目を選べて、選択したものを右側でリスト化して表示している。

これをやろうとするにあたって、方向性が２つあると思っていて

• 左ペインと右ペインでコンポーネントを分けて、親玉 ViewModel に変更を通知して親玉がレンダリング制御する
  • -> イベント地獄
• 左ペインと右ペインの上位の親玉 ViewModel をつくって全ての変数を定義
  • -> これがグローバル変数のようなもので、それが大量につくられる
  • (現状はイベント地獄よりはマシだと思ってこっちを採用している)

jQuery(plugin) との合わせ技の辛さ

最初に jQuery で頑張っていた名残もあって、jQuery プラグインをいくつか使っている。 それを Vue.js と強調動作させるためにクラスをいくつか作っているけど、割りと見通しが悪い。

あとは jQuery のイベントハンドリングが便利で使っていて、それも辛さを増す原因になっている。 なんで jQuery を使っているかというと、グローバルなイベントをハンドリングする仕組みが Vue.js にないから(たぶん)。

具体的には、 左ペインで入力/選択したら右ペインでハイライトする、みたいなのをしたいと思った時に、 左ペインの入力/選択した要素はそれぞれモデルの property になってるんだけど、それらに対してまとめてイベントをリッスンして何かするって事がすっきり書けない。 そこで jQuery で $('#left-pain input').on('change', function(e) { vm.highlight(e) } のようにするんだけど、 こういうのが増えていくと、ViewModel 内でのイベントと jQuery でのイベントとが合わさって予期せぬ挙動をする事があって辛くなってくる（きた）。

Vue.js が力技で動く

これは Vue.js の利点でもあるんだけど、割りと雑に書いてもそれなりに動く。 そういうのもあって上述したような辛さが増していく。 これはまぁプログラマの責任なんだけど、いかんせんフロントエンドに対する知見が無いので、どうしよう、という感じ。

Vue.js の知見が Web 上に少ない

Vue.js で困ったことがあった時に頼れるものが少ない。手探り状態。 もっと流行ってくれればよかったのに、世の中 React.js で盛り上がっててもう誰も Vue.js 見てないんじゃないか感があって寂しさがある。

Vue.js 自体は良いライブラリだと思う

例えば管理画面でユーザのテーブルを表示していて、項目名をクリックして並び替える、みたいな事をするのには Vue.js だと割りと楽に実装できるし、便利。 IE 9 まで対応してるのも良い。 HTML もほぼそのままの形で書けるので、デザイナーフレンドリーだと思う。

なので、使いドコロだと思っている。今回のプロジェクトに Vue.js を使うにはちょっと非力だったのかなぁ、という感じ。 Vue.js が提供しているのは ViewModel だけで、その他の部分を考え始めると辛くなってくるのかなぁというのが今の感想。

というわけで次の一手を探している

正直 Vue.js (or フロントエンド)に精通している人からしたら、もっと工夫の余地はあると言われると思う。 けど、Vue.js に拘る必要姓は無いと考えているし、卒業しようと考えている。

最近はやりの React.js に乗り換えるか、と考えていたけど、どうやら React.js は足回り担当のようで、 その上のフレームワークのようなものを何にするか、が重要だという事までわかった。

個人的には、React.js + Bacon.js で FRP と呼ばれる思想に則ってやるが良いのかなぁとボンヤリ思っている。 React.js + Flux 系フレームワークも気になっている。 Web 上の知見が多そうなのは後者なのかなぁ。

ということで終わり。