SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ユニットテストをしてみよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8424 2015/02/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング