JavaScriptを最適化! Closure Compilerを活用しよう

Closure Compilerとは?

Closure Compilerは、Googleが提供しているJavaScriptの圧縮・難読化ツールだ。JavaScriptの圧縮・難読化だけであれば他にもYUI Compressorなどのツールが存在するが、Closure CompilerはさらにJavaScriptコードそのものに変更を加えることで最適化が可能という特徴がある。

たとえば以下のようなJavaScriptコードがあるとする。

function hello(name) {
  alert('Hello, ' + name);
}
hello('New user');

このコードをClosure Compilerで処理すると、以下のようになる。空白が除去され、変数名が短いものに置き換えられることでサイズが圧縮されている。

function hello(a){alert("Hello, "+a)}hello("New user");

これに対し、Closure CompilerのADVANCEDモードで最適化を行うと以下のようになる。

alert("Hello, New user");

途中経過が一切省かれているが、実行結果は元のコードと同じになる。このように、Closure Compilerを使用することで、不要なコードの除去や、コードのインライン展開などによってサイズだけでなく実行速度まで短縮することができる。

ただし、ADVANCEDモードで最適化を行うには一定のルールに従ってJavaScriptコードを記述しておく必要がある。ルールに従っていないコードを最適化すると動作しなくなることもあるので注意して欲しい。

WebブラウザでClosure Compilerを試してみる

さて、それでは実際にClosure Libraryを使ってみよう。まずはWebブラウザで次のURLにアクセスしてみて欲しい。

http://closure-compiler.appspot.com/

以下のような画面が表示され、Webブラウザ上でClosure Compilerの動作を確認できる。オプションも自由に変更可能なので、実際にClosure CompilerがどのようにJavaScriptコードの圧縮・最適化を行うのかをいろいろと試してみるといいだろう。

EclipseでClosure Compilerを使用するためのプラグイン

Closure Compilerを本格的に使用するのであればWebブラウザでは何かと不便だ。Closure CompilerはWeb APIとして呼び出すことができたり、jarファイルとして提供されているものを使用してコマンドラインから実行することも可能だが、プラグインを使用することでEclipse上でClosure Compilerを実行することができる。

また、そのほかにもClosure Libraryに対応したコード補完やClosure Lintを使用したエラーチェックが可能だ。

プラグインは以下の更新サイトからインストールすることができる。

http://www.normalesup.org/~simonet/soft/ow/update/

動作にはJavaScript開発環境であるJSDT (JavaScript Development Tools)が必要となる。Eclipse IDE for JavaEE DevelopersなどJSDTが予め含まれているパッケージを使用するといいだろう。また、Eclipse上でClosure Compilerを実行するため、Eclipseのヒープサイズを多めに取っておく必要があるので注意して欲しい。

プラグインのインストール後には、EclipseのプリファレンスページでClosure Libraryをインストールしたパスを指定したり、Closure LintやClosure Compilerの起動行構成を作成する必要があるなど事前の設定がやや煩雑だが、このプラグインはまだベータ版であり、今後これらの設定を自動化するなどの改善が予定されているようだ。

まとめ

冒頭でも述べたようにClosure CompilerはJavaScriptコードの圧縮だけでなく最適化が可能であるという点が大きな特徴だが、最近では最適化されたJavaScriptコードを出力するJSXのような新言語も登場してきている。JavaScriptはWeb開発だけでなくスマートフォンアプリの開発などその適用領域をさらに広げつつある。今後もJavaScriptの最適化は大きなテーマとなるのではないだろうか。