Ember CLIについてしゃべってきた

2014-07-30にEmber.JS Tokyo MeetupでEmber CLIについてしゃべってきました。簡単なEmber CLIについての説明と、今のプロジェクトでなぜ使おうと思ったのかその理由とを説明しました。

このスライドの流れに沿ってしゃべった内容を書き留めておきます。

Ember CLIとは

公式サイトには「大規模ウェブアプリ用CLIです」とキャッチコピーが書いてありますが、正直ナンのことやらです。以下でかみくだいて紹介します。

使い方

実行に必要なもの

  • node v0.10.5以上 + npm 1.4.6以上
  • phantomjs
    npm install -g phantomjs
  • bower
    npm install -g bower

phantomはインテグレーションテスト用、bowerは言わずもがな、ブラウザコンポネントの管理に使われます。

インストール

npmに登録されてるので

$ npm instal -g ember-cli

これだけです。非常にお手軽。

コマンド

おもなコマンドをざっと紹介。

プロジェクトの生成

$ ember new <app-name>

に指定したディレクトリが作られ、以下にEmber.JSプロジェクトが生成されます。
また、生成後、 npm installbower install も自動的に実行されます。

フォルダ構成

めんどくさいので公式サイトか、スライドの8,9ページを参照してください…

Railsっぽい感じのレイアウトになってます。

オブジェクトの生成

$ ember generate <generator-name> <options...>

Route, Controller, Modelなど、Ember.JSのオブジェクトをひな形をベースに生成するコマンドです。この生成に使うひな形はEmber CLIではblueprintsと呼ばれます。Emberアプリ本体のtemplateとの呼び分けのためですね。

ローカルサーバ + livereload

$ ember serve

このコマンドで実行マシンのローカルにサーバを立ち上げてデフォルトだと、 http://0.0.0.0:4200 で作成中のウェブアプリを実行できます。ライブリロードも同時に立ち上がるので開発中はとりあえず実行しておくコマンドです。

ちなみに、ここで立ち上がるサーバはnodeのexpressです。自分でミドルウェアを書けば挙動をカスタマイズできます。

api-stub

このローカルサーバを使ってapi-stubが作れます。しかも、ember generateコマンドでも作れるようになっていてこれまたお手軽です。

$ ember generate api-stub path/to/route

これでapi-stubのひな形ができます。このファイルに関してはライブリロードの監視の外なので ember serve を実行し直す必要があります。

これを使うと実際に通信しながらapiのテストができるのでバックエンドいらずで開発を進められて大変便利です。

テストとビルド

テストは

$ ember test

でQunitが実行されます。

ビルドは

$ ember build

です。

アセットの処理

ビルド時にJSとかCSSとか画像とかのアセットがいい感じにまとまるのですが、そのルールは14ページ目を見てください。

アセットのインポートにつて

メインのJS, CSS以外のアセットの読み込みは、 public/assets 以下に静的に配置するか、
Brocfile.jsapp.import('path/to/assets'); を記述します。

コマンドでだいたいできる

と、ここまで見たように、ウェブアプリのフロントを作るときにだいたい欲しいものが揃ってると思います。最近のフロントエンド開発だと、いちいち自分でgruntとかgulpのタスク書いて、apiスタブのサーバ用意して…とか結構めんどくさいのですごく便利です。

頑張ればyeomanでもおそらく作れると思うんですが、公式に近い形でこういうものが提供されているというのが、ものぐさな私にはすごく響きました。

それ以上のきっかけ

しかしながら、Ember CLIを本気で使おうと決心したのは上述のコマンドの便利さもさることながら、Ember CLIの提供するES6 Module構文と、ファイル名による命名規則でした。

ES6 Module

Ember CLIはビルドの際にES6 Module Transpilerを利用しています。そのため、Ember CLIを利用する際のアプリケーションのソースコードはすべて、ES6のモジュール構文で書くことができます。最終的に出力されるJSはAMD形式に書き換えられるので、現行のブラウザでも問題なく実行できます。

ファイル名による命名規則

Ember.JSはグローバル変数による命名規則がありますが、Ember CLIではモジュール構文を活用してそれをファイル名によって解決する命名規則を取っています。

Ember.JSでこうなるものが、

var PostCommentsIndexController = App.Ember.ArrayController.extend({
  model: function () {};
});

Ember CLIではこのような中身にしつつ、

import Ember from "ember";

export default Ember.ArrayController.extend({
  model: function () {};
});

app/controllers/post/comments/index.js に保存します。

「どういうグローバル変数名にするか」、から、「どこに保存するか」の命名規則になっているのです。

いちいちディレクトリ掘るのめんどくさそうに思いますが、そこはEmber CLI の本分を発揮して、
ember generate controller post/comment/index だけで良いのですごく楽です。

メリット

このモジュールとファイル名の命名規則によるメリットですが、おもに以下かと思います。

  • グローバル変数がいらない
  • 長い変数名付けなくていい
  • ファイル中に変数名が存在しないからリファクタが楽(フォルダ移動で終わり)
  • 命名規則に従うと勝手にフォルダ構造が綺麗に保たれる

これらによって、開発中の細かいストレスがすごく楽になると感じます。
これこそが今回Ember CLIを選んだ理由になります。

Ember CLIはただのCLIじゃない!

Ember CLI というプロダクト名なので、名前を聞くと「ただの便利コマンドでしょ?」、と思ってしまいがちですが、ただのCLI以上の働きをしてくれるツールです。大げさに「Ember.jsのフレームワークとしての完成度をより高めてくれるツール」くらいのことを言っていいんじゃないかとおもってます。

もし興味が出てきたら、是非チャレンジしてみてください。

注意!

書いている時点で、バージョン 0.0.40 の目下開発中なので、自己責任でのご利用を…