実践入門 Ember.js

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

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

前回Ember Dataを使って永続化されたデータを扱う方法を解説しました。今回は,Ember.jsを使った開発を支援する開発ツールを解説します。

今回紹介するEmber CLINode.js製のコマンドラインツールで,次の機能を提供しています。

  • コードの生成
  • JavaScriptのコンパイル
  • テストのサポート
  • デプロイ用のビルド

前準備

さっそく,Ember CLIをインストールして動かしてみましょう。

インストール

まずは前準備としてNode.jsとnpmをインストールします。Node.jsについては公式サイトを参考にインストールしてください。

次はNode.jsのパッケージマネージャであるnpmです。npmはNode.jsに標準添付されていますが,Ember CLIでは最新のnpmを使うことを推奨しているのでアップデートします。

$ npm install -g npm

では,いよいよEmber CLIをインストールします。

$ npm install -g ember-cli

インストールが完了したら,emberコマンドが使えるようになります。本稿の対象バージョンは次の通りです。

$ ember -v
version: 0.2.0
node: 0.12.0
npm: 2.7.1

ここで,Mac OSもしくはLinuxの場合は以下のようなメッセージが表示されることがあります。

Could not find watchman, falling back to NodeWatcher for file system events

このままでも特に動作に問題はありませんが,Ember CLIはファイルの更新検知にwatchmanを推奨しているので,これをインストールするとメッセージを非表示にできます。

以上でインストールが完了しました。ここからはEmber CLIを実際に使ってみましょう。

コードの生成

Ember CLIにはコードを自動生成する機能があり,アプリケーションのひな形を作成するためのコマンドが用意されています。ここではexample-appという名前でアプリケーションを作成することにします。

$ ember new example-app

生成されたファイルとディレクトリのうち特に重要な以下のものについて解説します。

app Ember.jsアプリケーションのクラスとテンプレートを配置するためのディレクトリです。ディレクトリ名,ファイル名には規則があります。これについては後述します。
bower.json Bower用の依存ライブラリのバージョン管理ファイルです。JavaScriptやCSSなど,フロントエンド用のライブラリを管理します。
config/environment.js アプリケーションの設定を記述するファイルです。
dist ビルドされたファイルが配置されるディレクトリです。詳しには後述します。
package.json Node.jsで利用するライブラリのバージョン管理ファイルです。主に,ビルドに関するライブラリとEmber.jsのアドオンのバージョンを記述します。
public ビルドが必要ない配布用のファイルを配置するためのディレクトリです。このディレクトリに置かれたファイルは,そのままdistディレクトリにコピーされます。
tests テストファイルを配置するためのディレクトリです。

生成されたファイルについてひと通りおさえたので,次はアプリケーションをブラウザで表示してみましょう。Ember CLIには動作検証を行うための開発用サーバを起動するコマンドが用意されています。

$ ember server

このコマンドで開発用のサーバが起動します。では,ブラウザで http://localhost:4200にアクセスしてみましょう。

次のメッセージが表示されるのが確認できたでしょうか?

Welcome to Ember.js

これでEmber CLIが生成したアプリケーションのひな形の動作を確認できたので,他の自動生成の機能を試してみましょう。

次はテンプレートを作成します。Ember CLIの自動生成コマンドember generateを利用してindexテンプレートを作成します。

$ ember generate template index

このコマンドを実行すると,app/templates/index.hbsというファイルが生成されます。

これまでの記事では,scriptタグを利用して以下のようにテンプレートを定義してきました。

<script type="text/x-handlebars" date-template-name="index">
</script>

ただこの方法だと複数のテンプレートを定義する場合,それらすべてをひとつにHTMLに埋め込む必要がありました。そのためアプリケーションを拡張していくとテンプレートを管理するのが困難になります。

一方Ember CLIでは,テンプレートはひとつひとつ独立したファイルとして管理されます。date-templateに対応するテンプレート名がファイル名になり,app/templatesディレクトリに保管されます※1)⁠

※1
階層化したテンプレートの場合はディレクトリを作成します。例えばposts/indexに対応するテンプレートは,app/templates/posts/index.hbsです。

では,このapp/templates/index.hbsを編集して表示を確認してみましょう。次の内容をテンプレートに記述してください。

Ember CLI example

そしてブラウザでアプリケーションにアクセスすると,次のように表示されるのが確認できます。

Welcome to Ember.js
Ember CLI example

では続いてコントローラを作成してみましょう。

$ ember generate controller index

このコマンドを実行すると,次のファイルが生成されます。

app/controllers/index.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

ここで初めて登場したimport/exportについて解説します。

著者プロフィール

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

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

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

コメント

コメントの記入