若くない何かの悩み

何かをdisっているときは、たいていツンデレですので大目に見てやってください。

googkit を使ったカンタン Closure Library 開発のすすめ

この記事では、JavaScript - Client Side - Advent Calendar 2013の23日目の記事です。


さて、googkit を使ってカンタンに Closure Library での開発をはじめる方法を紹介します。

googkit は Closure Library を使った開発を手助けするツールです。私が前に開発した Webアプリケーション「piine! 」も Closure Library + googkit を使っています。

Screenshot of piine

では、本題の googkit の説明に移る前に Closure Library の説明から始めましょう。

すばらしき Closure Library

そもそも Closure Library ってばすごいライブラリなんですよ!!(白目

  • 安心の Google
  • パリッとキマったクラス指向

    var Child = function() {
      goog.base(this);
    };
    goog.inherits(Child, Parent);
    
  • おまかせ依存管理

    goog.require('foo.bar');
    
    foo.bar.FooBar(); // これだけで foo.bar モジュールが利用できる!
    
  • 質・量ともに類を見ないライブラリ群(30MBくらいある!)

    // 配列処理はもちろん
    goog.require('goog.array');
    goog.array.forEach(arr,
        function(elem, index) { console.log(elem, index);});
    
    // ときどき欲しくなるこんなのも
    goog.require('goog.crypt.base64');
    var base64str = goog.crypt.base64.encodeString('Hello, World!');
    
  • Closure Compilerとの相性バツグン

    Closure Compiler の機能をフルに活用できるのは Closure Library だけ!

なんかAltJSよりもすごい部分があるような……?
ま、まさか!

AltJSなんていらなかったんや…!

でも…Closure Libraryって…

初期設定がとっても面倒くさいんです…

なに?googkitを使えばたった2コマンドでできるんだって!?

googkit を使えばたった2つのコマンドだけで、Closure Library を利用できるんですよ!Closure Library の導入に挫折したアナタ、興味合ったけど触ったことがないアナタ、この機会に googkit でチャレンジしてみましょう!

googkit のインスト—ル

googkit は pip があればカンタンにインストールできます:

pip install googkit

pip がない場合は、アーカイブを展開して /usr/local/ あたりの直下に配置してパスを通せばOKです。

開発してみる

  1. 開発で使うディレクトリを作成

    $ mkdir hoge
    $ cd hoge
    
  2. googkit init を実行

    $ googkit init
    
    Initialized googkit project in hoge
    
  3. googkit setup を実行(少し時間がかかります)

    $ googkit setup
    
    Downloading Closure Library...
    Done.
    Downloading Closure Compiler...
    Done.
    Updated dependencies.
    

    このタイミングで Closure Library と Closure Compiler がセットアップされます。

  4. 動作確認

    ブラウザで hoge/development/index.html を開いてください。 こんな感じの画面が表示されてればOKです!

    Screenshot

  5. 開発をはじめる

    あなたの Closure Library ライフがはじまります。

終わりに

私は個人的に AltJS よりも Closure Library のほうがよいと思っています。 この際、AltJS から Closure Library に乗り換えてみてはどうでしょう!

蛇足:Closure Library 英語でつらい

リファレンスが英語で辛い…という方むけに、closure-library-jpで日本語化を進めています。ぜひご利用くださいませ。