今日は、他のJavaScript MVCフレームワークに対するEmber.jsの優位点を
説明します。
まず、なぜJavaScript MVCフレームワークが必要なのか、jQueryでは
不足なのかという点について説明します。
jQueryについては、ここをご覧になっているほとんどの人が
ご存知だと思います。jQueryは、DOMイベントと処理のバインディング、
要素への値のセットを簡潔に書けるシンタックスシュガーとして
扱うことができますが、jQueryだけを用いて処理を記述すると、
どこに何の処理が書いてあるのかわかりにくい、整理されていない
コードを書いてしまいがちです。
心当たりのある方も多いのではないでしょうか。
これは、プログラムが構造を持っていないのが原因です。
プログラムの構造とは、処理の種類ごとにコードをまとめることを
指します。
jQueryは便利な簡潔記法を提供しますが、イベントハンドラ、
データの処理、表示への適用を一箇所に書くことになり、
プログラムの構造化ができません。
この問題を解決し、プログラムに構造を与えるのが、
JavaScript MVCフレームワークです。
JavaScript MVCフレームワークは現在数多くあり、それぞれ
モジュールの切り分け方の考え方も違ったりするのですが、
大きな目標として、JavaScriptプログラムに構造を与えることを
目指している点は共通しています。
どういう構造を与えるのかというと、大まかにビジネスロジック層と、
プレゼンテーション層(入力/表示を行う処理)を別のモジュールとして
定義できるようにします。
ここで、ビジネスロジックとはデータの操作と、外部との
通信を指すものとします。
ここでの一番のポイントは、ビジネスロジック層を、プレゼンテーション層に
依存しないように記述できるようになっているということです。
これにより、ビジネスロジック層を、目的の処理だけに
集中させることができます。
次に、JavaScript MVCフレームワークの差別化要因となってきた、
データバインディング機能について説明します。
データバインディング機能は、最近のフレームワークが目玉として
取り入れてきている機能です。knockout.js, Ember.js, Angular.js,
Batman.jsなどがこの機能を提供しています。
データバインディング機能とは何かというと、データの値が
変更されたら、勝手に表示(や、依存している他のデータ)を
更新してくれる機能のことです。
GUIプログラミングでは大分昔から使われている機能ですが、
JavaScript MVCフレームワークの世界では最近になってようやく
実装が進んできました。
データバインディング機能は、あるならあったほうが全然楽です。
表示更新漏れなどのバグをほとんどのケースでなくすことができるため、
大変強力です。
これらのデータバインディング機能を実装しているフレームワークのうち、
Ember.jsを除くものは、すべてhtmlの要素に専用のdata属性値をセットする
形を取ります。(Angular.jsは、値の埋め込みにはテンプレートエンジンによる
値の埋め込みをサポートしますが、イベントハンドラの指定はdata属性値を
利用します。)
これらのフレームワークは、バインディング情報をhtmlに直接記述していくため、
表示要素のモジュール化ができず、部品の再利用が難しいという問題があります。
JavaScriptフレームワークの機能ではなく、サーバ側のテンプレートエンジンの
機能で部品化する必要があります。
Ember.jsはこの問題への解決策として、表示要素(View)をモジュール化し、
Viewモジュールを組み合わせて大きなViewを作れるように設計されています。
また、Handlebarsテンプレートエンジンを利用したバインディング記述により、
他のフレームワークに比べてテンプレートを簡潔に書ける利点もあります。
また、他のデータを参照するデータ(プロパティ)を定義する機能もあります。
参照先が変更されたら自動でプロパティが更新されます。
たとえば fullName は firstName, lastName を参照する、というケースで
利用できます。
その他、イベントハンドラの定義をhtmlの要素でなくJavaScriptのViewクラスに
書けるのも、コードの凝集度を高めて良い感じです。
ここまで述べたように、Ember.jsはデータバインディング機能を備えた
JavaScript MVCフレームワークであり、かつこれまでのデータバインディング機能を
持ったフレームワークが問題としていた、ビューのモジュール化ができる
点で優れており、期待しています。