SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ライブラリをCDNからロードする

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
CoffeeScriptによるモダンなWebアプリケーション開発連載記事一覧

もっと読む

この記事の著者

飯塚 直(イイヅカ ナオ)

1984年東京都生まれ。 高校時代に趣味でPerlやJavaを使ってプログラミングを始める。 慶応大学湘南藤沢キャンパス卒業後、共同通信社にてニュースサイトの開発などを担当。 その後、面白法人カヤックにてソーシャルゲームの開発などを手がける。 2012年現在、カヤックを退社し個人として活動し...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6537 2012/05/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング