こんにちは、デザイナーのてっちゃんです。
梅雨が開けたと思ったらあっという間に8月になりましたね。
そろそろ夏休みですが、みなさんの予定はどんな感じでしょうか？
最近は、jsをちょぼちょぼ書いているのですが、たまにデータを簡単に扱いたい時があるんだよって話をしてたら
「Knockout.js」ってのがあるよって教えたもらったので、フレームワークの話を書いていいこうと思います。
例によって、導入前の準備編になります。

そもそもは入力フォームに入れたデータをユーザーの操作によって変更を検知したいと思い使いました。
こういうのをデータバインディングというようで、物の本にはこういう風な説明をされています。

データバインディング（データバインド、あるいはData Bindingの訳からデータ結合とも呼ばれる。） とは、XMLなどのデータソースとアプリケーションやウェブページ（ウェブアプリケーション）のユーザインタフェースを静的または動的に結合する技術である。 分離されたデータソースとユーザインタフェースの間を橋渡しする役割を果たし、データが変更されるとそれに応じてユーザインタフェースが変更される一方向なデータバインディングと、併せてユーザインタフェースの変更または操作に応じてデータが変更される双方向のデータバインディングがある。

wikipedia:https://goo.gl/GGQ5mW

また、jQueryを使うとどうしてもHTMLの構造に依存するのでレイアウトを変えたりすると動かなくなることもありましたが、そういうのも解決してくれます。
このようなフレームワークをMVVMと読んでいます。

MVVMとは？

だいたい同じような事を言っていますが、正確にいうとこんな感じです。

Model-View-ViewModel（MVVM）パターン とはプレゼンテーション（Presentation）とドメイン（Domain）の分割を目的としたMVC系のパターンの1つで、アプリケーションのコードをModel、View、ViewModelという3つの責務に分割して記述します。ここでのプレゼンテーションとはユーザインタフェース（UI）を実装するプラットフォームに依存した部分、ドメインはプラットフォームに依存しない部分を指しています。Webアプリで言えば、プレゼンテーションはHTMLの都合が関係ある部分、ドメインはHTMLの都合が関係ない部分になります。

buildinsider:http://www.buildinsider.net/web/bookjslib111/89

メリット

• デザインとデータ・システムを分離できるのでマークアップの構造に依存しない
• 入力された変化に応じて、データが同期される。
• 構造がはっきりしているので、役割を分けやすい。

デメリット

• データバインドの複雑な記述をするときにはエンジニアの知識が必要

他MVVMフレームワーク

たくさんあるMVVMフレームワークからよく名前を聞くものを見繕ってみました。
中にはアプリを作ることができる高機能から軽量でデータだけを同期して使えるものがあるので、用途に寄って使い分けるといいですね。

• JsViews
  Vue.js
  デザイン中心とした軽量タイプです。
• Backbone.js
  大規模案件で使うのがおすすめのようです。
• ember
  簡単かつパフォーマンスを重視するときに使いやすそうです。
• Angular.js
  万能タイプ
• React.js
  規模の大きアプリ開発に向いている。

Hello World

「Knockout.js」のHello Worldを載せておきます。初歩としては、こんな感じから扱っていくとわかりやすいと思います。

HMTL

js

ViewModelで監視エリアを定義しています。
data-bindで定義した値を監視して変更をすることでリアルタイムに表示します。

でViewとModelで関連付けて定義しています。

まとめ

jQueryではコード量が多くなったり、面倒な処理になるところをこのようなMVVMフレームワークを使うことでメンテのことも踏まえた実装ができるようになります。僕もまだすべてをつかないこなしてないので、まずは軽量なものから使っていこうと思います。