いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方：MEANスタックで始めるWebアプリ開発入門（6）（2/2 ページ）

» 2015年09月03日 05時00分公開

[中村修太，クラスメソッド]

AngularJSのインストールと簡単な使い方

　ざっくりとしたAngularJSの機能説明を行ったので、次は実際に使ってみましょう。今回はシンプルにAngularJSの動作を確認するだけなので、Bowerでjsファイルをインストールします。

% mkdir simple-angular && cd $_
% bower install angular
・
・

　次に、htmlファイルを作成します。リスト1のようなhtmlファイルを作成してください。

<!DOCTYPE html>
<html ng-app>
  <head>
      <script src="bower_components/angular/angular.js"></script>
  </head>
 
  <body ng-init="userName = 'taro'">
    <strong>user name:</strong> {{userName}}<br />
    <br />
    <label>user name: <input type="text" ng-model="userName"/></label>
  </body>
</html>

リスト1

　2行目のhtmlタグや7行目のbodyタグの中に見慣れない属性があります。これがAngularJSの「ディレクティブ」と呼ばれるカスタム属性です。ここでは三つのディレクティブを使用しており、それぞれ下記用途で使用されています。

AngularJSの適用範囲を指定する「ng-app」ディレクティブ

　このディレクティブは、AngularJSの適用範囲を指定します。これはDOMの範囲を意味し、2行目のようにhtmlタグにng-appを指定した場合、html要素とその子孫要素がAngularJSの適用範囲となり、ディレクティブや式を使用することができるようになります。

　例えばリスト2のように、div要素に対してng-appを指定した場合、userNameのエクスプレッション構文がAngularJSの適用外なので双方向バインディングにはなりません（「{{userName}}」とテキストで表示されるだけ）。

  <div ng-app>
    <label>user name: <input type="text" ng-model="userName"/></label>
  </div>
  <strong>user name:</strong> {{userName}}<br />

モデルの初期値を設定する「ng-init」ディレクティブ

　モデルの初期値を設定します。Ajaxでデータを設定する際にはあまり使用することはありませんが、サーバーサイドでテンプレートを利用するときや初期表示におけるデータ表示を非同期で取得したくないケースでは、このディレクティブを使用することがあります。

　リスト1では、7行目のbodyタグで使われています。

入力要素に対してモデルとのバインディングを行う「ng-model」ディレクティブ

　input要素やselectやlistなどの入力要素に対してモデルとのバインディングを行います。入力された値に対して入力チェックを行い、その結果の処理もng-modelが実施します。

　リスト1の10行目のように、ng-modelディレクティブでuserNameがバインドされ、その上にある8行目のテキストインプットでは「{{userName}}」というようにエクスプレッション構文を使用してその値を表示しています。

　実際にリスト1のHTMLをブラウザーで表示して、テキストインプットに値を入力してみてください。入力した値がすぐに表示に反映されていると思います。これが双方向データバインディングです。

画面からの入力がすぐに反映される

　ng-modelディレクティブと式を使用するだけで記述できるので、簡単に使うことができます。

　なお、ディレクティブやデータバインディングについては、次回以降で詳細に解説します。

参考：AngularJS Hub

AngularJS 2.0で、どう変わるのか

　今後の連載ではAngularJS 1.4を使用していきますが、ここでAngularJSの次世代バージョンである2.0について説明しておきます。

　AngularJS 2.0は、2015年に開催された、AngularJSカンファレンスで発表されました。現行の1.4と比較すると、非常に大きな変更がいくつか加えられています。主な変更点は次の通りです。

ECMAScript6（ES6）の採用
双方向バインディングの廃止
ng-xxx記法を廃止して、記号（[]、()、#）による式やイベント記述
JavaScriptベースでアノテーションなどを追加したAtScriptを利用
WebComponentsを利用し、コンポーネント化を進める

　先ほど説明した双方向データバインディングやディレクティブが廃止される予定になっています。本連載では1.x系機能として上記機能についても解説していきます。

　なお、その際には2.0での変更点を踏まえた上での解説をする予定です。また、AngularJS 2.0の公式サイトが、下記リンクにあるので、興味がある人は確認してみてください。

https://angular.io/

次回はAngularJSについて、さらに詳細に

　今回はMEANスタック構成においてフロント側のフルスタックフレームワークであるAngularJSについて、その概要と基本的な部分について説明しました。

　次回はAngularJSの具体的な機能について、もう少し詳細に解説する予定です。

「MEANスタックで始めるWebアプリ開発入門」バックナンバー

著者紹介

中村修太（なかむらしゅうた）

クラスメソッド勤務の新しもの好きプログラマーです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。

JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで
＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。
Socket.IOでセンサー＆MongoDB～AngularJSアプリ間の通信を行う
家電～Webアプリ間の双方向通信をSocket.IOで行うアプリについて、サーバー側のArduino連携やMongoDBへのデータ保存などと、クライアント側のAngularJSに分けて動作を解説します。
エンタープライズ開発現場が知っておきたいHTML5の4つの意義
Windows XP時代にエンタープライズ向けシステムのクライアント開発現場が抱えていた問題は、HTML5（Web標準）という一つ上のレイヤーからアプローチし解決する道が模索されています。本記事では、先月開催されたカンファレンス「Enterprise × HTML5 Web Application Conference 2014」から幾つかのセッションの内容をピックアップし、HTML5ソリューションの全体像を俯瞰し、上記解決の道がどこに向かおうとしているのかを探ってみます。
Struts後時代のJava EE／Javaモダン開発はどうあるべきか～JJUG CCC 2014 Springまとめリポート（前編）
Java EEにおいてJava 8はどこまで利用できるのか、Java開発でGit、CI、継続的デリバリは、どこまで有効なのか、Struts後時代のJava EE開発における有効なフレームワークなどをお伝えする。