書籍転載:JavaScriptライブラリ実践活用[厳選111]
[AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する
書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
Angular.jsは、Googleから提供されているLiteなJavaScriptのフレームワークです。HTMLとJavaScriptをシンプルに分離することにより、役割分担が明快になり、コードの可読性が増します。
- 名称: Angular.js
- 分類: フレームワーク
- URL: http://angularjs.org/
- 関連ファイル:angular.min.js
JavaScriptとHTMLの分離
通常、JavaScript を使ってHTML を動的に変更する場合は、DOM(Document Object Model)を直接操作して行います。JavaScriptでどのDOMかを直接指定することになるため、JavaScript上でのDOMへの依存が強くなってしまいます。Angular.js は、記述しているHTMLをそのままテンプレートとして活用します。HTML とJavaScript の関係性は、HTMLの属性指定とJavaScript でのマッピングで行うため、DOMの直接指定は行いません。そのため、DOMとJavaScriptの依存が少なくなり、コード量も少なくなった結果、シンプルで役割分担が明快になります。
基本的な機能
テンプレートエンジンとしての機能に加え、Web アプリケーションで扱う基本的な機能も揃っています。これらを使用することで、サーバサイドとHTML をやり取りせずに、JSON API のようなデータの取得でアプリケーションが構築可能です。こうすることで、サーバサイドとJavaScript の役割分担も明確になり、より可読性が上がっていきます。Angular.jsには主に表070-01のような機能があります。
機能名 | 概要 |
---|---|
form | タグやclass 名に指定するだけで、フォームの入力値を動的に扱ったり、バリデーションを自動的に行う機能を提供する |
filter | 型や表示形式を指定することができる |
service | キャッシュやフィルター、HTTPリクエストなどの機能を提供する |
global APIs | 型のチェックやJsonを扱うモジュールなど、JavaScriptとして汎用的に扱える機能を提供する |
ngCookies | Cookieの取得発行を簡単に行る機能を提供する |
HTMLの定義とJavaScriptの記述のマッピング
HTML とJavaScript のマッピングの記述方法を見ていきましょう。リスト070-01 は、Angular.jsを使って書籍の一覧を表示しているサンプルです。
<!doctype html>
<!-- 1コンポーネントの宣言 -->
<html ng-app="components">
<head>
<meta charset="utf-8">
<title>書籍紹介</title>
<!-- angular.jsをインポート-->
<script src="js/angular.min.js"></script>
</head>
<body>
<!-- 2 制御を行うコントローラ(メソッド)名を指定 -->
<div ng-controller="BookList">
<table border="1">
<tr>
<td>名称 </td>
<td>価格</td>
</tr>
<!-- 3 ループを行う配列名と、1個ずつ格納する変数名を指定 -->
<tr ng-repeat="book in books">
<!-- 4 配列の1行から値を取得しセット -->
<td>{{book.name}}</td>
<td>定価{{book.price}}円</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
<!--
// 5 Angular.jsのモジュールの宣言
angular.module('components', []);
// 6 ng-controllerで指定したコントローラメソッド
// $scopeは、ng-controller内で有効なコントローラオブジェクト。
function BookList($scope) {
$scope.books = [{
name: 'アプリを作ろう! Android入門 ~ゼロから学ぶアプリの作成から公開まで',
price : 1995
},
{
name: 'TECHNICAL MASTER はじめてのJSP&サーブレット Eclipse 3.7 Indigo+Tomcat 7対応版',
price : 2730
},
{
name: 'Windows Azure Platform開発入門',
price : 3990
}];
}
-->
</script>
</html>
|
1「この部分はAngular.js のHTML テンプレートである」という宣言です。5のmoduleメソッドの第1 引数で指定しているcomponentsと名前を合わせます。
2制御を行うコントローラ(メソッド)名を指定しています。この要素の範囲内は、このコントローラで処理を行います。
3本の一覧をループしています。ng-repeat 属性の中で、ループする配列の値(books)と1 回のループごとの1行の値(book)を指定しています。
4ループしている値をHTML にセットしています。{{ 変数名}} と指定することで、変数を動的にHTMLに流しこむことができます。
5Angular.jsで使用するモジュールを指定しています。HTML のng-app に記述したcomponents を指定することで、HTML とAngular.jsのアプリケーションがひも付きます。これは、複数ページある場合にどのHTML とどのJavaScript を組み合わせるかを指定するために使用します。
6コントローラメソッドです。$scope は、ng-controller 内で有効なコントローラオブジェクトで、テンプレートに対して値を流し込む際に使用します。このサンプルでも、テンプレートに対して書籍の一覧の配列を流し込んでいます。
このように、DOM に対して直接操作を行うのではなく、HTML の属性を使いマッピングしたうえで、テンプレートエンジンのように動的な変数をHTML上に記述していきます。
フォームの動的反映
では次に、入力したフォームの内容を動的に反映するサンプルを見てみましょう(リスト070-02)。入力した苗字と名前をつなげて、入力するたびにフルネームを表示します。
<!doctype html>
<!-- 1 ng-appを宣言 -->
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
<!--
// 2 フルネームを初期表示するコントローラ
function makeNameController($scope) {
$scope.last = "へのへの";
$scope.first = "もへじ";
}
-->
</script>
</head>
<body>
<!-- 3 コントローラを指定する -->
<div ng-controller="makeNameController">
<table>
<tr><td>苗字</td><td>名前</td></tr>
<tr>
<!-- 4 フォームを記述する -->
<td><input type="string" ng-model="last" required></td>
<td><input type="string" ng-model="first" required></td>
</tr>
</table>
<hr>
<!-- 5 値を反映する -->
<b>名前:</b>{{last}} {{first}}
</div>
</body>
</html>
|
1 ng-app を宣言しています。複数のページ(HTML)を想定しなければ、名前指定する必要はありません。
2フルネームを表示する際に処理するコントローラです。ここでは、初期表示の値をセットしています。
3処理するコントローラを指定しています。
4フォームを記述しています。typeは入力する値の型、ng-modelはパラメータ名、required は必須入力を表しています。
5入力した値を反映します。苗字、名前の順で表示しています。
サンプルを動作させてみると、動的にフルネームが更新されます。このように、特にJavaScriptの記述なしに、フォームの値を更新することができるようになります(図070-01)。
※以下では、本稿の前後を合わせて5回分(第3回~第7回)のみ表示しています。
連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。
3. Backbone.jsのCollectionを操作し、イベントを購読する
書籍転載の3本目(書籍内の番号は「88」)。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd/change/remove/resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。
4. Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する
書籍転載の4本目(書籍内の番号は「71」)。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。
5. 【現在、表示中】≫ [AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する
書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。
6. [Sammy.js]URLによって処理を分割する
書籍転載の6本目(書籍内の番号は「77」)。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。
7. [Knockout]MVVMパターンでアプリケーションを構築する
書籍転載の7本目(書籍内の番号は「89」)。MVVM(Model-View-ViewModel)パターンをサポートするJavaScriptライブラリである「Knockout」の基礎と、基本的な使い方を解説。