AngularJS ってどんなもの

はじめに

WEB開発をするにあたり、必要とされるのはWEBフレームワークです。
フレームワークなしでもWEB開発は進められますが、フレームワークを利用すると効率よく開発ができるようになります。

フレームワークは便利ですが、WEB開発に対応しているものが多く存在し選ぶのが難しい状況です。
今回はフレームワークの中でもAngularJSについてご調べてみました。
良ければ今後の社内開発ツールのひとつにしようかと思います！

AngularJSとは...

AngularJSはGoogle社が中心となって開発されたJavaScriptで作られたWEBフレームワークです。
オープンソースのソフトウェアとなっています。

WEBフレームワークらしく、MVCモデルに対応しています。
マスターメンテナンスのようなCRUD系のアプリケーション、業務系アプリケーションのような各機能が独立した画面として存在し、フォーム（form）を使ってデータの送受信を行うようなアプリケーションに向いているといわれています。

メリット／デメリット

【メリット】

・フルスタックフレームワーク
　WEBアプリケーション開発を前提として開発されているため、SPA（Single Page Application）開発に必要な機能が含まれています。
　ルーティングやAjax通信、双方向データバインディングなどの機能は簡単な記述で呼び出せるようになっています。
　

・開発工数が削減可能
　AngularJSは、多機能な割に動かすために必要な工数がそれほど多くありません。
　ディレクティブで設定した記述を指定することで、各機能を呼び出すことができます。
　AngularJSをうまく使えば開発にスピード感が出ることが期待できます。

【デメリット】

AngularJSにもいくつかのデメリットがあります。

・パフォーマンスが低い
デメリットとして1番気になるのは、パフォーマンスの低さです。
AngularJSには「スコープ」と呼ばれる機能があります。
これは一般にプログラミングで利用されるスコープのことではなく、画面を監視/変更する特殊なオブジェクトを指しています。

AngularJSには「消化サイクル（Digest Cycle）」と呼ばれるある種のループ構造がありむやみにスコープを増やしてしまうと、画面を監視する処理が無駄に呼ばれてしまい速度に影響が出てしまいます。
　

・様々な記述方法がある
AngularJSでは同一の処理を作るのに複数の記述方法が存在しています。
いろんな記載ができるのはメリットのように感じますが、チーム開発においてはソースコードの統一が図れなくリスクを生みます。

ソースコードの書き方が統一されていないとコードの可読性が下がってしまうので不具合につながりかねません。

AngularJSの主な機能

AngularJSを導入することで簡単に実現できることは以下のようなものがあります。

①ルーティング機能
　モジュールを使用して下記のようにルーティングを定義することができます。

hoge.js

## ルーティング ######################
angular.module('app', ['ngNewRouter'])
  .controller('AppController', ['$router', AppController]);
//ルーティング定義
AppController.$routeConfig([
  {path: '/', component: 'home' }
]);
//コントローラー定義
function AppController ($router) {
  ……
}

　

②Ajax通信機能
　JavaScriptで行うサーバとの通信といえば、XML Http Request を使った非同期処理です。AngularJSはサーバとのデータ送受信に使用するためのモジュールが同胞されています。
　下記のように「$http()」モジュールにて通信を行います。

hoge.js

## Ajax通信 ######################
var myApp = angular.module('myApp');
myApp.controller('MyController', ['$scope','$http', function($scope, $http) {
    $scope.execute = function() {
      $http({
        method: 'GET', 
        url: '/request/post.php'
      }).
      success(function(data, status, headers, config) {
        // 正常に処理が終了した際に非同期で実行
      }).
      error(function(data, status, headers, config) {
        // エラーが発生した際に非同期で実行
      });
    };
}]);

　レスポンスコードが「2xx」の場合には「success」が実行され、それ以外の場合には「error」が実行されます。
　

③双方向バインディング
　こちらもAngularJSを代表する機能です。
　下記のようにモデルとinputフィールドをバインドすることができ、JavaScriptによるモデルの変更とユーザの入力によるフィールドの変更が双方向になります。

index.html

<!-- ## 双方向データバインディング -->
<input type="text" ng-model="message">
<div>{{message}}</div>

　

④HTMLテンプレート
　AngularJSでは、テンプレート言語にHTMLを使用し制御構造やUIコンポーネントはカスタム属性として使用します。
「エクスプレッション構文（「{{」と「}}」でくくる形式）」を使用してロジックを記述することも可能です。

index.html

<!-- ## 文字列出力 -->
<h1>{{ title }}</h1>
<!-- ## ロジックの記述 -->
<div>{{ (price + tax ) * count }}</div>

##　おわりに
AngularJSの特徴はわかりましたでしょうか。
WEBフレームワーク、中でもJavaScriptフレームワークだけで見てもほかにもたくさんございます。
それぞれに特徴がありますので、違いを理解して必要に応じて導入を検討していくのがよいと思います。