AngularJS TIPS

AngularJS TIPS

AngularJSを利用するには?

2015年1月8日

クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。

  • このエントリーをはてなブックマークに追加

【対応バージョン】 AngularJS v1対応の記事です。v4以降に関しては「TIPS:Angularの基本構造を理解して、アプリ開発を始めるには?」を、v2に関しては「TIPS:Angular 2を利用するには?(準備編)」を参照してください。

 このシリーズでは、何回かにわたって、AngularJSの基本機能を目的別リファレンスの形式でまとめていきます。

 AngularJSとは、グーグル(Google)とコミュニティによって開発が進められているJavaScriptフレームワークです。オープンソースライセンスであるMITに基づいて配布されています。

 従来、クライアントサイド開発といえば、jQueryが定番でしたが、jQueryはあくまでページ操作を中心にサポートするライブラリであり、大規模なクライアントサイドの開発分野をあまねくサポートするわけではありません。

 一方で、クライアントサイド開発の世界では、JavaScriptに依存する割合がいや増しています。HTML5/Ajaxの普及、スマホ普及に伴うRIA*1の衰退、SPA*2の流行などなど、JavaScript開発を後押しするキーワードは、枚挙にいとまがありません。開発規模の増大に伴い、JavaScriptの世界でも、サーバーサイドでの開発と同じく、本格的なアプリケーションフレームワークが求められているのです。

  • *1 Rich Internet Application。Flash、Silverlightなどの技術が代表的です。
  • *2 Single Page Application。URLを遷移させず、一枚のページ上で全ての操作を行うようなアプリの形態を言います。

 JavaScriptフレームワークには、Backbone.js、Knockout.js、Ember.jsなどなど、すでにさまざまなものが存在しています。が、その中でもAngularJSは人気も高く、グーグルが開発に携わっていることから安心して学習できるフレームワークです。

GoogleトレンドでのJavaScriptフレームワーク比較

AngularJSの特徴

 AngularJSの最大の特徴は、なんといってもフルスタックであるという点です。クライアントサイド開発で必要となる大方の機能がAngularJSひとつを導入するだけで、一通りそろいますので、環境の準備に手間暇がかかりません。また、ライブラリ同士の相性やバージョン間の不整合などを意識することなく、開発を進めることができます。

 以下に、AngularJSが提供する具体的な機能をざっと列挙しておきます。

機能 概要
テンプレートエンジン モデルの値をレイアウトするための機能
双方向データバインディング モデル/ビュー間での値の変更を互いに反映させる機能
ディレクティブ 条件分岐、繰り返し、イベント処理など、ビューで利用する定型的な機能を提供するカスタムタグ/属性
フィルター ビューに出力すべき値を加工する機能
ルーティング URLに応じて適用するテンプレートを切り替え
AngularJSの主な機能

 なお、AngularJSはMVW(Model-View-Whatever)パターンを取り入れたフレームワークです。あまり聞きなれない言葉かもしれませんが、サーバーサイドのアプリケーションフレームワークに慣れた人であれば、MVC(Model-View-Controller)の派生パターンと考えれば分かりやすいでしょう。クライアントサイドJavaScriptの世界では、MVCのControllerの解釈が異なることがよくあります。そこでAngularJSでは、不毛な議論を避けるためにModelとView以外の部分は何でもあり(Whatever)という意味で、「MVWパターン」という呼称を採用しています。

AngularJSの導入

 AngularJSでは、動作に必要なライブラリをCDN(Content Delivery Network)で提供しています。「事前準備が不要」「(一般的には)パフォーマンスに優れる」という理由から、まずはこちらでの利用をお勧めします。

 以下は、CDNを利用したAngularJSの最低限の構成です。

HTML
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
【ここにコンテンツを記述する】
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</body>
</html>
AngularJSを利用したページの最小構成(index.html)

 他のライブラリがそうあるべきであるのと同じく、AngularJSもページの末尾(=<body>閉じタグの直前)で読み込んでください。これは、ライブラリダウンロードによって、ページの描画がブロックされるのを防ぐためです。太字の部分は、利用するAngularJSのバージョンによって使い分けます。

 また、<html>要素のng-appという見慣れない属性にも注目です。これはAngularJSで提供される命令(=ディレクティブ)の一種で、「AngularJSの機能を有効化しなさい」という意味です。AngularJSでは、このように独自のタグ/属性でもって、HTMLページに動的な機能を付与しているのです。具体的なディレクティブについては、本連載の中で順次解説する予定です。

 ng-app属性がない場合、または、ng-app属性を持つ要素の配下以外では、AngularJSの機能は動作しませんので注意してください。その性質上、特別な理由がない限りは、ng-app属性は<html>要素、もしくは<body>要素に付与するのが一般的です。

AngularJSをオフラインで動作させる

 もちろん、あらかじめダウンロードしたライブラリをインポートすることで、オフライン環境でAngularJSを利用することもできます。ダウンロードページは、以下です。

 [Download]ボタンをクリックすると、以下のようなダイアログが開きますので、[Branch]で利用するバージョンを、[Build]でダウンロードする形式を選択します。「Minified」はコメントや空白などを除去した圧縮版、「Uncompressed」はコメントなどを残した非圧縮版です。ソースコードを確認しながら開発したい場合にはUncompressed版を、本番環境ではMinified版を利用してください。

AngularJSのダウンロードダイアログ

 ダウンロードしたangular.min.js(非圧縮版の場合はangular.js)を任意のフォルダーに配置した上で、以下のようにインポートします。パスは配置先に応じて読み替えてください。

HTML
<script src="angular.min.js"></script>
オフラインでAngularJSを読み込むコード

AngularJSの動作を確認する

 最後に、AngularJSが正しく動作していることを確認してみます。先ほどのリストの【ここにコンテンツを記述する】の部分に、以下のコードを追加してみましょう。

HTML
{{1 + 2}}
AngularJSで実行すべきコード(index.html)

 {{...}}は、エクスプレッションと呼ばれる構文で、AngularJSではHTMLソース内に動的なコード(式)を埋め込むために、エクスプレッションを利用します。この例であれば1 + 2という簡単な数値演算式です。

 AngularJSが正しく有効になっていれば、ブラウザーには3という結果が表示されます。試しに<html>要素のng-app属性を削除すると、{{1 + 2}}という式がそのまま表示されてしまう(=AngularJSが動作していない)ことが確認できるはずです。

処理対象:ライブラリインポート カテゴリ:基本
処理対象:{{1+2}} カテゴリ:式(Expressions)
API:ngApp(ng-app) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)

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

1. 【現在、表示中】≫ AngularJSを利用するには?

クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。

2. AngularJSでモジュールを定義するには?

コード規模が大きくなればモジュール化が必要になる。AngularJS専用として提供される「モジュール」の基礎を解説する。

3. AngularJSでコントローラーを定義するには?

AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明する。

4. AngularJSの依存性注入を利用するには?

AngularJSに標準搭載されているDIコンテナー機能を使って、依存性を注入するためのさまざまな方法を解説する。

5. モデルをテキストボックスなどのフォーム要素にバインドするには?(ng-model)

ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説する。デフォルト値の設定方法も説明。

サイトからのお知らせ

Twitterでつぶやこう!