AngularJSではじめるJavaScriptフレームワーク開発スタイル 第2回
WINGSプロジェクト coltware [著] 山田 祥寛 [監修] 2014/10/27 14:00
このエントリーをはてなブックマークに追加

サンプルファイル 794.39 KB
1 2 3 →

 前回は、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 作成するアプリケーションの概要
図1 作成するアプリケーションの概要

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

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

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

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

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

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

図2 サンプルコードのファイル構造
図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を配置しているフォルダです

1 2 3
→
INDEX
AngularJSでMVCプログラミングをはじめよう
Page1
対象読者
必要な環境
サンプルアプリケーションの概要
全体構造のプログラム構成
アプリケーション全体の枠組みの作成
ページ制御の為のコントローラとテンプレートの作成
繰り返しのデータを表示する
ページ内のクリックに対応する
次回に向けて
参考資料
こちらの関連記事もおすすめです

プロフィール

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


プロフィール
山田 祥寛 ヤマダ ヨシヒロ

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。
主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数


記事へのコメント・トラックバック機能は2011年6月に廃止させていただきました。記事に対する反響はTwitterやFacebook、ソーシャルブックマークサービスのコメントなどでぜひお寄せください。