SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

徹底解説JsRender/JsViews

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

徹底解説JsRender/JsViews 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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パターン

次のページ
テンプレートを用いたデータバインド

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
徹底解説JsRender/JsViews連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7577 2014/02/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング