ビジネスロジック記述の必須知識、AngularJSの「サービス機能」を理解しよう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第4回

　本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。今回は、AngularJSのサービス機能を使ってのデータ管理について説明します。

はじめに

　前回に引き続き、図1のようなタスク管理をするサンプルを作成します。前回までで画面の作成とボタンのアクションのイベント等の処理が終了し、画面周りについては完成しました。

　しかし、まだ、実際のデータの登録、削除などを含めてデータの管理は行っていません。今回は、AngularJSのサービス機能を使ってタスクのデータ管理を扱う部分を実装します。

図1：作成するアプリケーションの概要

対象読者

• jQueryなどを使っている開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（34.0）、Safari（8.0.2）の環境にて確認を行っています。

サービスとは

　AngularJSでのサービスは大きく分けて2つの目的で使用されます。ひとつは今回のサンプルで作成するようにビジネスロジックを記述するため、もうひとつはユーティリティ等の汎用機能として使われます。例えば、ログの記述や、Ajaxのための機能は既にAngularJSで用意されていますが、こちらもサービス機能を使って実装されています。一般的にこれらを、MVC構造では「モデル」と呼んでいます。前回までに利用してきたディレクティブやコントローラと今回紹介するサービスを、MVC構造で記述すると図2のようになります。

図2：AngularJSのMVC構造

　また、各サービスのインスタンスはアプリケーションで1つ、という大きな特徴を持っています。少々難しい言い方をすれば、シングルトンのオブジェクトという扱いになります。この特徴を利用して、各コントローラ間などでデータ共有をすることもできます。今回サンプルとして作成するItemsサービスは図3のような関係になり、各コントローラからDI機能を使って利用されます。

図3：カスタムサービスとその他コンポーネント