目次
AngularJSとは
- フロントエンドのMVC/MVVMフレームワーク
- モデルとビューのデータ双方向バインディングが特徴
- SPA開発に強い
- カスタムタグ属性を用いることで、通常のHTMLに直接記述できる
AngularJSとAngular2の違い
Angular2はAngularJSの後継バージョンだが、AngularJSとは互換性を一切持たない。アーキテクチャが異なるため、今後も互換性は導入されないと言われている。
今回は、主に以下の理由からAngular2ではなくAngularJSを用いることにした。
- Angular2は2016年9月にリリースされたばかりで、情報が比較的少ない
- Angular2はTypeScriptでの利用を推奨している(JavaScriptでも書けるには書ける)
AngularJSによるサンプルコード
以降のサンプルコードは、コード全体のうち重要な部分のみ抜粋する。そのため、サンプルコードのみでは動作しないのがほとんどなので注意。AngularJSでこんなことができるよ、程度の参考にすること。
<!doctype html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body>
<div>
<input type="text" ng-model="inputText">
<h1>Hello {{inputText}}!</h1>
</div>
</body>
</html>
AngularJSでは、特別なテンプレートファイルなどを用いること無く、通常のHTMLファイルを拡張する形で利用することができる。
HTMLタグに対して、AngularJS特有の情報を持たせるには、”ng-model”など、ng-XXXで表記される拡張タグを用いる。
また、モデルのデータは {{param}} の形式で、HTMLに直接埋め込むことができる。
モデルとビューの双方向データバインディング機能
AngularJSの大きな機能である「双方向データバインディング」とは、名前の通り、モデルが保持しているデータと、それを表示しているビューを全自動で同期してくれる機能だ。
前項のサンプルコードを例にすると、inputタグに、ng-model=”inputText”と指定することで、このテキストボックスの内容は”inputText”というモデルにバインディングさせる。
それによって、テキストボックスを用いて入力内容を変更すると、自動でinputTextという名前のモデルも更新される。そのため、{{inputText}}で出力している内容もリアルタイムに更新される。
従来はjQueryなどを用いて、テキストボックスの変更を検知したらイベントで出力内容を変更すると言った処理を行っていたが、それが不要になり、かつ同期漏れなどのプログラマのミスを無くすことができる。
モデルの変更監視
モデルの変更は当然モデルでも検知することができる。
以下のコードは、taskList.tasks(array)の内容が変更された場合に、内容を保存している
$scope.$watch('taskList.tasks' , function() {
taskList.saveTasks();
} , true);
ルーティング
ここでのルーティングは、SPAを前提とした、非同期通信をベースとした画面遷移のことを指すが、
もちろんWAF別途導入した非SPAのアプリケーションを開発することも可能。
AngularJSのルーティングは、以下の特徴を持つ
- URLによるルーティング
- SPAだが、戻る・進む・更新に対応
- 自動的に非同期でページを返却する
ルーティングのサンプルコード(の一部)
JS
app = angular.module('myapp', ['ngRoute' , 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider
.when('/' , {
templateUrl: 'views/top.html'
})
.when('/taskList' , {
templateUrl: 'views/taskList.html',
controller: 'taskListController as taskList',
})
.otherwise({
redirectTo: '/'
});
HTML
<nav> <div><a href="#/">トップ</a></div> <div><a href="#/taskList">タスク一覧</a></div> <div><a href="#/bookmark">ブックマーク一覧</a></div> </nav>
リンククリックから、画面遷移までの流れはおそらく以下の通り。
以下は全てajaxを用いて行われるが、プログラマはそれを意識する必要がない。
- $routeProviderを参照し、該当のルーティングを取得
- 該当するコントローラオブジェクトを生成
- 該当するテンプレートとバインディング
- バインディングされたコントローラとテンプレートを返却
- ブラウザが直前のテンプレート・コントローラを破棄し、受け取ったテンプレートを描画
また、コードを見ての通り、AngularJSでは、テンプレートとコントローラをそれぞれ指定することができる。それによって、同じテンプレートに対して異なるコントローラや、異なるテンプレートに同じコントローラを割り当てるなど、柔軟に実装することができる。
AngularJS所感
１日ちょっとだが、AngularJSを使って簡易アプリを作ってみての感想は以下の通り
- 固定の設計パターンが多く、学習コストが高い
- Angularの設計思想に基いて正しく扱えれば、jQueryは不要になると想う
- ビューとモデルの双方向バインディングが強力。同期漏れによるバグが起こらないのは強い
- しかし、理解して使わないと同期が高頻度で行われすぎてパフォーマンスが低下するかも？
- バージョンによる記述方法の差異が大きい
- 非同期通信はjQueryより遥かに直感的
- AngularJS用の単体テストモジュールがあるらしく、テストが容易
総評すると、学習コストが高いが、チーム全体で設計パターンを理解していれば、非常に保守性の優れたコードが書けると思った。コードのバグも生まれにくくなると思うが、慣れるまではAngularJSの使い方の問題で実装に苦労するかも。
MEANスタック開発(MongoDB,Express,Angular,NodeJS)が流行ってきており、勢いだけならLAMPよりありそうなので、本格的に勉強してみる価値はある。
おまけ
今回のAngularJSお試しで開発した簡易アプリはこちらからダウンロードできる。
Webサーバを使わずにブラウザのみで動作するので、ダウンロードすることでAngularJSを試すことができる。
また、本記事ではかなり駆け足な紹介だったので、ソースコードを参照すればより具体的な使い方がわかるはず。