Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/02/06 14:00

 本連載は、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)前回の指定(使わないのでコメント化)
});

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5