FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

Closure Library事始め

JavaScript

久しぶりに登場のkonoです。

いきなりですが、僕はJavaScriptが嫌いです。

ついでにjQueryもなんとなく嫌いです。

とはいえ、昨今のWeb開発でJavaScriptから逃れるのは難しいです。

なんとか逃れようとしてCoffeeScritだったり、Dartだったり、TypeScriptだったりでJavaScript代替を検討してみましたが、どれも機能的に不十分でJavaScriptとおさらばすることは当分先のようです。

で、なんでJavaScript嫌いなのか自問自答したところ、以下の理由かなと思ってます。

  1. 書き方が色々あって自由すぎる（と言うか弊社SmacでのJavaScriptのコードがカオスすぎる）からコードを理解しにくいことがある。
  2. 特にjQueryな気がしますが、エラーが分かりにくい。なんかjQueryに入り込んだところでエラーになると、どこが原因か追うのが大変です。
    僕のスキルの問題かもしれませんがFirebug使っても、もーどこなんだ！？ってなるんですよね。
  3. 「プロトタイプベースのオブジェクト指向」というのが、いまいち分かりにくいと言うか、苦手です。気持ち悪いんですね。
    特に僕はJava歴が一番長いので、クラスベースオブジェクト指向に慣れたせいか、どうも水が合わないというか、とにかく合わないんですよね。
さて、嫌いな理由が分かったところで、実際にこれを解消するにはどうしようと思ったところ、
  1. 書き方が色々あって〜
    → frameworkで体系化した記述をし、メンテナンス性を向上させられないか？
  2. エラーが分かりにくい
    → TDD採用したらどうだろう？
  3. プロトタイプベースのオブジェクト指向が〜
    → クラスベースのオブジェクト指向に近い形で記述出来ないか？
という結論に。

これを満たしてくれそうなJavaScriptフレームワークを色々検討した結果、ちょっといまさら感がありますがClosure Libraryを使ってみることにしました。

軽く説明ですが、Closure LibraryとはGoogleが提供しているJavaScriptフレームワークでGmailやらGoogle+等のgoogleのサービスで使われているようです。

登場が2009年後半と最近ではありませんが、開発を強力にサポートする各種ツールが揃っていて小規模開発ではもてあましそうですが、ある程度の規模の開発を行うには非常に便利だと思います。

最適化をおこなうCompiler、JavaScriptライブラリのLibrary、動的にUIとスクリプトを生成可能なTemplates、コードチェックを行うLinter、CSS拡張のStylesheetsをClosure Toolsというプロジェクトとして提供しています。

僕がClosure Library使ってみようと思った理由は以下になります。

  1. クラスベースオブジェクト指向なアーキテクチャで体系的にコーディング可能（継承とかも出来ます）
  2. Webアプリケーションの作成に必要な機能をワンパッケージでサポート（非同期通信やイベント、DOM操作、ウィジェット等）
  3. コンパイラで不要なコードを削除したり最適化を行い、パフォーマンス改善が可能
  4. コンパイラでエラーチェックも可能
  5. TDD可能
  6. 国際化サポート（最近、JavaScriptの国際化で悩んだので）
さて、実際に使っていきたいと思うのですが、今回は導入までとして次回から使ってみて分かったことをまとめていきたいと思います。

まず、Closure Libraryの入手ですがzipとgitとsvnで提供されています。

今回はこちらに記載されている通り、gitで取得します。

※ クライアントOSはLinuxとしています。

$ git clone https://code.google.com/p/closure-library/


ディレクトリ・ファイル構成は以下となります。

closure-library[d]
closure[d]
bin[d] ・・・ サポートツール（Pythonスクリプト）
css[d]
inlay[d] ・・・ライブラリに必須のCSSが格納されている？
goog[d] ・・・ 各種ライブラリ、ウィジェット用CSS、ウィジェット用画像ファイルなど
third_party[d] ・・・サードパーティの外部ライブラリ
all_tests.html ・・・ ユニットテストツール
all_test.js ・・・ ユニットテストツール用のJavaScript
※ [d] はディレクトリ

また、googディレクトリにサンプルデモが格納されているdemosディレクトリがあるので、実際に使う時の参考になります。

コード補完やClosure Compilerの実行、Linterでのコードチェック可能なEclipseプラグインも存在するのでそちらも導入しておきます。

Eclipseのインストーラで以下のURLを指定することで導入可能です。

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

※動作にはJSDTが必要です。Eclipse IDE for javaEE DevelopersなどはJSDTが組み込み済みです。

設定方法や使い方はどこかでまとめて説明するとして、とりあえず公式サイトを参照すると分かると思います。

Closure Libraryは実装方法がjQueryなどとは完全に異なる点や、各種ツールが充実しているためツールの使い方を覚える手間はあるかもしれませんが使いこなせばかなり強力に開発をサポートしてくれると信じて、何回かに分けてレポートしていきたいと思います。