JavaScript MVVMフレームワーク「JsViews」の概要

CodeZine / 2014年2月26日 14時0分

図5:複数のターゲットを同時に指定する

 これまでは、JsRenderの使い方を紹介してきました。今回から数回にわたり、データバインドフレームワークであるJsViewsの概要と使い方を紹介していきます。

■はじめに

 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回を参照してください。

JsViewsjQuery■データバインドとは

 JsViewsは、データバインドフレームワークです。

 データバインドとは、データソースとなるビジネスロジックとUI(ユーザーインターフェース)を関連付けるプロセスです。JsViewsでは、データソースはJavaScriptのオブジェクトで、UIはHTMLです。

図1:データバインドとJsViews


●静的データバインドと動的データバインド

 データバインドは、静的データバインドと動的データバインドの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つの要素で構成されます。

MVVMの構成要素 構成要素 概要 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を定義することができます(宣言型ではないデータバインドフレームワークでは、ソースコードでバインディングを指定します)。

図2:MVVMパターン


*1
http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx



CodeZine

トピックスRSS

ランキング