AngularJSを選択する見解

jQueryやjQuery関連のライブラリを利用して製造を行ってきたのですが、
テストに苦労しています。人出でやるにも、自動化するにも環境面など準備するのに苦労するため、
JavaScriptのテストをするにあたってもっと簡単に行える仕組みを探していました。

何で気が付いたのか忘れましたが、だれかからの紹介だったような、どこかの記事をよんだような
TDDのJavaScript開発には、AngularJSがおすすめであると教えてもらいました。

現状の使いたいと感じている理由を取りまとめると以下のようになります。

1. HTMLのマークアップに沿った実装が可能
2. AngularUIを使ってリッチなUIをわりと簡単に書けそう。
3. TDDやend-to-end testsをベースに製造できるしくみが最初からサポートされている。Ajaxなどはサーバ側
   から独立させ、仮で想定したテストが書ける。
4. HTML側とController側の同期操作を意識する必要がない。
5. DIを利用したサービス定義で、再利用性の高いコンテナを作成できる。
6. レガシーなブラウザIE8が利用できるように対応可能

以上の観点をちょっとだけ詳しくブレークダウンしてみます。

1. HTMLのマークアップに沿った実装が可能

AngularJSのTutorialのそのままですが、下記のように記述できます。
HTMLを基本的に壊しません。

• 値を出力するところは、Twigテンプレートのように書けます。
• 繰り返し制御はHTMLタグの属性に埋め込みます。
• 検索条件などはfilterとして「|」で書けるため、IF文で書くよりもシンプルな見た目と制御になります。

angular

<div ng-app>
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
    <p>
      <input type="text" name="query"  ng-model="query">
    </p>
    <ul>
      <li ng-repeat="item In items | filter query">
        {{item.name}}: <p>{{item.explanation}}</p>
         <div class="thumbnail"><img ng-src="{{item.href}}" /></div>
      </li>
    </ul>
  </div>
</div>

この書き方が出来ることで、HTMLとJavaScriptがリスペクトしあってアプリケーションをかけます。

2． AngularUIを使ってリッチなUIをわりと簡単に書けそう。

前節で説明したことに関係しているのかまでは、まだ理解できていませんが、
AngularUI のページをみると使えるUIが多く紹介されています。

これまでjQueryでいろいろなライブラリを使っていたUIがもう少しシンプルに書けそうです。

jQueryFileUploadとの連携ができる仕組みなどもあり、本家マニュアルではjQueryのようなDOM操作は推奨されていないですが、補い合うしくみ AngularJS + jQueryFileUpload のような取り組みもある。
AngularJSはフレームワークとして、jQuery関係はツールとして利用するのが吉かも。

HTML5では、タグを使った様々な表現ができるようになっていますが、AngularJSではタグ構成はそのままに動的な記述ができるため、campusタグなどを利用したアプリなどは柔軟に対応できると想像できます。

Tutorialを読み進めればわかりますが、
なんせ、AngularJSは、HTMLファイルそのものがテンプレートファイルとして自由にかけるのですから。

3. TDDやend-to-end testsをベースに製造できるしくみが最初からサポートされている。Ajaxなどはサーバサイドを準備しなくてもテストできる。

Karma（AngularJSのTutorialで紹介されている）を利用して、TDDやend-to-end testsを書けます。
なんチャラunitを探してきたり、JavaScriptを実行するために大掛かりな準備は必要ありません。

何といっても、Ajaxをサーバなしで組める仕組みが組み込みの仕組みで利用でき、何も調べなくてもTutorialさえ読めばいいというのはこれからテストありきで開発をしていきたい人にもお勧めです。
Ajax程難儀な仕組みはないと思います。
便利さゆえの苦しみですが、それを緩和してくれるDIの仕組みって早く本気で使いたい。

4. HTML側とController側の同期操作を意識する必要がない。

AngularJSのBindingの仕組みは、デモとかみたらすぐわかると思うのですが、
シンプルで強力で協力的ですよね。上記のサンプルHTMLでも書きましたが、Unixのパイプのような形でFilterの仕組みを利用できて、いうことなしです。

という感じで、いいところばかりいってきましたが。

どうもまだ、日本ではいまいちのようです。原因にGoogle が絡んでいるのでしょうか。
日本人の解説があまりなく、広まる余地をさえぎっているようです。

なんとか打開して、いい方向にむくことを願ってこのAdvent　Calendarを開始します。

(2014-03-12)

5. DIを利用したサービス定義で、再利用性の高いコンテナを作成できる。

AngularのDIはViewレイヤーとControllerレイヤーの連携の仕組みが素晴らしいのでそこだけを見がちですが、DIを利用することで、サービス群のつながりを簡単に作ることができつつ、見た目にも関係性が分かりやすいところがあります。

次のサンプルのように：

angular.module('app', ['engines'])
  .factory('car', ['$log', 'dieselEngine', function ($log, dieselEngine)) {
    return {
      start: function() {
        $log.info('Starting ' + dieselEngine.type);
      }
    };
  }]);
angular.module('engines', [])
  .factory('dieselEngine', [function () {
    return {
      type: 'diesel'
    };
  }]);

AngularJSが、各種サービスの関係性の面倒を見てくれるので、製造者はその関係させる部分にコーディング時間を費やす必要がないようになっています（ゴリゴリ書いて安心したい人にとっては不安でしかない？）
また、AngularJSの記法を守っていれば、サービスの関係性は階層上に記述して、後からでも理解しやすい形にある程度、表現することができるはずです。

関係性は同じで、記法を変えることもできます。

angular.module('app', ['engines', 'cars']);
angular.module('cars', [])
  .factory('car', ['$log', 'dieselEngine', function ($log, dieselEngine)) {
    return {
      start: function() {
        $log.info('Starting ' + dieselEngine.type);
      }
    };
  }]);
angular.module('engines', [])
  .factory('dieselEngine', [function () {
    return {
      type: 'diesel'
    };
  }]);

AngularJSがアプリケーションを起動した時点で、すべてのサービスがフラットな形で保存されているため、定義したサービスは自由に利用するコードを書くことができます。記法で分かりずときは、挙動に依存せず記法だけすぐにリファクタリングできます。
しかし、スパゲッティーにならないように注意は必要かと思いますが。

(2013-11-21追記)

6. レガシーなブラウザIE8が利用できるように対応可能

まだ、実運用で試せているわけではないですが、下記のページで対応方法が説明されています。

Internet Explorer Compatibility

こういう形で今後も対応されるのであれば、新し物好きではない広い層に対するWebアプリづくりにも活用できるフレームワークとして重宝できるのではないかと考えています。

(さらに追記：2013-01-22)
IE8は1.3からはサポートされないようなことがあるみたいなので、
情報ソース： http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html
見つけたブログ： http://angularjsninja.com/

(3日坊主故、もしかしたら途中で消えてしまうかもです。。。)