Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

Ember.jsで単語帳を作ろう vol.1


みなさん、Ember.jsというMVCフレームワークをご存知でしょうか??
そうです、あのAngular.jsのライバルとも言えるフレームワークです。
ここからアクセスしてください

MVCとはなにか??

まず、MVCとはなんのことか、ピンとこない人も多いと思いますので、解説したいと思います。

ソフトウェアの設計モデルの一つで、処理の中核を担う「Model」、表示・出力を司る「View」、入力を受け取ってその内容に応じてViewとModelを制御する「Controller」の3要素の組み合わせでシステムを実装する方式。
e-wordsより

jQueryだけじゃだめなの??

例えば、MVCフレームワークを使わずにjQueryだけでリストを管理して表示しようとすると、
それぞれのアイテムにidを割り振って
$("#id1").remove()
とかしたり、
リストの途中にアイテムを挿入したい時にも
$("#id3").appendTo("#id2");
みたいな感じに書いて、さらにリストを管理するための配列を別に持っておかなければならない場合もあります。

MVCフレームワークを使えば、なにができるのか

MVCフレームワークを使えば、そのフレームワーク上で用意されたオブジェクトModelや配列Modelを更新すると、自動的にHTMLが更新されて、jQueryでいう、
$("#id1").remove()
このようなビューに反映させる処理を書かなくてよくなります
つまり、配列操作やオブジェクト操作だけで、HTMLも同時に操作できるのです

Ember.jsにおけるMVC



Ember.jsでは、URLによって処理の受け渡し先を変える仕組みを持っていて、これをRouteと呼びます。
Routeがプログラム全体の処理を行うModelをロードし、これをControllerに渡します。
ControllerにはObjectControllerArrayControllerがあり、ObjectControllerは見た目や処理をコントロールしたい1つのオブジェクトを生成したい時に利用し、ArrayControllerはそれらのオブジェクトを配列管理したい時に利用するコントローラーです。

Handlebars.js

Ember.jsではHandlebarsという、テンプレートエンジンを使ってHTMLを書いていきます。
実際にコードをみてみましょう。

var App = Ember.Application.create({
    ready:function(){
        App.get('itemList').set('content', [
               Ember.Object.create({ word:"walk", meaning:"歩く" }),
               Ember.Object.create({ word:"run", meaning:"走る" }),
               Ember.Object.create({ word:"sleep", meaning:"寝る" }),
        ]);
    }
});
App.itemList = Ember.ArrayController.create();
{{#each App.itemList}}
<tr>
   <th>{{word}}</th>
   <th>{{meaning}}</th>
</tr>
{{/each}}

HTML側では、配列の中身をeachブロックでまわして、wordプロパティと、meaningプロパティを
順にテンプレートに表示していきます。
すると、登録した単語と、その意味が表示されましたね。
次回は単語の削除や登録などの設定をしていきたいと思います。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド