実践入門 Ember.js

第8回 開発ツール(Ember CLI)

この記事を読むのに必要な時間:およそ 6 分

JavaScriptのコンパイル

この記述は,次世代のECMAScript(JavaScriptの仕様)として仕様が策定されているES6 module syntaxです。import文で外部のモジュールを取得し,export文でAPIを外部に公開します。とは言っても,現在のブラウザはこの構文をサポートしていないため,Ember CLIはこの構文をAMD形式に変換して現在のブラウザで動作するようにコンパイルします※2⁠。

※2
Ember CLIは,BabelというJavaScriptコンパイラを使ってモジュールをコンパイルします。このBabelは数多くのES6の機能のコンパイルをサポートしており,ES6 module syntaxもそのひとつです。

Ember CLIはモジュールのファイル名を手がかりに必要なクラスを探索します。この仕組みについては後ほど詳しく解説します。

まずはほかのクラスも生成しつつ全体の流れを掴んでみましょう。次はRouteです。

$ ember generate route index

Routeを生成する際はあわせてtemplateも生成されます。app/templates/index.hbsを上書きするか確認されるので,yをタイプしてください。

[?] Overwrite app/templates/index.hbs? Yes, overwrite

生成したファイルを次のように変更してください。

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return {
      name: 'Tomster'
    };
  }
});

app/controllers/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  hello: function() {
    return 'Hello, ' + this.get('model.name');
  }.property('model.name')
});

app/templates/index.hbs

{{hello}}!

ここまで準備ができたら,ブラウザからアクセスしてみましょう。次のように表示されたでしょうか※3⁠。

※3
余談ですが,このTomsterというのはEmber.jsのマスコットキャラクターの名前です。開発メンバーであるTomdale氏にちなんで命名されたという説がありますが,その真偽は定かではありません。
Welcome to Ember.js

Hello, Tomster!

ここまでの動きから,Ember.jsがアプリケーションの命名規約が,これまで取り扱ってきたクラス名ではなくファイル名を元にしていることが確認できました※4⁠。

※4
この名前解決はEmber Resolverによってサポートされています。

module syntaxのメリット

モジュールをコンパイルするという仕組みは一見複雑に見えるかもしれませんが,実は大きなメリットがあります。

1. クラスがアプリケーション名に依存しなくなる

App.IndexRouteだとAppというアプリケーションのインスタンスが存在するまでクラスを定義できません。そして,アプリケーション名が異なる別のアプリケーションで再利用できません。

2. クラスの定義順序を気にしなくてよくなる

あるクラスを継承して別のクラスを定義したい場合,これまでの仕組みだと必ず親クラスの定義が先に記述される必要がありました。しかしローダを利用した仕組みではimportによってクラスが必要になった際に読み込まれるため,クラスがファイルのどの部分で定義されているかというのは重要ではなくなります。

そのため,自分で作成したクラスをライブラリとして再利用したり,サードパティのライブラリを取得することも容易になります。Ember CLIではEmber Addonsというアドオン機構があり,コマンドから必要なアドオンをインストールできます。

$ ember install:addon <アドオン名>

ここまでで,今まで行ってきた開発をEmber CLIの仕組みの上で行えるようになりました。次は開発したアプリケーションをテストする方法を見ていきましょう。

著者プロフィール

佐藤竜之介(さとうりゅうのすけ)

株式会社えにしテック所属。JavaScriptとRubyが好きなウェブ系プログラマ。オープンソースソフトウェアに強い関心がありEmber.jsにも数多くのパッチを送っている。

ブログ:http://tricknotes.hateblo.jp/
Twitter:@tricknotes