はじめに
JsViewsはJsRenderのテンプレートに宣言型データバインドを追加するフレームワークです。これにより、MVVM（Model‐View‐ViewModel）パターンを簡単に実装できます。
対象読者
- JavaScriptデータバインドフレームワークに興味のある方
- WebアプリケーションにおけるMVVMパターンに興味のある方
- JavaScript、jQueryの基本を理解している方
必要な環境と準備
以下のサイトから、jsviews.jsとjQueryをダウンロードしてください。
JsViewsはJsRenderの機能を拡張するjQueryのプラグインです。JsViewsのダウンロードページでjsviews.jsをダウンロードしてください。jsviews.jsには、JsRenderとJsViewsが含まれています。
JsRender（jsrender.js）とJsViews（jquery.views.js）を個別にダウンロードすることもできます。jsviews.jsをダウンロードするか、jsrender.jsとjquery.views.jsの両方をダウンロードしてください。
これらのファイルには非圧縮版と圧縮版の2種類のjsファイルがあります。非圧縮版・圧縮版については第1回を参照してください。
データバインドとは
JsViewsは、データバインドフレームワークです。
データバインドとは、データソースとなるビジネスロジックとUI（ユーザーインターフェース）を関連付けるプロセスです。JsViewsでは、データソースはJavaScriptのオブジェクトで、UIはHTMLです。
静的データバインドと動的データバインド
データバインドは、静的データバインドと動的データバインドの2種類に分類できます。静的データバインドでは、データソースとUIの関連付けは1度だけ行われます。そのため、データバインドを行った後にデータソースの値を変更してもUIは更新されません。それに対し、動的データバインドでは、データソースの値を変更すると、それに応じて自動的にUIが更新されます。
前回までで紹介したJsRenderは、静的データバインドを行うフレームワークと言えます。
JsViewsは動的データバインドを行うため、データソースであるJavaScriptのオブジェクトを変更すると、それに応じてUIであるHTMLが変更されます。
動的データバインドの種類
動的データバインドには、いくつか種類があります。
1. 一方向のデータバインド
データソースの値を変更すると、それに応じて自動的にUIが更新されます。
2. 逆方向のデータバインド
UIを変更すると、それに応じて自動的にデータソースの値が更新されます。
3．双方向のデータバインド
データソースの値を変更すると、それに応じて自動的にUIが更新されます。また、UIを変更すると、それに応じて自動的にデータソースの値が更新されます。
JsViewsは双方向のデータバインドを行います。つまり、JavaScriptオブジェクトのプロパティの値を変更すると、自動的にHTMLが更新されるだけでなく、HTMLの値を変更すると、自動的にJavaScriptオブジェクトのプロパティの値が更新されます。
バインディングの宣言
JsViewsではUIの定義の中にバインディングを宣言します。UIは、HTML、もしくは、HTMLを出力するテンプレートとして定義します。
JsViewsのようにUIの定義の中にバインディングを宣言するものを、宣言型データバインド呼びます。
データバインドとMVVMパターン
JsViewsは双方向の宣言型データバインドフレームワークですが、MVVM（Model‐View‐ViewModel）パターンの中で使うことを想定して作られています。JsViewsのホームページであるjsviews.comでも、JsViewsを次世代のMVVMフレームワークと銘打って紹介しています。
MVVMは、MVC（Model‐View‐Controller）パターンから派生したデザインパターンの一種で、マイクロソフトのアーキテクトであるジョン・ゴスマン氏によって提唱されました（＊1）。
MVVMなどのデザインパターンは誤解されやすいので、まずは、MVVMパターンが作られた動機を紹介します。MVVMの基となるMVCは、SmalltalkでGUIアプリケーションを作る際の指針として作られました。
MVCではビジネスロジックを処理するModelと、表示を行うView、そして、ユーザーからの入力を処理するControllerを分けて設計・実装します。MVCが作られた当時、アプリケーションは、1つの言語、1つの環境で開発されていました。しかし、Webアプリケーションのようなモダンなアプリケーション開発において、デザイナーがUIを作り、デベロッパーがプログラミングを行うといった分業が進んできました。デザイナーとデベロッパーでは、環境や使用するツールが異なることも多いでしょう。
MVVMは、このような開発スタイルの変化を背景に産まれました。MVVMパターンにおいて、デザイナーはプログラミングを意識せずUIを作成することができ、また、デベロッパーはUIの完成を待たずにプログラミングを行えます。
MVVMは、Model、View、ViewModelの3つの要素で構成されます。
| 構成要素 | 概要 |
|---|---|
| Model | データやビジネスロジック |
| View | UI（HTMLやテンプレート） |
| ViewModel | Viewを抽象化したもの（JavaScriptのオブジェクト） |
ViewModelはViewを抽象化したものです。ViewModelが定義されれば、デザイナーはそれをもとにUI（View）を定義でき、また、デベロッパーはViewなしにプログラミングを行えます。
MVVMにおいて、ViewはデータバインドによってViewModelと関連付けられます。つまり、ViewModelの値を変更すると自動的にViewが更新され、Viewが変更されるとViewModelの値が自動的に更新されます。
JsViewsは、MVVMにおけるViewとViewModelのデータバインドを実現します。
また、JsViewsは宣言型データバインドフレームワークでもあります。HTMLやテンプレートを用いてViewを定義する際に、ViewModelのプロパティ名をViewの中に宣言できます。これにより、デザイナーはJavaScriptを1行も書かずに、Viewを定義することができます（宣言型ではないデータバインドフレームワークでは、ソースコードでバインディングを指定します）。
