AngularJSのサービス開発とユニットテスト ～テストの流れを把握して保守性の高いコードにしよう

AngularJSではじめるJavaScriptフレームワーク開発スタイル 第5回

　本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。前回で完成したタスク管理をするサンプルアプリを使って、データ管理をサーバ（PHPで実装）で行うように変更します。そして、後半はユニットテストの方法を紹介します。AngularJSのDI機能はテストを行いやすい構造にすることができますので、テストの流れを把握した上でコードを記述するとよりメンテナンスが高いコードが記述できます。

対象読者

• jQueryなどを使っている開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（34.0）、Safari（8.0.2）の環境にて確認を行っています。

$httpサービスを使う

　Ajaxでサーバと連携する部分である、listメソッド、addメソッド、removeメソッドを、$httpサービスを使って実装します。

$httpサービスの使い方

　$httpサービスは、リスト1のようにjQueryのajaxメソッドと多少パラメータの名称が異なりますが、使い方はほぼ同様です。ただし、送信されるデータはjson形式のデータになります。

リスト1　$httpの使い方

$http({
   url : 'url',
   method : 'POST',
   data : {
       // 送信データ
   }
})
.success(function(data,status,headers,config,statusText){
  // 成功したときの処理
})
.error(function(data,status,headers,config,statusText){
  // 失敗したときの処理
});

表1　$httpの引数に指定できる主なパラメータ

引数のキー値	説明
method	HTTPのメソッド。GETやPOSTのように文字列で指定
url	リクエストを投げる先のURL
params	リクエストパラメータ
data	送信するデータ。デフォルトで送信されるデータはapplication/json形式になる。

　Ajaxの結果は、success()もしくは、error()メソッドで取得可能です。これらにはコールバック形式の関数を指定します。また、この関数には、表2のような引数をして実際の結果を取得します。

表2　success()とerror()の引数

引数	説明
第一引数（data）	レスポンス結果のデータ
第二引数（status）	HTTPのステータスコード（数値）
第三引数（headers）	レスポンスヘッダ。例）headers("Content-Type"); のように取得する
第四引数（config）	リクエストで使用した設定オブジェクト
第五引数（statusText）	HTTPのステータス（テキスト）

サーバ側の処理

　サーバ側の処理はPHPで記述してあり、一覧データの取得の場合には表3のようなリクエストを送信すると、リスト2のような結果が取得できるようにしています。methodというクエリパラメータによって処理を切り分けるようにしてあります。PHPのコードについては説明しませんので、興味がある場合にはサンプルコード内のソースを参照してください。

表3　一覧データを取得するAPI

URL	rest.php?method=list
メソッド	GET

リスト2　タスク一覧のデータ結果例

{"data":[
   {"id":"6ddd35d0f42ffd","title":"タスク表題1","memo":"タスクのメモ"}
]}

$httpを使ったタスクデータの管理

　実際に$httpを使って一覧データを取得するコードはリスト3のようになります。

リスト3　タスク一覧を取得する$httpサービスの利用例

p.list = function(callback){  // （1）結果を受け取るコールバックを指定
    this.$http({
         method  : 'GET',
         url     : 'rest.php',
          params  : {
              method: 'list'
          }
      }).success(function(response){
          callback.call(this,response.data);  // （2）成功時にはコールバックに一覧データを設定する
      });
};

　Ajaxの処理は非同期の為に、引数にコールバックを指定し（1）、結果の取得が成功したらそのコールバック関数に値を設定します（2）。同様の手順で、タスクの追加メソッドをリスト4のように実装します。

リスト4　AjaxItems.jsの抜粋（タスク追加と削除の実装）

p.add = function(item, callback){  // （1）追加するタスクデータを引数に指定
    var $scope = this.$scope;
    this.$http({                                      // （2）Ajaxを実行する
        method : 'POST',
        url    : 'rest.php',
        data   : {
            method : 'add',
            title  : item.title,
            memo   : item.memo
        }
    }).success(function(response){
        $scope.$broadcast('changeItems');  // （3）追加して、タスクデータ一覧が変わったことをイベントとして通知
        callback.call(this,response.data);      // （4）成功した結果をコールバック関数を使って通知
    });
};

　（1）ではそれぞれの対象のタスクデータと実行結果を受け取るコールバック関数を指定します。（2）ではサーバに対してAjaxでリクエストを投げます。（3）では一覧データが変わったことをイベントとして通知します。また、（4）でコントローラ側から指定されたコールバック関数に取得した結果を設定し実行します。

サービスの実装の切り替え

　前回のサンプルではArrayItems.jsを使用していた部分をリスト5のようにAjaxItems.jsに切り替えます。あらかじめ、非同期処理を想定してインターフェースをそろえてありますので、コントローラ側の実装を一切変える必要が無く簡単に処理が切り替えられます

リスト5　services.jsの抜粋（サービスの切り替え）

module.service('Items',function($rootScope,$http){  // （1）新たに$httpを追加
    return new app.AjaxItems($rootScope,$http);  // （2）今回作成したものに変更
    //return new app.ArrayItems($rootScope);      // （3）前回の指定（使わないのでコメント化）
});