Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

アプリ内でよく利用するビジネスロジックを定義するには?(factoryメソッド)

2016年7月25日

より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。

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

 別稿「TIPS:アプリ内でよく利用するビジネスロジックを定義するには?(serviceメソッド)」では、serviceメソッドを使って、他のサービスと連携しながら、アプリ固有のビジネスロジックをサービス化する方法について解説しました。

 AngularJSでは、ビジネスロジックをサービス化するために、serviceメソッドともう一つ、factoryというメソッドを提供しています。両者はよく似ていますが、構文が異なります。

[構文]factoryメソッド

factory(name, func)

  • name: サービスの名前
  • func: サービスのインスタンスを生成するための関数

 まずは、前掲の別稿で作成したAreaServiceサービスを、factoryメソッドで実装し直してみましょう。AreaServiceサービスは、

  • 四角形の面積を求めるsquareメソッド
  • 円の面積を求めるcircleメソッド
  • ひし形の面積を求めるdiamondメソッド

を備えているものとします。

JavaScript
angular.module('myAppService', [])
  .factory('AreaService', ['$log', function($log) {
    return {
      square: function(base, height) {
        $log.debug('[四角形]' + base + '×' + height);
        return base * height;
      },
      circle: function(radius) {
        $log.debug('[円(半径)]' + radius);
        return radius * radius * Math.PI;
      },
      diamond: function(diagonal1, diagonal2) {
        $log.debug('[ひし形]' + diagonal1 + '×' + diagonal2);
        return diagonal1 * diagonal2 / 2;
      }
    }
  }]);
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="scripts/factory.js"></script>
<script>
angular.module('myApp', ['myAppService'])
  .controller('MyController', ['$scope', 'AreaService',
    function($scope, AreaService) {
    console.log(AreaService.square(3, 2));
    console.log(AreaService.circle(3));
    console.log(AreaService.diamond(4, 9));
  }]);
</script>
</body>
</html>
リスト1 AreaServiceサービスを定義&呼び出すコード(上:factory.js/factory_app.html)
サービスの実行結果

 serviceメソッドでは、第2引数として「サービスをインスタンス化するためのコンストラクター関数」を指定していたのに対して、factoryメソッドでは「サービスのインスタンスを返す関数」(ここではオブジェクトリテラルを返す関数)を指定するわけです。

 この性質上、サービスの機能を直接的に定義する場合にはserviceメソッドが向いています(factoryメソッドではインスタンス化の手順を踏む分、一段階、コードが冗長になります*1)。一方、すでにサービス化したい機能がクラスとして用意されている、既存のメソッドの戻り値をサービスとして公開したい、などのケースでは、factoryメソッドが向いています。例えば、既存のクラス/メソッドをサービス化するには、以下のようにします。

  • *1 ですから、上のサンプルのような例では、serviceメソッドの方が適切です。
JavaScript
.factory('FactoryService', function() {
  return new MyClass();
})
JavaScript
.factory('FactoryService', function() {
  return MyClass.getInstance();
})
リスト2 factoryメソッドの使い方(上:既存のクラスをサービス化、下:メソッドの戻り値をサービス化)
処理対象:サービス カテゴリ:基本
処理対象:サービスの切り出し カテゴリ:基本
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)

※以下では、本稿の前後を合わせて5回分(第64回~第68回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
64. 複数のコントローラー間で共有すべき値を管理するには?(constantメソッド)

より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はconstantメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。

AngularJS TIPS
65. アプリ内でよく利用するビジネスロジックを定義するには?(serviceメソッド)

より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをserviceメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。

AngularJS TIPS
66. 【現在、表示中】≫ アプリ内でよく利用するビジネスロジックを定義するには?(factoryメソッド)

より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。

AngularJS TIPS
67. パラメーター付きのサービスを定義するには?(providerメソッド)

value/service/factoryメソッドに比べてより原始的なproviderメソッドの利用場面を紹介し、使い分け指針をまとめる。またproviderメソッドを使ってサービスを定義する方法を解説する。

AngularJS TIPS
68. AngularJSアプリの単体テストを実施するには?(準備編)

AngularJSで一般的に採用されているテスティングフレームワーク「Karma+Jasmin」による単体テスト環境を構築する手順を説明する。

サイトからのお知らせ

Twitterでつぶやこう!