AngularJSのTutorialのstep-1からstep-4までを試したレポート 前編。
Angularは、step-1からstep-4を読めば、基本的なクライアントアプリとしての動作を行う上で必要な知識が得られます（Angularに詳しい人から突っ込まれそうですが、難しいことしなければ十分な気がします)。
本トピックでは、その中でAngularの中心となるData Bindingの仕組みの説明の記述されているstep-1とstep-2のレポートを取りまとめました。
AngularのData Bindingの仕組みって、デモとか見たり実際にちょっとだけ書いただけだと、なるほど便利とだけにしかなりません。あまりにも直観的過ぎて、簡単に使えすぎて、ごりごりプログラミングしたい人たちとフレームワークに振り回されず自前で作りたい人たちにとっては、逆に不信感を抱く仕組みですね。
そんな人は他の軽量フレームワークを使った方がいいのかもしれません。。。
AngularのTutorialでは、専門用語がクリッカブルになっていて、APIやDocumentページに飛ぶので詳しく知りたい場合は、本家Tutorialのリンクをクリックしてください。
step-1
最初の頃、step-1を見たときになんでわざわざ表示だけのページを作っているのか？
と思いました。
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
</head>
<body>
<ul>
<li>
<span>Nexus S</span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM? with Wi-Fi</span>
<p>
The Next, Next Generation tablet.
</p>
</li>
</ul>
</body>
</html>
ところがどっこい、もうすでにブラウザで出力された内容はすべてAngularからのものだったのです。
速度上も静的なページを出すのと体感的に何も変わらないので気づかないですが。。。
Angularを利用する醍醐味は、Data Bindingという仕組みです。
htmlタグにng-appと書かれた時点で、かつangular.jsファイルが読み込まれた時点で、HTMLソースはすべてAngularJSの手中に収まっているようです。
テンプレート化されたHTMLを編集することは自由にでき、Angularのテンプレート記法に影響しなければ何を書いてもそのまま出力してくれます。
（試したことはないですが、さすがに大きすぎるHTMLを読み込むのは遅いでしょうね。)
テスト
何もうごく箇所がないので、テスト記述の説明はありません。
step-2
スマホのリストを動的に出力するページを元に課題を実践します。
ポイントとなるHTMLコードを抜粋
......
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
......
テンプレートが、サーバー側のテンプレートそのものです(個人的にTwig使っているのでなおさらそう思ってしまいます。繰り返しの部分はPageTemplate記述式に似てます）。
ここで特徴的なことだと思っているのは、ループ制御の定義がHTMLを崩していないことです。
上記HTMLは、属性で指定しているためコンパイルされなくても、ブラウザに表示させることが可能です。
この特徴は、HTML側のビジュアルデザインをHTMLファイル（テンプレートファイル)を介してデザイナとやり取りを行う時に重宝できる記述方式だとおもっています（一番わかりやすいところでHTMLエディタで編集したとしても問題ないからです）。ちょっと古い考えなのかもしれませんが。
ブロック制御処理がタグの属性として書かれるため、HTMLをどういった形で出力させようとしているのか分かりやすい。
さらにController部分を抜粋
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM? with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM?',
'snippet': 'The Next, Next Generation tablet.'}
];
AngularJSでいうところのModelというのは、データそのものに近い感じの認識ですね。
サンプルがシンプルだからかもしれませんが、Ajaxで取得したデータがModel的な取り扱いにされるようです。
Modelの各フィールド名をテンプレートに{{Model名.フィールド名}}という形で埋め込めば、あらかんたん！
ブラウザでみれば、HTMLの制御は何も考えなくても出力されます。
テストコード
checkoutしてきたサンプルにはちゃんとテストコードも含まれています。
そのコードを抜粋：
var scope = {},
ctrl = $controller('PhoneListCtrl', {$scope:scope});
expect(scope.phones.length).toBe(3);
テストとして書かれているのは、
- scope を初期化
- コントローラを実行
- scopeに期待する3レコードが登録されることを確認
上記は何でもないシンプルなテストです。
しかし、このシンプルなテストをKarmaなどテスト実行ツールの助けをかりるだけで実現できる。このことが最高な幸せです。
「なんとかUnit」系のテストモジュールとかを探してきて、調べたりすることは考えなくてもいいわけです。
こういったことが書けるのであれば、実運用でテストを書くことはそれほど障壁にならないと経験的に思います。あとは慣れです。
scope について
Angularのコアな変数となるscopeについて、理解している範囲で補足です。
Scope を読むと分かりますが、
ものすごく高機能な存在のようです。
このstep-1およびstep-2では何気なく利用できてしまっていますが、Angularの理解を進める中で必ず理解しなければならないもののようです。
scopeだけ記事を一つ書かけるので、もう少し理解が進んで、その気になったらやってみます。
以上、step-1とstep-2のレポートでした。
個人的なJavascriptフレームワークに対する見解
Javascriptの使い始めの時は、クライアントサイドにMVCの考えなんているんかと思うときもありましたが、
最近は導入しないとまずいなと思うようになりました。
なぜなら、ユーザーにフレンドリーなUIを作ることは、インターネット普及初期の画面全部を毎回読み込むスタイルでは不可能であり、Javascriptを使った軽快でインタラクティブ性の高いUIを作らなければならないからです。
ブラウザ上に、アプリケーションを効率的に構築しない限り、広く継続的に利用されるWebアプリを作ることは不可能な時代になってしまいました。
（昔の方が、開発作業自体はゆとりある作業ができていたのになぁ)AngularJSは、以上のような私の要望に確実に答えてくれそうな感じを受けました。