SHOEISHA iD

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

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

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

AngularJSの強力なデータバインディングの肝となる! スコープを理解して、独特な開発スタイルを自分のものにしよう

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

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

 本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。前回に引き続き、AngularJSを使ってタスク管理をする1つのサンプルアプリケーションを通じて、その構造の理解や開発の流れなどを紹介します。今回は、コントローラ間のデータ連携を中心に説明します。

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

はじめに

 前回に引き続き、AngularJSを使ってのタスク管理をするサンプルを作成していきます。前回まではタスク一覧ページを中心に実装し、ページを遷移するところまで実装しました。ただし、画面の遷移について、フッタのメニューを使っての遷移はできましたが、データと連携した画面遷移や、ボタンなどのクリックアクションを通じての画面遷移はしませんでした。今回はコントローラ間のデータ連携を中心に説明し、実際のサンプルでは、図1のようにクリックアクションからの画面遷移や、データの変更時のイベントを通知するための実装を行っていきます。

図1:今回作成するサンプルアプリの概要
図1:今回作成するサンプルアプリの概要

対象読者

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

必要な環境

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

スコープ($scope)とは

 AngularJSでは、$scopeというオブジェクトを使用しテンプレートと連携をして、テンプレート内に記述した変数の設定やメソッドの起動などを行います。このように、$scopeは、モデル(プロパティ)の監視や、テンプレートのUIとその振る舞いを管理しています。たとえば、今回扱うサンプルコードでのHTMLテンプレートとコントローラ(スコープ)は、図2のような関係となります。

図2:HTMLとコントローラの関係
図2:HTMLとコントローラの関係

 またこれ以外にも、$scopeはコントーラ間のデータ連携などにも使えます。今回はそのデータ連係の機能を使ってサンプルコードを実装していきます。

コントローラとスコープの関係

 AngularJSで$scope(以下、概念として説明する場合には「スコープ」と記します)を管理しているのは、ディレクティブです。

 ディレクティブを定義する際には、親スコープをそのまま共有するか、新たにスコープを作成するかなどの指定ができます。コントローラであるngControllerディレクティブでは、新規にスコープを作成するように定義されています。ただし、コントローラで作成されたスコープは、テンプレート上のディレクティブの親子関係を引き継いで利用する事ができます(=子コントローラのスコープは親コントローラのスコープから継承したインスタンスです)。具体的には図3のような関係を持っていて、この関係を用いて各コントローラのスコープを連携することができます。

図3:AngularJSでの$scopeの概要
図3:AngularJSでの$scopeの概要
表1:スコープのアクセス方法
変数名 説明
$scope.$parent 現在のスコープの親スコープへのアクセス
$scope.$root $rootScopeへのアクセス

 これらのスコープの機能を利用したものがリスト1です。

 前回作成したページの表示・非表示を行うchangePageメソッド(1)がpageControllerにあります。

 (2)(4)では、一覧表示からリストをクリックした際に呼ばれるshowメソッドとデータを登録した際に呼ばれるaddItemメソッドがありますが、これらの処理の完了後にページを遷移するために親スコープのメソッドであるchangePageメソッドを呼んでいます。

 (3)では、$scope.$rootで全体のスコープに対してアクセスしています。実際に呼んでいる$broadcastメソッドについては「スコープのイベント」にて説明します。

リスト1:controllers.jsの抜粋
module.controller('pageController',function($scope){
    //  (1) pageControllerのスコープにあるメソッド
    $scope.changePage = function(type){
        // : 省略
    };
});

  // (2) pageControllerのchangePageメソッドを呼ぶ
module.controller('listController',function($scope){
    $scope.show = function(item){
        // : 省略
        $scope.$parent.changePage('info');
    };
});
module.controller('addController',function($scope){
    $scope.addItem = function(){
        // : 省略
        // (3) $rootScopeの$broadcastメソッドを呼ぶ
        $scope.$root.$broadcast('changeItems');
        // (4)  pageControllerのchangePageメソッドを呼ぶ
        $scope.$parent.changePage('list');
    }
});

次のページ
スコープのプロパティ値の変更

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

  • 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/8311 2014/12/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング