ダウンロード サンプルファイル (126.5 KB)
これまでは、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です。
静的データバインドと動的データバインド
データバインドは、静的データバインドと動的データバインドの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を定義することができます（宣言型ではないデータバインドフレームワークでは、ソースコードでバインディングを指定します）。
この記事は参考になりましたか？
- 徹底解説JsRender／JsViews連載記事一覧
-
- JavaScript MVVMフレームワーク「JsViews」のJsObservableを...
- JavaScript MVVMフレームワーク「JsViews」の概要
- JavaScriptテンプレートエンジンJsRenderの拡張機能
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
WINGSプロジェクト やましぎ（ヤマシギ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
