AngularJS TIPS

AngularJS TIPS

$cookiesサービスを利用する際の注意点とは?($cookies)

2016年1月25日

AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。

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

 別稿「TIPS:クッキーを読み書きするには?」で紹介したように、AngularJSでは$cookiesサービス(ngCookiesモジュール)を利用することで、クッキーをシンプルなコードで操作できます。

 もっとも、ngCookiesモジュールは、AngularJS 1.3から1.4でさまざまな変更が加えられたサービスでもあります。そのため、AngularJS 1.3以前の環境で書かれたコードの一部は動作しない可能性がありますので、注意してください。

 本稿では、AngularJS 1.4で加えられた変更点に着目しながら、ngCookiesモジュールの機能についてさらに詳しく見ていきます。

$cookiesStoreサービスは利用しない

 まず、AngularJS 1.3以前では、クッキーを読み書きするサービスとして、$cookiesと並んで、$cookieStoreサービスを利用できました。以下は、$cookieStoreサービスを利用した例です。

JavaScript
$cookieStore.put('name', 'value');  // 設定
var value = $cookieStore.get('name');
$cookieStore.remove('name');
$cookieStoreサービスによるクッキーの操作

 しかし、AngularJS 1.4以降では、$cookieStoreサービスは非推奨の扱いとなりました。$cookiesサービスを利用するようにしてください。

$cookiesサービスでのアクセス方法も変化

 AngularJS 1.3の$cookiesサービスでは、プロパティ構文でクッキーにアクセスするのが基本でした。例えば以下のようにです。

JavaScript
$cookies.name = 'value';
console.log($cookies.name);
$cookiesサービスでのプロパティアクセス

 しかし、AngularJS 1.4ではこのようなプロパティ形式の構文は利用できません。別稿でも触れたように、putgetメソッドを利用してください。

 また、AngularJS 1.4では、オブジェクトを読み書きするためにputObjectgetObjectメソッドを利用できるようになりました。構文そのものは、putgetメソッドと同じなので、早速、例を見てみましょう。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<div>{{book}}</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
<script>
angular.module('myApp', [ 'ngCookies' ])
  .controller('MyController', ['$scope', '$cookies', function($scope, $cookies) {
    var book = {
      title: 'AngularJSアプリケーションプログラミング',
      price: 3700,
      published: new Date(2015, 7, 19),
      publish: '技術評論社'
    };
    // オブジェクトbookをクッキーに登録
    $cookies.putObject('book', book);
    // クッキーbookの内容を取得
    $scope.book = $cookies.getObject('book').title;
  }]);
</script>
</body>
</html>
クッキーにオブジェクトを登録/取得するコード(object.html)
クッキーから取得したオブジェクトの値(titleプロパティ)を表示
クッキーから取得したオブジェクトの値(titleプロパティ)を表示

 putObjectgetObjectメソッドを利用することで、オブジェクト/JSONデータの相互変換を自動的に実行してくれますので、アプリ側では変換を意識する必要がなくなります*1

  • *1 putgetメソッドでオブジェクトを受け渡しした場合、オブジェクトは変換されず、[object Object] のような意味のない文字列になってしまいますので、注意してください。

クッキーのオプションを設定する

 $cookiesサービスのdomainpathexpiressecureオプションも、実はAngularJS 1.4で導入されたものです。具体的な例は別稿を参照いただくとして、ここではこれらクッキーオプションをアプリ全体で設定する方法について解説します。

 一般的に、オプションの設定ポリシーはアプリ共通で決まるものです。このような値を個々の呼び出しで毎回明記するのは保守性といった意味でも望ましくありません。まずはアプリ全体でデフォルト値を設定しておき、異なる場合にだけ個別の$cookies呼び出しで設定するのが望ましいでしょう。

 以下は、別稿のサンプルを、アプリ共通でクッキーオプションを設定してみます。

JavaScript
angular.module('myApp', [ 'ngCookies' ])
  .config(['$cookiesProvider', function($cookiesProvider) {
    // 1デフォルトの有効期限を3ヵ月後に設定
    var expire = new Date();
    expire.setMonth(expire.getMonth() + 3);
    $cookiesProvider.defaults.expires = expire;
  }])
  .controller('MyController',
  ['$scope', '$cookies', function($scope, $cookies) {
    $scope.name = $cookies.get('name');
    $scope.record = true;

    $scope.onclick = function() {
      if($scope.record) {
        // 2オプションの設定を省略
        $cookies.put('name', $scope.name);
      } else {
        $cookies.remove('name');
      }
    };
  }]);
アプリ全体でクッキーオプションを設定するコード(global.html)

 クッキーオプションをアプリ全体で設定するには、$cookiesProviderプロバイダーのdefaultsプロパティを利用します(1)。defaultsプロパティを介して、そのサブプロパティであるexpirespathdomainsecureにアクセスできます。

 なお、オプションそのものはサービスが初期化される前に設定されていなければならないので、$cookiesProviderプロバイダーもconfigメソッドの中で呼び出さなければなりません(configメソッドは、サービスのインスタンス化に先立って実行されるメソッドです)。

 アプリ共通でオプションを設定していますので、2$cookies.putメソッドではオプションの設定を省略している点にも注目です。

処理対象:クッキー カテゴリ:サービス
API:$cookies カテゴリ:ngCookies > service(サービス)
API:$cookiesProvider カテゴリ:ngCookies > provider(プロバイダー)

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

39. 配列/オブジェクトの内容を列挙するには?(forEach)

angular.forEachメソッドを使って、配列の要素やオブジェクトのメンバーを列挙する方法を解説する。

40. クッキーを読み書きするには?($cookies)

AngularJSが提供する機能を利用してクッキーを読み/書き/削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。

41. 【現在、表示中】≫ $cookiesサービスを利用する際の注意点とは?($cookies)

AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。

42. アプリ共通の例外処理を実装するには?($exceptionHandler)

アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。

43. AngularJSで文書ツリーを操作するには?(element)

AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。

サイトからのお知らせ

Twitterでつぶやこう!