弊社で大規模なJavaScript開発を行う際には AngularJS を採用しています。
本日はJavaScriptをプログラミングするなら絶対に知っておくべき
むしろ使っておくべき最高のフレームワークである Angularjs を紹介します。
この記事では難しい事は先に書かず、
先ず具体例とメリットだけ書いて理解し易くします。
Angularjsとは
Google社が開発を行っているMVVMフレームワークなんです。
Backbone.jsやember.jsなどと同じ、モダンなフレームワークです。
何のこっちゃ？という感じですが
先に利点からお伝えすると、PHPのように書けますよ！というメリットが有ります。
例えで恐縮ですが、在籍の女の子をリスト表示する時
jQueryなどでは、コレクション（女の子の配列など）を走査するロジックの中に
DOM要素を操作するコードを書く必要が有ります。
for (var i = 0; girls.length; i++){
$("ul").append("<li>"+ girls[i].name +"</li>"); //ロジックの中にHTML
}
しかし Angularjs の場合
<ul>
<li ng-repeat="girl in girls">{{girl.name}}</li>
</ul>
HTMLの中に反復文を挿入できるのです！
PHPでのforeach文のような書き方が出来ます。
Angularjs は 自動にデータバインディング してくれます
例えば、在籍の女の子が一人増え、リストを更新しなければならないタイミングで
貴方は何もする必要がありません。
以下のようにコレクションに新人の女の子を加えると
<ul>
<li ng-repeat="girl in girls">{{girl.name}}</li>
</ul>
<ul> <li>零子</li> <li>一子</li> </ul>
こんな感じに描画されているコードがあったとします。そこに
girls.push( girl );
コレクションに女の子を一人加えます。すると
<ul> <li>零子</li> <li>一子</li> <li>二子</li> </ul>
変数girlsをAngularjs が監視してくれているので、勝手に1行増やしてくれるんです
JavascriptにObserverが実装されたようですね
Angularjs入門 ! 早速始めよう
bowerというJavaScriptの依存ファイルを一撃で何とかしてくれるソフトウェアがあるのですが
bowerについては何れ説明する事にして、今回はデザイナーさんでも始められるように解説します。
Angularjsの公式サイトから、Downloadというボタンを押して下さい。
すると、以下のメニューが表示されると思いますので、CDNと書かれているURLをコピーして下さい。
先ずは数々のプログラマーの処女を奪ってきた Hello World から書きましょう
<!doctype html>
<html ng-app><!-- ※1 -->
<head>
<meta charset="UTF-8">
<title>Angularjs入門</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script><!-- ※2 -->
</head>
<body>
<span>{{helloWorld}}</span> !<!-- ※3 -->
<div><input type="text" ng-model="helloWorld"></div><!-- ※4 -->
</body>
</html>
- Angularjsのお作法であるng-appを宣言。
これによってng-appの範囲内（ここではHTMLタグ内）はAngularjsの動作範囲である事を宣言 - 先ほどコピーしてきたAngularjs CDN のURLを参照してください。
- Angularjsではパース対象になっていない部分の変数は {{ }} の二重括弧で囲む事になっています。
- input textフィールドにng-modelを宣言しています。変数名はhelloWorldです。
これだけでテキストフィールドに入力した文字がフィールド上部に表示されていますね。
入力した文字がリアルタイムに反映しています。
angularjsではダイジェストループというAngularjsによって宣言した変数を監視する機構により
イベント発生時（例えばマウスイベントや今回なら入力イベント、Ajax通信成功など）によって、
変数が変化していれば、即座にDOMにも反映する仕組みを作ってくれています。
自分で変更を監視してDOMを書き換える作業が要らないんですね。
本日はAngularjsのデータバインディング部分、導入部分だけを書きました。
次回は便利なディレクティブなどに触れて行こうと思います。
