Closure TemplateがJavaScriptのテンプレートエンジンでいい気がしてきた
Closure TemplateをEclipseで簡単に自動ビルドさせる方法を見つけた。Eclipse上でJavaScriptの開発を行うなら、これが最高のJavaScriptのテンプレートな気がしてきた。
JavaScriptを生成する
Closure Templateを使うとテンプレートからJavaScriptが生成されるので、JavaScriptが読めれば、動作を確認することができる。
例えば、
{namespace sample} /** * Sample Template * @param name */ {template .helloWorld} <div> {$name} Hello World. </div> {/template}
をコンパイルすると以下のJavaScriptが生成される。
goog.provide('sample'); goog.require('soy'); goog.require('soy.StringBuilder'); sample.helloWorld = function(opt_data, opt_sb) { var output = opt_sb || new soy.StringBuilder(); output.append('<div>', soy.$$escapeHtml(opt_data.name), ' Hello World.</div>'); return opt_sb ? '' : output.toString(); };
JavaScriptが生成されるので処理の流れが掴みやすく理解しやすい。
手間なのはコンパイルの実行
Closure TemplateはJavaScriptが生成されるので、JSRender等のJavaScriptテンプレートに比べると、コンパイルの実行に一手間かかるので、コーディングのリズムが崩れる。「ファイル保存(ctlr-s)」 →「 更新(F5)」というリズムでの開発がいい。
Eclipse のAnt BuilderでClosure Templateのコンパイルを自動化する
Ecilpseにはファイル保存のイベントをフックして、Antを実行することができるAnt Builderという仕組みがある。これを使うとClosure Templateのコンパイルを簡単に自動化できる。
- 手順1. build.xmlを用意する
Ant Builderを利用するためには、はじめにbuild.xmlを用意する。ポイントは、パラメータ化したい変数をプロパティとしておくこと。下記のbuild.xmlでは、targetをパラメータ化している。
<?xml version="1.0"?> <project basedir="." default="soy_to_javascript"> <target name="sample"> <property name="target" value="sample.html" /> <antcall target="_create_soy" /> </target> <target name="soy_to_javascript"> <java jar="SoyToJsSrcCompiler.jar" fork="true"> <arg value="--outputPathFormat" /> <arg value="script/${target}.js" /> <arg value="--shouldProvideRequireSoyNamespaces" /> <arg value="soy/${target}" /> </java> </target> </project>
- 手順2. Ant Builderを登録する
Ant Builderを登録するには、Projectを選択し、メニューの「project」を選択し「properties」をクリックし、プロジェクトのプロパティを表示し、Buildersを選択する。
Buildersの「New」ボタンをクリックし、「Ant Builder」を選択する。
そして、Edit Configurationのダイアログが開いたら、「Buildfile」に手順1で作成したbuild.xmlを、「Arguments」に「-Dtarget=${resource_name}」と設定する。AntのJVMの起動オプションで-Dでシステムプロパティを設定すると、${target}のフォーマットでプロパティを参照することができる仕組みを利用する。
「Targets」タブを選択し、「Manual Build」のSetTargetをクリックする。
ここで、ファイル保存時に実行するAnt Taskを指定することができる。targetがパラメータ化されているAnt Taskを指定する。
次に「Build Options」のタブを選択し、「Specific Resources」をクリックする。
「Specific Resources」でコンパイル対象のリソースを選択することができるので、Closure Templateのファイルを格納しているディレクトリを選択する。
これで設定完了。
- 動作確認
soyディレクトリ以下にあるファイルを編集し、保存すると自動的にAnt Builderが動き、Closure Templeteのファイルがコンパイルされる。
まとめ
Closure Templateを使うと生成されるJavaScriptを確認することができるので、テンプレートの挙動を簡単に確認することができます。また、デバッグが簡単です。それにClosure Toolsのファミリーなので、Closure Compilerとも連携しており、ADVANCED_OPTIMIZATIONSでも利用可能です(JSRenderはADVANCED_OPTIMIZATIONSにすると、動かなくなります)。
Closure Templateの欠点はコンパイルの手間でしたが、Eclipseを利用すれば自動ビルドさせることもできるので、それほど手間ではなくなりました。
おまけ
EclipseのJavaScript Editorは、Closure LibraryのJavaScriptの開発方法と相性がいいですよね。例えば、下記のようにJSDocに@constructorと付けると、
/** * @constructor */ sample.HelloWorld = function(){ };
Eclipseがsample.HelloWorldをクラスとして認識するようになり、コード補完も有効になる。Closure Tools × Eclipseはなかなか便利です。