SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
アプリケーション全体の枠組みの作成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8207 2014/10/27 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング