今、一番熱いMVVMフレームワーク、Vue.jsのガイド、(http://vuejs.org/guide/)を訳してみました。

シンプルさ、美しさに驚愕せよ、と言いたい。基本はGoogle翻訳ですので、まだ日本語としておかしいところあるかもしれません。Google翻訳のストレートな機械翻訳よりは読みやすいと思います。

はじめに

Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリです。

技術的には、 Vue.jsはMVVMパターンのビューモデルの層に焦点を当てています。双方向のデータバインディングによって、ビューとモデルを接続します。実際のDOM操作と出力フォーマットはディレクティブとフィルタにより抽象化されます。

Vue.jsの哲学は、目標は可能な限り単純なAPIとMVVMデータのデータバインディングの利点を提供することです。モジュール性とコンポーザビリティも重要な設計上の考慮事項です。Vue.jsは全部の機能を持つような本格的なフレームワークではなく、シンプルで柔軟性を持つように設計されています。ラピッドプロトタイピングのために単独でVue.jsを使用したり、カスタムのフロントエンドスタックの他のライブラリと利用する事も出来ます。また、Firebaseなどのノーバックエンドサービスにも自然にフィットします。

Vue.jsのAPIは非常にAngularJS 、 KnockoutJS 、 Ractive.jsとRivets.jsに影響されています。しかし、類似しているとはいえ、Vue.jsはシンプルさと機能性とのバランスでスイートスポットを見つけており、これらの既存のライブラリの代替手段になっていると信じます。

既にこれらのライブラリの用語に精通している場合でも、Vue.jsでの意味は異なる場合がありますので、以降のコンセプト概要に目を通す事をお勧めします。

コンセプト概要

ビューモデル

モデルとビューを同期させるオブジェクト。 Vue.jsでは、ビューモデルは、Vueのコンストラクタまたはそのサブクラスでインスタンス化されています。

var vm = new Vue({ /* options */ })

これはVue.js.を使用する際に開発者として利用する、もっとも主要なオブジェクトです。詳細については、Vueクラスを参照してください。

ビュー

ユーザーが見ている実際のHTML/ DOMです。

vm.$el // The View

Vue.jsを使用するときは、カスタムディレクティブ（後述します）を除き、DOMをあなた自身で操作する必要はめったにありません。データが更新されたときに自動的にビューが変更されます。これらのビューの更新はtextNodeにいたるきめ細かな精度で行われます。同期処理はバッチ処理にされ、高いパフォーマンスのために非同期で実行されます。

モデル

わずかに変更されたプレーンなJavaScriptオブジェクトです。

vm.$data // The Model

Vue.jsでは、モデルはシンプルでプレーンなJavaScriptオブジェクト、つまりはデータオブジェクトです。Vue.jsではモデルのプロパティとモデルの変更と、それを観察しているビューモデルを操作することができます。 Vue.jsではデータオブジェクトのプロパティを、ES5のgetter/ setterへ変換します。それにより、ダーティチェックを必要とせずに直接操作を可能になります。

データオブジェクトは所定の場所で変化するので、参照によってデータオブジェクトを変更することで$vm.dataを変更する場合と全く同じ効果を得られます。このことにより、複数のビューモデルのインスタンスが同じデータを観察することも簡単にできるようになります。

技術的な詳細は、インスタンス化オプション:dataを参照してください。

訳者注：つまりは、Model(=データオブジェクト)、View(=DOM)があり、それをViewModelが同期させるわけですね。

ディレクティブ

プレフィックスのついたHTMLの属性で、Vue.jsにDOM要素に対して何かをするを教えます。

<div v-text="message"></div>

ここでのdiv要素には値がメッセージのv-textディレクティブが含まれています。このディレクティブは、divのtextContentをビューモデルのmessageプロパティと同期させることをVue.jsに伝えています。

ディレクティブは様々なDOM操作をカプセル化することができます。例えば、v-attrでは要素の属性を操作できます。v-repeatは配列に基づいて要素を複製します。v-onは、イベントリスナーをアタッチします。後でもう一度説明しましょう。

Mustacheバインディング

テキストと属性の中でmustacheスタイルのバインディングも利用できます。それぞれ、v-textとv-attrに置き換えて処理されます。

<div id="person-{{id}}">Hello {{name}}!</div>

この機能は便利ですが、幾つか気をつける必要があります。

要素ののsrc属性は、値が設定されたときにHTTPリクエストを行うため、テンプレートが最初に解析されたときに404となります。この場合のv-attrの方が好ましい。

Internet ExplorerはHTMLを解析するときに無効なインラインスタイルの属性を削除するので、IEをサポートする場合はインラインCSSをバインドするときに、必ずv-styleを使用してください。

エスケープされていないHTMLのために、{{{ }}}、このようなトリプルmustacheを使用することができます。その場合、トリプルmustacheはv-htmlに変換されます。しかし、トリプルmustacheにより、潜在的なXSS攻撃のための窓が開くことになります。したがって絶対にデータソースのセキュリティが信頼できる場合か、信頼できないHTMLをサニタイズするカスタムフィルタのパイプを通した場合にのみ、トリプルmutacheを使用するのが良いでしょう。

フィルター

ビューを更新する前に生の値を処理するために使用される関数。これらは、ディレクティブやバインディングの中で以下のようにパイプ表記されます。

<div>{{message | capitalize}}</div>

divのTextContentのが更新される前に、messageの値はcapitalize関数を介して大文字になります。詳細については、フィルタの詳細を参照してください。

コンポーネント

Vue.jsではコンポーネントは単なるビューモデルコンストラクタです。コンストラクタをVue.component(ID,constractor）を使用して、IDに関連づけて登録します。関連するIDを持っていることによって、他のビューモデルの中でもv-attrディレクティブでテンプレートで入れ子にすることができます。この単純なメカニズムは、最新のブラウザや重いpolyfillsを必要とせずに、ディレクティブの再利用とW3CのWeb Componentsの仕様と同様の方法でのビューモデルの構成を可能にします。小さなコンポーネントにアプリケーションを分割することにより、結果として、高度に分離し、保守性のあるコードベースができます。詳細については、ビューモデルを構成するを参照してください。

クイック事例

<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li
            v-repeat="todos"
            v-on="click: done = !done"
            class="{{done ? 'done' : ''}}">
            {{content}}
        </li>
    </ul>
</div>

var demo = new Vue({
    el: '#demo',
    data: {
        title: 'todos',
        todos: [
            {
                done: true,
                content: 'Learn JavaScript'
            },
            {
                done: false,
                content: 'Learn vue.js'
            }
        ]
    }
})

結果はjsfiddleで確認できます。

TODOをクリックしてトグルすることができます。また、ブラウザのコンソールを開いて、デモのオブジェクトで遊んでみると良いかもしれません。 - 例えば、demo.title変更demo.todosに新しいオブジェクトを押し込んだり、TODOのDONE状態を切り替えるなどができます。

今、いくつか質問したいことがあるかもしれません。心配しないでください。すぐに補います。次はディレクティブの詳細です。