なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
本稿では、これまでの回では扱えなかった小粒な――しかし、アプリ開発には欠かせない以下のライブラリを紹介します。
- ngStorage：Web Storageを操作するためのサービス
- UI Event：AngularJS標準で対応していないイベントを監視
- UI Validate：独自の検証ルールを定義
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- AngularJSアプリでデータを視覚的に見せる方法を知りたい方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.4.8
- ngStorage 0.3.10
- UI Event 1.0.0
- UI Validate 1.2.1
- Chrome 46
- Firefox 42
- Internet Explorer 11
Web Storageでユーザー単位のデータを管理する - ngStorage
Web Storage（以降、ストレージ）とは、ブラウザー標準で用意されたデータストアの一種。キー／値の組み合わせでデータを管理する、いわゆるKey-Value型データストアです。同類のしくみとして、クッキー（cookie）もありますが、以下のような違いがあります。環境が許すのであれば、今後はストレージを優先して利用することをお勧めします。
| クッキー | ストレージ | |
|---|---|---|
| データ容量 | 小さい（4KBが上限） | 大きい（5MBが上限） |
| 有効期限 | あり | なし |
| サーバーとの通信 | リクエスト都度、送信 | 発生しない |
そして、AngularJSアプリでストレージを扱うためのライブラリが、ngStorageです。ngStorageは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save ngstorage
では、具体的な例も見ていきます。以下では、［カウント］ボタンをクリックすると、ストレージ内のカウントをインクリメントします。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）ngStorage.min.jsをインポート -->
<script src="bower_components/ngstorage/ngStorage.min.js"></script>
<script src="scripts/storage.js"></script>
</head>
<body ng-controller="MyController">
<button ng-click="$storage.count = $storage.count + 1">増加</button>
<button ng-click="ondelete()">クリア</button>
<div ng-show="$storage.count">クリック回数は、{{$storage.count}}回</div>
</body>
</html>
// （2）ngStorageモジュールへの依存関係を設定
angular.module('myApp', ['ngStorage'])
.controller('MyController', ['$scope', '$localStorage',
function($scope, $localStorage) {
// （3）ストレージを初期化
$scope.$storage = $localStorage.$default({
count: 10
});
// （4）［クリア］ボタンでストレージをクリア
$scope.ondelete = function() {
delete $scope.$storage.count;
};
ngStorageを利用するには、ライブラリ本体（ngStorage.min.js）をインポートした上で（1）、アプリモジュール（myApp）からはngStorageモジュールへの依存関係を宣言します（2）。
ストレージそのものには、$localStorage／$sessionStorageサービスからアクセスできます。前者は、オリジン単位にデータを保存するストレージ、後者は、セッション単位でデータを保存するストレージです。ブラウザーを閉じても保存したいデータは$localStorageで、アプリを利用している間だけ一時的に管理したいデータは$sessionStorage、という使い分けをします。本稿では、$localStorageを利用しますが、$sessionStorageでもできることは同じです。
ストレージを初期化するのは、$defaultメソッドの役割です（3）。引数には「キー名: 値」のハッシュ形式で、ストレージに格納すべきデータを初期化します。初期化が不要であれば、単に「$scope.$storage = $localStorage;」としても構いません。
あとは、ボタンクリック（ng-click属性）のタイミングで、$storage.countプロパティをインクリメントするだけです。ストレージ内の値は、このように$storageオブジェクト（実体は$localStorage）のプロパティとして操作できるわけです。値がオブジェクト型である場合にも、ngStorageがシリアライズ／デシリアライズを自動化してくれますので、アプリ開発者は意識する必要はありません。
プロパティなので、ストレージ内のキーを削除するにもdelete演算子を利用します（4）。
ストレージ配下のすべてのキーを削除するならば、resetメソッドを利用してください。resetメソッドでは、$defaultメソッドと同じく、「キー名: 値」の形式で、初期化すべき値を指定できます。
$scope.$storage.$reset({
count: 100
});
