Backbone.jsを使っている人間がVue.jsを触ってみました。

Nyle
Nyle
May 14, 2014 · 9 min read

普段はサーバサイドでゴリゴリPHPを書いているんですが、最近はJavaScriptを触る事も多いので、JavaScript界隈で話題になっているVue.jsを触ってみました。

Vue.jsの記事を見るとAngularJSと比べてる記事がほとんどだと思いますが、私が携わっているプロジェクトではBackbone.jsを中心に開発をしているので、Backbone.jsとVue.jsで実装した場合の違いを比べてみようと思います。

そもそもVue.jsとは?

いわゆるMV*的なJavaScriptフレームワークの一つだと言っていいと思います。
軽量AngularJSっていう感じのフレームワークですが、AngularJSに比べて比較的学習コストが低いフレームワークです。

大きな特徴としては

  • MVVMアーキテクチャを採用している
  • 強力なデータバインディング
  • ディレクティブ

ってところだと思います。

MVVMアーキテクチャを採用している

Vue.jsではMVVMアーキテクチャを採用しています。
それに対してBackbone.jsは一般的なMVCアーキテクチャを採用しています(まあコントローラとよばれるオブジェクトはないんですけどね)

Model,View,ViewModelで構成されるアーキテクチャなんですが、MVCの派生系でもあります。
MVCアーキテクチャを知っている方なら、Model,Viewの役割はなんとなくわかると思うんですが、ViewModelとはなんだろうって方が多いのではないでしょうか?
私自身Backbone.jsを使っていたので最初はわかりませんでした。

「Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。すなわちViewとModelの間の情報の伝達と、Viewのための状態保持のみを役割とする要素である」

とwikipediaには記載されているのですが、まあViewとModelの間にあるオブジェクトって認識で良いかと思います。
ちなみにVue.jsではvueオブジェクトの中にModelとViewが入っています。

強力なデータバインディング

Backbone.jsでデータバインディングをする場合はBackbone.stickitを利用しなければなりません。しかもバインディングを開始したいタイミングで、メソッド実行しなければなりません。

var HogeView = Backbone.View.extend({
bindings:{
'#hoge-div': 'hoge'
},
  ...
initialize: function() {
this.stickit()
}
})

非常に直感的でないですよね。
それに対してVue.jsはデフォルトでバインディング機能をもっています。
AngularJS風にディレクティブで書いてあげればバインディングしてくれます。
個人的にはVue.jsのバインディングの方が分かりやすと思いました。

<textarea v-model="input"></textarea>

ディレクティブ

ディレクティブはBackbone.jsには無い概念ですね。AngularJS使っていればわかる概念だとは思いますが、私も最初はわかりませんでした。
どのような物かを私自身まだうまく説明できませんが、「DOM要素やその子要素に変形や特殊な振る舞いを割り当てるようにする」といった感じでしょうか?(違っていたらごめんなさい。
AungularJSのディレクティブの説明になってしまいますが、こちらサイトにディレクティブの説明が詳しく記載されています。

Vue.jsとBackbone.jsでコードの書き方を比べてみよう

さて、ここからはBackbone.jsのコードとVue.jsのコードを比べて行きましょう。

Markdownエディタ

Vue.jsのサンプルの一番最初に記載されている、MarkdownエディタについてBackbone.jsとの比較をしていきたいと思います。

まずはBackbone.jsのコードを見てみましょう。

var MarkdownModel = Backbone.Model.extend({
defaults: {
text: "# hello"
}
});
Backbone.jsの場合は標準でunderscore.jsのテンプレート使うのですが、Vue.jsのようなフィルタ処理ができないので、Viewオブジェクトで実行までしなければならないので、扱い辛いというか、どこでフィルタ処理をしているかわかり辛いです。(まあもっとマシな書き方はあると思いますが...)

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。

Nyle

Written by

Nyle

Nyle Engineering Blog

ナイル株式会社のエンジニアブログです。ナイル社内で利用している技術の情報や、社内の様子などを発信しています。