• atwiki
  • Closure Compilerを使う!

Closure Compilerを使う!

最終更新:

aias-closurecompiler

- view
管理者のみ編集可

このサイトについて

「Closure Compilerを使う!」は、Googleが提供しているコード圧縮・最適化ツールであるClosure Compilerの使い方を紹介するサイトです。

  • このサイトのコンテンツの大部分は公式サイトチュートリアルの記述をベースに日本語で再構成したものですが、その内容はあくまで管理人の個人的な理解に基づくものです。ご利用は自己責任でお願いします。

Closure Compilerとは

Closure CompilerはGoogleが無償で公開しているJavaScriptコードの圧縮・最適化・難読化ツールです。ライセンスはApache License 2.0です。

JavaScriptのコード圧縮・難読化ツールとしては他にpackerYUI Compressorなどが有名ですが、Closure Compilerも基本的な機能としてそれらと同等のコード圧縮機能を有しています。以下の例は、Closure Compilerがコメント・改行・空白の削除とプライベート変数の短縮によってコードを圧縮している様子を示しています。

  • 圧縮前のコード

    //使われない関数
    function unusedFunction(note) {
      alert(note["text"]);
    }

    //タイトルを表示する
    function displayNoteTitle(note) {
      alert(note["title"]);
    }

    var flowerNote = {};
    flowerNote["title"] = "Flowers";
    displayNoteTitle(flowerNote);

  • 圧縮後のコード

    function unusedFunction(a){alert(a.text)}function displayNoteTitle(a){alert(a.title)}var flowerNote={};flowerNote.title="Flowers";displayNoteTitle(flowerNote);

  • Closure Compilerを正しく動作させるため、処理対象になるコードにはいくつかの記述ルールを守ることが要求されます。詳しくはこちらを参照してください。

高度な圧縮・最適化

Closure Compilerが上記のツールと一線を画しているのは、 ADVANCED_OPTIMIZATIONS レベルという強力なコード圧縮・最適化モードを持っていることです。 ADVANCED_OPTIMIZATIONS レベルではClosure Compilerは従来のツールに比べてより大胆にコードの解釈を行い、不使用コードの削除、関数のインライン展開、グローバルスコープをもつ要素の名前短縮などを行って劇的にコードサイズを縮小し、冗長なコードを整理することで実行速度の向上を図ります。 ADVANCED_OPTIMIZATIONS レベルで先程のコードを圧縮すると、次のようになります。

  • ADVANCED_OPTIMIZATIONSレベルで圧縮されたコード

    var a={};a.title="Flowers";alert(a.title);

    一見すると全く別物のようですが、処理の流れを追っていけば、これが元のコードを限界まで短縮した結果であることが分かるはずです。

他のツールとの圧縮率の比較
Closure Compilerと他のツールとの圧縮率の比較は既に多くの結果がWEB上に公開されており、いずれにおいても ADVANCED_OPTIMIZATIONS レベルが飛び抜けて高い圧縮率を示しています。ただ注意しなければならないのは、 ADVANCED_OPTIMIZATIONS は高い圧縮率を実現する反面、処理対象となるJavaScriptコードに対し厳格な記述ルールを要求するという点です。ルールに従っていないコードは高い確率で正常に動作しなくなるため、コーディングは非常に注意深く行わなければなりません。詳しくはこちらを参照してください。

詳細なエラーの出力

リファレンスをご覧いただくと分かるとおり、Closure Compilerはコンパイル対象のコードを事細かに検証し、その結果をエラーや警告としてレポートしてくれます。この情報はコードチェックやデバッグの大きな助けとなるでしょう。

ユーザーがJsDocと似た形式の注釈コメントをコード内に記述すると、Compilerはその情報を元にデータ型のチェックを行ないます。詳しくはこちらを参照してください。

3種類の提供形態

Closure Compilerは以下の3つの形態で提供されています。一般的に上のものほど簡単に利用できますが、ある程度以上の規模のシステムでは動作上の制約の少ないClosure Compiler Applicationの導入をお薦めします。

  • Closure Compiler Service UI

    Closure Compilerの機能をブラウザベースのWebアプリケーションとして提供します。最も簡単に利用できますが、アップロードできるコードのサイズに制限があるため大規模なシステムでの利用には向いていません。

  • Closure Compiler Service API

    Closure Compilerの機能をWeb-APIとして提供します。ユーザプログラムが直接APIと通信を行うことで、Closure Compilerをアプリケーションやビルドプロセスの一部として利用できるようになります。ただし一度にアップロードできるコードのサイズや一定時間内の通信回数には制限があります。

  • Closure Compiler Application

    Closure Compilerの機能をコマンドラインから実行されるJavaアプリとして提供します。この形態ではコードサイズの制限は存在せず、またCompilerの提供するオプションを全て利用することができます。

Closure Toolsとは

Closure Compilerは単独のツールではなく、Closure Toolsとして総称されるツール群の一部です。Closure Toolsは以下のプログラムから構成されており、これらが連携することでリッチなWebアプリケーション作成のためのフレームワークとして機能することが期待されています。 尚、本サイトではClosure Compiler以外のツールを直接の説明対象としません。Closure Compilerに関する記述の中で必要になった場合のみ、それらについて言及します。

  • Closure Compiler

    JavaScriptコードの圧縮・最適化・難読化ツール。このサイトで紹介するプログラムです。

  • Closure Library

    GUIコンポーネントを含む広汎な機能を提供するJavaScriptライブラリです。Closure Libraryに含まれるコンポーネント群はGmailやGoogle DocsなどGoogleの様々なサービスで実際に使用されており、その意味では非常に実績のある、安定したライブラリと言えるでしょう。
    Closure Libraryは巨大なライブラリであるため、これを利用するアプリケーションがライブラリの全てのコードをクライアントへ配信することは現実的ではありません。そこでリリース時にClosure Compilerを使用し、ライブラリとアプリケーションのコードを圧縮・結合することが標準的な手法とされています。Closure Compilerの機能により、圧縮されたコードにはClosure Libraryの中でアプリケーションが実際に使用している部分だけが含まれることになります。

    Closure Libraryとそれを使ったアプリケーションコードをコンパイルする手順については、Closure Libraryのチュートリアルを参照してください。また日本語の資料としてはこちらのページが非常によくまとまっておりお薦めです。

  • Closure Templates

    Webアプリケーションのためのテンプレートシステムで、Java/JavaScriptで共通のテンプレート言語を利用できるのが特徴です。またフレームワークではなくライブラリなので、他のシステム内で共存させることができます。Closure TemplatesもClosure Libraryと同様にGmailやGoogle Docsなどで使用されている実績があります。

  • Closure Linter

    JavaScriptコードがGoogleの定めるスタイルガイドライン日本語訳)に沿っているかどうかをチェックするツールです。このガイドラインは最終的にClosure Compilerによるコンパイル処理が行われることを前提に設計されており、Compilerが求めるコーディングルールとも深い関連性があります。Closure Linterはエラーを警告するだけでなく、ガイドラインに適合するようにコードを自動的に修正する機能も持っています。

用語について

  • JavaScriptの「コンパイル」とは

    以降の説明ではClosure Compilerが実行する処理を「コンパイル」と呼びます。もちろん、JavaScriptをマシン語に変換するわけではありません。Closure Compilerがコードの検証と最適化において果たす役割から、このように表現されています。

  • シンボルとは

    説明内に頻繁に登場する「シンボル」という単語は、関数、変数、クラス、メソッド、プロパティなどソースコード内でプログラムを構成する要素の総称です。

リンク


目安箱バナー