検索
連載

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

MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回は、JavaScriptのMVWフレームワークAngularJSの概要、セットアップ方法、基本的な使い方、AngularJS 2.0での変更点などを解説する。

[中村修太，クラスメソッド] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

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 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の公式サイトが、下記リンクにあるので、興味がある人は確認してみてください。

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

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

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

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

著者紹介

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

中村修太

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


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る