Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
書籍転載:JavaScriptライブラリ実践活用[厳選111]

書籍転載:JavaScriptライブラリ実践活用[厳選111]

Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する

2013年5月16日

書籍転載の4本目(書籍内の番号は「71」)。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。

WINGSプロジェクト 安西 剛
  • このエントリーをはてなブックマークに追加

書籍転載について

 本コーナーは、技術評論社発行の書籍『JavaScriptライブラリ実践活用[厳選111]』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 『JavaScriptライブラリ実践活用[厳選111]』の詳細や購入は技術評論社のサイト目次ページをご覧ください。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

Ember.jsはビューとコントローラを紐付け、HTML DOM更新部分を省略し、シンプルに記述することができるフレームワークです。DOMの更新は煩雑になりやすいため、ビューとJavaScriptコードが行うことを明確に分割でき、可読性を上げることができます。

  • 名称: Ember.js
  • 分類: フレームワーク
  • URL: http://emberjs.com/
  • 関連ファイル: ember-1.0.0-pre.2.min.js
図071-01 Ember.jsの構成
コントローラとビューの処理を分けて一覧表示

使用方法

 Ember.js は、jQuery とhandlebars というテンプレートエンジンを使用します。Ember.jsのページより、「DOWNLOAD EMBER」ボタンよりember.js を、Download Handlebars リンクよりHandlebarsがダウンロードできます。使用時は、HTML 上でscript タグを記述し読み込みます。

Ember.jsの構成

 Ember.js はMVC モデルで作られています。主に、ビューとデータをどうつなぎ合わせるかという部分にフォーカスし、構造化できるように構成されています。図071-01 のとおり、Ember.js は大きく分けて4つの機能があります。

図071-01 Ember.jsの構成
図071-01 Ember.jsの構成

・モデル
 内部データや、API などの外部データとアクセスを行います。

・ビュー
 HTML などのビューです。テンプレートエンジンを持ち、コントローラからのデータを受け取り動的にHTMLを整形する機能を持ちます。

・コントローラ
 JavaScriptで記述した動的な処理と、ビューの動的な処理をひもづけます。これにより、HTMLのDOMを直接操作を行う必要がなくなります。

・ステートマネージャ
 コントローラと同じように、ビューの動的な処理と紐付けますが、たとえば画面すべての項目をまとめて定義し、処理の状態を管理するのがステートマネージャです。たとえば、画面の表示される項目がURLによって変更する場合など、URLによっての処理を定義し、Viewとも紐付けます。

Ember.jsの処理概要

 では、サンプルで処理を見て行きましょう。リスト071-01は書籍の一覧を表示するサンプルです。

HTML
<script type="text/javascript">
<!--
// Emberのアプリケーションオブジェクトを作成
var App = Ember.Application.create();

// 1 配列のデータを持つコントローラを作成
App.ApplicationController = Ember.ArrayController.create();

// 2 どのテンプレートに適用するかを指定
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

// 3 書籍のデータをバインド
App.ApplicationController.set('content', [{
    name: 'アプリを作ろう! Android入門 ~ゼロから学ぶアプリの作成から公開まで',
    price : 1995
  },
  {
    name: 'TECHNICAL MASTER はじめてのJSP&サーブレット Eclipse 3.7 Indigo+Tomcat 7対応版',
    price : 2730
  },
  {
    name: 'Windows Azure Platform開発入門',
    price : 3990
  }]);

// 4 表示処理開始
App.initialize();
-->
</script>
リスト071-01 Ember.js.html

 まず、Ember.Application.create 関数でEmber.jsのオブジェクトを生成します。1では、作成したアプリケーションオブジェクトに対して、コントローラを作成しています。2では、App.ApplicationView に対して、Ember.Viewを継承したオブジェクトを作成します。templateName プロパティには、コントローラでどのテンプレートを使用するかid を指定しています。テンプレート上の「data-templatename」属性値と一致させておきます。3では、本の一覧のデータをコントローラにバインドしています。このデータを、ビューでループして一覧表示を行います。4で実際に表示処理を開始しています。

テンプレートエンジン「handlebars」

 handlebars はLite なテンプレートエンジンです。コントローラでバインドしたデータをもとに、動的にHTMLを構成することができます。リスト071-02は、コントローラでバインドした本の配列を、HTML でループすることによって一覧化しているサンプルです。

HTML
<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>書籍紹介</title>
  <!--ember.jsをインポート-->
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="js/handlebars-1.0.0.beta.6.js"></script>
  <script src="js/ember-1.0.0-pre.2.min.js"></script>
  </head>
  <!-- HTMLテンプレート部分 -->
  <script type="text/x-handlebars" data-template-name="application">
  <h1>書籍一覧</h1>
  <div>
    <table border="1">
    <tr>
      <td>名称</td>
      <td>価格</td>
    </tr>
    <!-- 1 ループを行い、本を表示する -->
    {{#each App.ApplicationController}}
    <tr>
      <td>{{name}}</td>
      <td>定価{{price}}</td>
    </tr>
    {{/each}}
    </table>
  </div>
  </script>
<body>
</body>
リスト071-02 Ember.js.html

 1 属性「type="text/x-handlebars"」でhandlebars テンプレートであることを示し、「data-template-name="application"」でコントローラと紐付けています。1行ずつの値は、パラメータ名を{{}} で囲むことにより、動的に変化します。

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
1. MVCパターンでアプリケーションを構築する(Backbone.js)

書籍転載の1本目(書籍内の番号は「86」)。クライアントサイドMVCフレームワークの定番ライブラリの1つ「Backbone.js」の基本的な使い方を解説。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
2. Backbone.jsのModelを操作し、イベントを購読する

書籍転載の2本目(書籍内の番号は「87」)。Backbone.jsのModelの内部状態を変更するメソッドが呼ばれた際に発生するchangeイベントを購読することで、Modelの状態変更を監視する方法を説明。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
3. Backbone.jsのCollectionを操作し、イベントを購読する

書籍転載の3本目(書籍内の番号は「88」)。Backbone.jsのCollectionの内部状態を変更するメソッドが呼ばれた際に発生するadd/change/remove/resetなどのイベントを購読することで、Collectionの状態変更を監視する方法を説明。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
4. 【現在、表示中】≫ Ember.jsでビューとコントローラを紐付け、DOM更新のコードを省略する

書籍転載の4本目(書籍内の番号は「71」)。MVCフレームワークの「Ember.js」の基礎と基本的な使い方を紹介。Ember.jsではテンプレート・エンジンにより、コントローラからのデータを受け取ってHTML出力内容を動的に整形できる。

書籍転載:JavaScriptライブラリ実践活用[厳選111]
5. [AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する

書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。

サイトからのお知らせ

Twitterでつぶやこう!