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のコンパイルを簡単に自動化できる。

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を利用すれば自動ビルドさせることもできるので、それほど手間ではなくなりました。

おまけ

EclipseJavaScript Editorは、Closure LibraryのJavaScriptの開発方法と相性がいいですよね。例えば、下記のようにJSDocに@constructorと付けると、

/**
 * @constructor
 */
sample.HelloWorld = function(){
};

Eclipseがsample.HelloWorldをクラスとして認識するようになり、コード補完も有効になる。Closure Tools × Eclipseはなかなか便利です。