Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

徹底解説JsRender/JsViews 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/02/26 14:00

 これまでは、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回を参照してください。

データバインドとは

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

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

図1:データバインドとJsViews
図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は、ModelViewViewModelの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パターン
図2:MVVMパターン

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト やましぎ (ヤマシギ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:徹底解説JsRender/JsViews
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5