AngularJSでMVCプログラミングをはじめよう

AngularJSではじめるJavaScriptフレームワーク開発スタイル 第2回

　前回は、JavaScriptのトレンドなどをふまえながら、AngularJS以外のJavaScriptのフレームワークも含めて紹介しました。今回からはAngularJSの使い方を含めて説明していきます。まずは1つのサンプルアプリケーションを通じて、その構造の理解や開発の流れなどがわかるように今回を含めて複数回で紹介します。十分な理解ができない部分もあると思いますが、リファレンスとしての説明はその後に紹介していきますので、細かい部分はあまり深く気にせずに、フレームワークを使った開発の流れを感じていただければと思います。

対象読者

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

必要な環境

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

サンプルアプリケーションの概要

　今回作成するアプリケーションは、単純な「タスク管理」のアプリケーションです。次のような3つの画面を作ります。

1. タスク（件名とメモ）を登録する画面
2. 登録したタスク一覧を表示する画面
3. 登録したタスクを参照する画面と、削除する為の画面

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

　ページ遷移はシングルページアプリケーション形式で作成します。シングルページアプリケーションとは、jQuery Mobileなどでも使われている方式であり、通常は、Ajax等を用いて複数のファイルで管理されているHTMLを動的に読みDOMを構築しますが、今回のサンプルでは、1つのHTML内のdivタグの表示・非表示によって切り替えます。

　また、登録するタスクデータはサーバで管理する方法と、プログラム内の変数として保持する2つの方法を実装し、これらを切り替えられるようにします。実際の開発シーンではサーバ側の実装と同時に進めるも多々あります。AngularJSでは、依存性注入（DI）を使ってそのようなシーンで効率よく管理する方法があります。

　サーバで管理する部分はPHPで実装していますので、サンプルコードのrest.phpを参照してください。また、デザイン部分ではBootstrapを使っています。そのため、本サンプルコード内ではjQueryは使っていませんが、Bootstrapの依存のためにjQueryが必要になっています。

　また、ダウンロードできるコードはサンプルアプリケーションの完成形を載せています。Ajaxでのサーバ通信を必要としないブラウザだけで実行できる形式で提供しているので、サンプルアプリケーションの動きなどを確認することができます。

全体構造のプログラム構成

　続いて、プログラムファイルの全体構造を図2、表1のように作っていきます。

図2　サンプルコードのファイル構造

表1　各ファイルの説明

ファイル・フォルダ名	説明
app.js	AngularJSのモジュールの作成などアプリケーション全体の定義を行います
controllers.js	AngularJSのコントローラを定義しているプログラムです。コントローラはこのプログラムに追記していきます。
services.js	AngularJSのサービスを定義しているプログラムです(次回作成)
services/AjaxItems.js	Ajaxを使ってタスクデータをサーバと通信する為のプログラムです(次回作成)
services/ArrayItems.js	実際のサーバにはアクセスせず、メモリ内だけでタスクを管理するプログラムです(次回作成)
index.html	画面用のHTMLです。AngularJSのテンプレートでもあります。
vendors/	AngularJSのコードやそれ以外など第三者が提供しているプログラムやCSSを配置しているフォルダです