Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 前回は、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を配置しているフォルダです

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

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

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

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

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

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

おすすめ記事

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