実践入門 Ember.js

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

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

デプロイ用のビルド

アプリケーションの開発とテストができるようになったので,次はいよいよデプロイを踏まえたビルドを見ていきましょう。

Ember CLIはソースコードを本番環境へのデプロイするためにビルドする機能があります。ビルドによってアプリケーションのために必要なファイルはdistディレクトリに配置されるので,あとはそのファイルを本番環境にアップロードするとデプロイが完了です。

ソースコードのビルド

ビルドは次のコマンドで実行します。

$ ember build --environment=production

dist/assetsディレクトリには次のファイルが生成されました。

$ ls dist/assets
example-app-1a34084e096955fac1190e92a12cbe92.js  vendor-8ddd9c2582308c7a3a851e4d8333d4f0.js
example-app-d41d8cd98f00b204e9800998ecf8427e.css vendor-d41d8cd98f00b204e9800998ecf8427e.css

ここで何が起こっているのかを見ていきましょう。

コンパイル

ソースコードがコンパイルされ,dist/assetsに配置されます。ここ最近では,JavaScript/CSSを直接記述せずCoffeeScriptSassでソースコードを記述するプロジェクトも増えてきているのではないでしょうか。Ember CLIはこのような言語のコンパイルにも対応しています。また,先ほど解説したmodule syntaxのコンパイルもこのタイミングで行われます。

結合

app以下のファイルはアプリケーション名example-app⁠,app以外から読み込んでいるファイルはvendorという名前のファイルに結合されます。これは,ソースコードをひとつひとつ配布するよりも,一つのファイルに結合した方がHTTPリクエストのオーバヘッドを節約できるためです※6⁠。

※6
これはHTTP/2によって解決されようとしています。
圧縮

配布するファイルは極力サイズを小さくすることでファイル転送にかかるコストを下げられます。Ember CLIはファイルから空白文字や改行コードの削除,さらにはソースコードの最適化を行って極力ファイルサイズを小さくします。また,設定によっては画像ファイルについても圧縮を行えます。

ハッシュ値の付与

生成されたファイルにはファイルの内容のmd5チェックサムが付与されます。これはファイルをWebサーバに配置した際にキャッシュを有効にすることを意図したものです。もしファイルの中身に変更があればハッシュ値付きのファイル名も変更されます。そうすることで,意図しないキャッシュが効いてしまうことを防いでいます。もし不要である場合はオプションで無効にできます※7⁠。また,CSSの中から参照している画像のパスもハッシュ値が付与されたものに書き換えられます。

※7
ハッシュ値の付与はbroccoli-asset-revの機能です。その他のオプションについては公式のドキュメントを参照してください。

このビルドの仕組みはBroccoliというフロントエンドのためのビルドツールを利用しています。ビルドの設定を変更したい場合,Broccoli.jsに設定を記述します。

以上,ビルドについての解説でした。

最後に

今回は開発ツールであるEmer CLIを解説しました。実は今回で「実践入門 Ember.js」は最終回です。

今後もEmber.jsは2.0,そしてさらにその先に向けて進化を続けていくはずです。その進化とともに,みなさんもEmber.jsを使った開発を楽しんでいただければ幸いです。

それでは短い間でしたがお付き合いいただきありがとうございました。

著者プロフィール

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

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

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