MEANスタックを用いたWebアプリの開発方法について紹介していく連載。今回は、JavaScriptのMVWフレームワークAngularJSの概要、セットアップ方法、基本的な使い方、AngularJS 2.0での変更点などを解説する。
前回記事、「いまさら聞けないMongoDBの基礎知識とインストール、CRUD操作の基本、モデリングツールMongooseの使い方」では、ハイパフォーマンスなNoSQLデータベース「MongoDB」の概要と、Node.jsからMongoDBにアクセスするモジュール「mongoose」の使い方の基本を紹介しました。今回は、MEANスタックの「A」部分、AngularJSの基本について解説します。
なお、本記事を見て実際にサンプルを動かしたい場合、以前の連載記事(第1回、第2回)を見て環境を作成しておきましょう。
MEANスタックではフロント側のフレームワークとして、AngularJSを使用します。AngularJSとは、グーグルとユーザーコミュニティによって開発されているオープンソースソフトウエアのJavaScriptフレームワークです。2012年にバージョン1.0がリリースされ、2015年9月現在は1.4.4が最新版になっています。
公式サイトでは、「AngularJSは、MVWフレームワークである」と定義しています。「MVW」とは、「Model-View-Whatever」の略語で、「Model」「View」「その他何でも」という意味です。データバインディングやDI(依存性注入)などを使用でき、複雑なWebアプリのフロントエンドも効率よくシンプルに実装できます。
フレームワークには対象とするアプリの種類によってそれぞれ向き不向きがありますが、AngularJSはマスターメンテナンスのようなCRUD系アプリ、業務系アプリといった、各機能が独立した画面として存在し、フォームを使ってデータの送受信を行うようなアプリに向いているといわれています。
逆に、ゲームのように変化するデータが多量で速度重視になるアプリや、シングルページアプリケーション(AjaxやWebSocket通信を使用し、画面遷移しないWebアプリ)もあまり向いていないと筆者は考えます。
AngularJSはフルスタックフレームワークであるという特徴を持っています。ですで、クライアントサイドを実装する上で必要な機能はそろっています。
AngularJSは下記のような機能を持っています。
では、これらの機能について簡単に解説しましょう。詳細については、次回解説します。
AngularJSでは、テンプレート言語にHTMLを使用し、制御構造やUIコンポーネントはカスタム属性として使用します。また、「エクスプレッション構文」(「{{」と「}}」でくくる式)を使用してロジックを記述することも可能です。
- <!-- エクスプレッション構文 -->
- <h1>{{ title }}</h1>
- <!-- ロジックの記述も可能 -->
- <h2>{{ price + count }}</h2>
これもAngularJSを代表する機能です。下記のようにモデルとinputフィールドをバインドすることで、JavaScriptによるモデルの変更とユーザーの入力によるフィールドの変更が双方向になります。
- <!-- 双方向データバインディング -->
- <input type="text" ng-model="message">
- <div>{{message}}</div>
「DI(依存性注入)」という言葉は、SpringやSeaser2で有名になったので、Java経験者であればなじみがあると思います。これは、「オブジェクトに必要な情報を外部設定する手法」です(参考「DI:依存性の注入とは何か?」)。
AngularJSでは、下記のように依存性を持たせることができます。
- var myApp = angular.module('myApp', ["myServiceModule"]);
- //$scopeとmyServiceをDIする
- myApp.controller('MyController', ['$scope','myService',
- function($scope,myService){
- $scope.greet = function() {
- //myServiceの関数を使用できる
- $scope.message = myService.sayHello();
- };
- }
- ]);
AngularJS 1.3以前は、「ngRoute」というモジュールを使用してルーティング設定することが多かったのですが、最新版の1.4リリースに併せて「ngNewRouter」というモジュールがリリースされました。このモジュールを使用すると、下記のようにルーティング定義を行うことができます。
- angular.module('app', ['ngNewRouter'])
- .controller('AppController', ['$router', AppController]);
- //ルーティング定義
- AppController.$routeConfig([
- {path: '/', component: 'home' }
- ]);
- //コントローラー定義
- function AppController ($router) {
- ……
- }
JavaScriptで行うサーバーとの通信といえば、XMLHttpRequestを使った非同期処理です。AngularJSはサーバーとのデータ送受信に使用するためのモジュールを持っています。次のように、「$http」モジュールを使用して通信を行います。
- var myApp = angular.module('myApp');
- myApp.controller('MyController', ['$scope','$http', function($scope,$http){
- $scope.execute = function() {
- $http({method: 'GET', url: '/someUrl'}).
- success(function(data, status, headers, config) {
- // 正常に処理が終了した際に非同期で実行
- }).
- error(function(data, status, headers, config) {
- // エラーが発生した際に非同期で実行
- });
- };
- }]);
レスポンスコードが「2xx」の場合にはsuccessが実装され、それ以外の場合にはerrorが実行されます。
Copyright © ITmedia, Inc. All Rights Reserved.
HTML5�ス�ス�ス�ス髯句ケ「�ス�スX 鬯ョ�ォ�ス�ェ髯区サゑスソ�ス�ス�ス�ス�コ髣包スオ隴∵コキ�ク�キ�ス�ケ隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ュ鬩幢ス「隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ー