.NET開発者のためのJavaScriptライブラリカタログ（MVCフレームワーク編）：特集：今から始めるJavaScriptアプリ開発（1/3 ページ）
最近のWeb開発では、どんな技術を使い、どのようにアプリが開発されているのだろう。モダンJSライブラリをよく知らない.NET開発者に向けて、その世界をまとめて紹介する。
powered by Insider.NET
本特集では、最新のWeb技術にはあまり取り組めていない.NET開発者を対象として、Web標準技術を使ってアプリ開発を行う際によく使われているライブラリやフレームワークなどを紹介していく。モダンWebの世界では、現在、どんなことが行われているかをのぞいてみよう（すでにこれらの技術を活用している方にとっては「何をいまさら」な話ばかりだろうがご容赦願いたい）。今回はクライアントサイドMVCフレームワークを紹介する。
クライアントサイドMVCフレームワーク
ここ数年、JavaScriptの世界ではクライアントサイドでMVCなWebアプリを構築するためのフレームワークが多く登場している。クライアントサイドMVCなWebアプリでは、サーバーは基本的にWeb APIとして機能し、重量級のHTMLフラグメントをクライアントに送信したりするのではなく、クライアント側で必要になるデータのみを送信したり、データの永続化を行うのがその主要な機能となる。
クライアントサイドではシングルページアプリ（Single Page Application：SPA）などの形でアプリを構築し*1、更新が必要になったら、必要なデータだけをサーバーから受け取るようにすることで、通信量や更新にかかる時間を低減できるようになってきた。
*1 シングルページアプリ（SPA）とは、単一ページで構成されるWebアプリのこと。最初にWebアプリに必要な基本要素が単一のページに全て読み込まれ、その後はアプリの実行に必要なデータが必要に応じてサーバーとの間で動的に送受信される。単一ページのWebアプリではあるが、論理的なページナビゲーションなどの機能も持ち、あたかも複数ページで構成されているWebページのように動作するものもある。従来のWebアプリよりも高い応答性を実現可能なことから注目が高まっている。最近では、JavaScriptなどのWeb標準技術でSPAを実装するためのフレームワークが多数登場している（以下で紹介しているフレームワークでもSPAを実装可能だ）。
MVC（あるいはMV*： MVC、MVVMなど、「MV」で始まるパターンの総称）を設計思想に持つJavaScriptフレームワークは、JavaScriptを利用した中規模から大規模なWebアプリ開発に秩序をもたらし、きちんとしたアプリ設計が可能になることから、多数のクライアントサイドMVCフレームワーク（以下、MVCフレームワークとする）が登場したのだ。
そうしたMVCフレームワークの中で、このところ、人気が一番あるのが「AngularJS」である。この他にも、以前から広く使われている「Backbone.js」、マイクロソフト謹製の「Knockout.js」、データバインディングやUIコンポーネントに特化して機能を絞り込んだシンプルな「Vue.js」など、多くのMVCフレームワークが存在している。
では、これらのうちのいくつかを簡単に紹介しておこう。
AngularJS
AngularJSはグーグルとコミュニティによって開発がなされているオープンソースなクライアントサイドのMVWフレームワークだ（「MVW」の「W」は「Whatever」＝「何でも」を意味する）。なお、現在では次のバージョン「Angular 2」の開発も盛んに行われている（後述）。
MongoDB（ドキュメント指向データベース）／Express（Node.js上で動作するサーバーサイドMVCフレームワーク）／AngularJS（クライアントサイドMVCフレームワーク）／Node.js（サーバーサイドでのWebアプリ実行環境）の頭文字を取った「MEANスタック」の構成要素でもある。
AngularJSの特徴としては次のようなことが挙げられる。
- テンプレート
- 双方向データバインディング
AngularJSでは、HTMLページは「テンプレート」として扱われる。また、DOM要素を操作したり、モデル／コントローラーから得たデータをビューに埋め込んだりするために使われるさまざまな「ディレクティブ」が用意されている（開発者が独自のディレクティブを作成することも可能）。そして、テンプレートをAngularJSがコンパイルすることで、ユーザーが実際に目にするビューが作成されるようになっている。
また、.NET開発者の方であれば、おなじみの単方向／双方向データバインディングもサポートされている。これにより、ビューとモデルの間でのデータの同期がとてもシンプルに記述できる。
以下に簡単な例を示す（抜粋）。
<div ng-controller="FooController as fooctrl">
<input type="text" ng-model="fooctrl.test" />
{{ fooctrl.test }}
…… 省略 ……
</div>
var app = angular.module('myapp', []);
app.controller('FooController', function() {
this.test = "foobar";
});
上はAngularJSが解釈するHTMLテンプレートであり、強調書体で示しているのがAngularJSのディレクティブだ。下はこのテンプレートにアタッチされるコントローラーのJavaScriptコードである。
「ng-controller」ディレクティブで指定された「FooController」コントローラーは、この<div>タグで囲まれた部分にアタッチされる（「as fooctrl」となっているので、この範囲内では「fooctrl」でこのコントローラーを参照できる）。また、このコントローラーはtestプロパティを持ち、その初期値は“foobar”となっている。そして、「ng-model」ディレクティブはこれが双方向データバインディングを行うことを意味しており、その対象は「fooctrl.test」だ（「fooctrl」は「FooController」の別名）。そのため、このコードを実行すると、テキストボックスには「foobar」が表示され、その内容を変更するとtestプロパティの値が自動的に変更される（双方向データバインディング）。
また「{{ }}」もディレクティブ（補間ディレクティブ）であり、HTMLに二重波かっこで囲まれている式の評価結果が埋め込まれる（単方向データバインディング）。上の例では「fooctrl.test」の値が変更されると、その値がリアルタイムでHTMLページに反映される。
テンプレートのコンパイル過程では、AngularJSは静的なHTMLファイルではなく、DOMを走査していき、AngularJSのディレクティブがあれば、それに見合った処理を行っていき、最終的なDOMを生成する。これにより、テンプレート内で特定のコントローラーがアタッチされている箇所では、そのコントローラーが所有するスコープとDOMとの動的なバインディングが形成され、データの更新が即座にDOMに反映されるアプリを開発できるようになっている。
これらの機構により、AngulaJSでは非常にシンプルなコードでWebアプリを記述できる。ただし、AngularJSはその哲学として「UIのデザインからロジックの記述、テストに至るまで、アプリ構築の全ての道筋をフレームワークが導くことができたらそれはとても素晴らしいこと」と考えている（「What Is Angular?」の「The Zen of Angular」を参照）。AngularJSが全ての面倒を見てくれるが、覚えなければならないこともたくさんあり（その分、覚えたら楽できるということでもあるが）、AngularJSにロックインされるということでもある。
また、AngularJSの主たる用途はCRUD処理を伴うアプリであり、ゲームなど、複雑なDOM操作が必要になるアプリはどちらかというと苦手だ。
Copyright© Digital Advantage Corp. All Rights Reserved.