Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

AngularJSアプリ開発に役立つ小粒なライブラリ ~ ストレージ/イベント処理/入力値検証

AngularJSアプリ開発を支援する便利モジュール(10)

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

 AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねく揃えたフルスタックのフレームワークです。もっとも、本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。

目次

 なお、本連載では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

 では、具体的な例も見ていきます。以下では、[カウント]ボタンをクリックすると、ストレージ内のカウントをインクリメントします。

リスト1 storage.html
<!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 storage.js
// (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
});

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

著者プロフィール

  • WINGSプロジェクト(ウイングスプロジェクト)

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

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

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

バックナンバー

連載:AngularJSアプリ開発を支援する便利モジュール

もっと読む

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5