Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
書籍転載:JavaScriptライブラリ実践活用[厳選111]

書籍転載:JavaScriptライブラリ実践活用[厳選111]

[AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する

2013年5月23日

書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。

WINGSプロジェクト 安西 剛
  • このエントリーをはてなブックマークに追加

書籍転載について

 本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用[厳選111]』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 『JavaScriptライブラリ実践活用[厳選111]』の詳細や購入は技術評論社のサイト目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

Angular.jsは、Googleから提供されているLiteなJavaScriptのフレームワークです。HTMLとJavaScriptをシンプルに分離することにより、役割分担が明快になり、コードの可読性が増します。

  • 名称: Angular.js
  • 分類: フレームワーク
  • URL: http://angularjs.org/
  • 関連ファイル:angular.min.js
Angular.jsで作成した書籍一覧アプリケーション
Angular.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の取得発行を簡単に行る機能を提供する
表070-01 Angular.jsの主なモジュール群

HTMLの定義とJavaScriptの記述のマッピング

 HTML とJavaScript のマッピングの記述方法を見ていきましょう。リスト070-01 は、Angular.jsを使って書籍の一覧を表示しているサンプルです。

HTML
<!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>
リスト070-01 Angular.js.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)。入力した苗字と名前をつなげて、入力するたびにフルネームを表示します。

HTML
<!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>
リスト070-02 Angular.js.form.html

 1 ng-app を宣言しています。複数のページ(HTML)を想定しなければ、名前指定する必要はありません。

 2フルネームを表示する際に処理するコントローラです。ここでは、初期表示の値をセットしています。

 3処理するコントローラを指定しています。

 4フォームを記述しています。typeは入力する値の型、ng-modelはパラメータ名、required は必須入力を表しています。

 5入力した値を反映します。苗字、名前の順で表示しています。

 サンプルを動作させてみると、動的にフルネームが更新されます。このように、特にJavaScriptの記述なしに、フォームの値を更新することができるようになります(図070-01)。

図070-01 フルネームを表示する
図070-01 フルネームを表示する

※以下では、本稿の前後を合わせて5回分(第3回~第7回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
3. Backbone.jsのCollectionを操作し、イベントを購読する

書籍転載の3本目(書籍内の番号は「88」)。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd/change/remove/resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
4. Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する

書籍転載の4本目(書籍内の番号は「71」)。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
5. 【現在、表示中】≫ [AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する

書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
6. [Sammy.js]URLによって処理を分割する

書籍転載の6本目(書籍内の番号は「77」)。URLの「#」以降の指定によって処理を分割することに着目したフレームワークである「Sammy.js」の基礎と基本的な使い方を紹介。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
7. [Knockout]MVVMパターンでアプリケーションを構築する

書籍転載の7本目(書籍内の番号は「89」)。MVVM(Model-View-ViewModel)パターンをサポートするJavaScriptライブラリである「Knockout」の基礎と、基本的な使い方を解説。

サイトからのお知らせ

Twitterでつぶやこう!