CoffeeScriptベストプラクティス集
ブラウザ向けJavaScript編（3）

CoffeeScriptによるモダンなWebアプリケーション開発 第9回

　最近話題の新言語『CoffeeScript』をとりあげた連載「CoffeeScriptによるモダンなWebアプリケーション開発」。今回からはベストプラクティス編として、CoffeeScriptでブラウザ向けJavaScriptを開発する際によく使われる実用的な開発手法を4回に分けて紹介します。CoffeeScriptの歴史や概要については過去の連載も参照ください。

JavaScriptを最適化する

　CoffeeScriptをJavaScriptにコンパイルしたら、本番環境のサーバに配置する前に最適化を行っておくとよいでしょう。ここでいう最適化とは、空白などの不要な部分を取り除いたり、変数名を短い名前に置き換えてファイルサイズを減らす処理をいいます。最適化をすると、ソースコードの挙動を全く変えずにファイルサイズを減らすことができます。

　UglifyJS（BSDライセンス）という最適化ツールは、YUI Compressor（Yahoo!が開発したJavaScript最適化ツール）やGoogle Closure Compiler（Googleが開発したJavaScript最適化ツール）などの他の最適化ツールと比べて実行速度と圧縮効率の面で非常にバランスがよく取れています。YUI Compressorと比べた場合、UglifyJSの方が圧縮効率は大幅に良く、最適化処理の実行速度は若干遅くなります。Google Closure Compilerと比べた場合、UglifyJSの方が実行速度は大幅に速く、圧縮効率はほとんど一緒か若干大きくなる程度です。また、Node.jsで手軽に実行できるのもUglifyJSの大きな特徴です。

［リスト1］最適化前のJavaScript

(function() {
  var base, result, times;
  base = 10;
  times = 5;
  result = base * times;
  console.log(result);
}).call(this);

［リスト2］UglifyJSで最適化したJavaScript

(function(){var a,b,c;a=10,c=5,b=a*c,console.log(b)}).call(this);

UglifyJSのインストール

　UglifyJSは開発環境にインストールします。実行にはNode.jsが必要です。

$ npm install -g uglify-js

JavaScriptファイルを最適化する

　UNIXシェルを基準にして使い方を解説します。最適化を実行するには、uglifyjsコマンドの引数に対象となるjsファイルを指定します。一度に1ファイルしか指定できません。

$ uglifyjs 入力ファイル名 > 出力ファイル名

　複数のファイルを結合して最適化したい場合は、catコマンドを併用します。次のコマンドは、a.jsとb.jsというファイルを結合してからuglifyjsで最適化し、output.jsというファイルに出力します。

$ cat a.js b.js | uglifyjs > output.js

JavaScriptファイルの結合

　JavaScriptを本番環境に配置する場合、高速化のためすべてのソースファイルを1つに結合する手法があります。ソースファイルを1つずつ<script>で読み込むとファイルの数だけクライアントからサーバにリクエストが行われますが、1つのファイルにまとめておけば1回の通信で済みます。

　例えば、classA.jsとclassB.jsという2つのソースファイルがあるとき、それぞれを<script>で読み込むことも可能ですが、すべてのページでclassA.jsとclassB.jsを同時に使用する場合はこれらを1つのファイルにまとめた方が通信回数を減らせるため効率的です。しかし、例えばアクセスの多いトップページでは軽量なclassC.jsしか使用せず、アクセスの少ない別のページではclassC.jsとサイズの大きいclassD.jsを併用するといった場合、classC.jsとclassD.jsは分割して読み込むようにした方がアクセスの多いトップページを軽く保つことができます。

　ファイルを結合する場合は、サーバサイドのビルド段階で自動的に行うようにしておくとよいでしょう。Rails 3.1ではアセットパイプラインによって自動的に結合が行われるため自前で結合する必要はありません。手動でファイルを結合する際は、以下のようなコマンドを実行します。

　まずjs/ディレクトリ以下の*.jsファイルすべてを結合してapplication.jsを作成します。ライブラリなど先に読み込む必要があるものは、個別にファイルの先頭に追加します。

$ find js -name '*.js' | xargs cat > application.js

　これをUglifyJSで最適化して完成です。ここで作成したファイルをHTMLで読み込みます。

$ uglifyjs application.js > application.min.js

　リダイレクトせずにapplication.jsを上書きするには--overwriteオプションを付けます。

$ uglifyjs --overwrite application.js

　また、一連の処理をパイプで繋ぐと一時ファイルを作らずにすべての処理を行うことができます。

$ find js -name '*.js' | xargs cat | uglifyjs > application.js