Webエンジニア susumuis の技術ブログ

このブログの内容は個人の見解であり、所属する組織の公式見解ではありません

クライアントサイドHTMLテンプレートエンジンを作ろうとしてみる。

Web mayaa

サーバーサイドテンプレートエンジンはMayaaが好きなんだけど、これからはクライアントサイドの時代ですね！でも、デザイナーさんは、JavaScriptアレルギーな方が多いので、デザイナーにJavaScriptを書かせるのも難しいし、かといって、UIプログラミングは大変なので、出来ればプログラマーの力を借りずにデザイナーさんの力でどんどん開発出来たほうが生産性が高いと思います。その方がフィードバックが早いですから。

そんなわけで、自分をモチベートするために、実験的に作ってみました。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>TemplateSample</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<span id="test">dummy</span>

<script src="jquery-1.4.2.min.js"></script>
<!-- テンプレートエンジン部分（外部JS化） -->
<script>
	TemplateEngine = new function() {
		this.currentNode;
		this.writeText = writeText;
		
		function writeText(value) {
			return new WriteText(value);
		}
		
		function WriteText(value) {
			this.value = value;
			this.run = function() {
				TemplateEngine.currentNode.text(value);
			}
		}
	}
	
	TemplateEngineRunner = new function() {
		this.run = run;

		function run(data) {
			for (var key in data) {
				TemplateEngine.currentNode = $('#' + key);
				data[key].run();
			}
		}
	}
</sctipt>

<!-- テンプレートデータ部分（UIプログラマかデザイナが書く） -->
<script>
	var data = {
		test: TemplateEngine.writeText('hoge')
	}
</script>

<!-- 実行（JSONPのコールバック？） -->
<script>	
	TemplateEngineRunner.run(data);
</script>
</body>
</html>

これを実行すると、クライアントサイドで、dataに書いてある、mayaaで言うところのprocessorみたいなものが解釈されて、画面のHTMLを置換します。ソースが多いですが、ほんとどがフレームワーク部分なので、外部JSにして、デザイナーさんか、UIプログラマーが書くべきなのは以下の部分だけになります。

var data = {
	test: TemplateEngine.writeText('hoge')
}

この、dataは、JSONPかなにかで非同期で取得できると良いかもしれません。
あと、思った以上にデザイナーさんは、JavaScriptが苦手でXMLが好きなので、JSONではなくXMLの方が好まれるのかもしれません。その場合、XMLをサーバーサイドでJSONに変換してあげるのがパフォーマンス的にも良いかもしれません。

まだまだ実験とすら言えないよちよち歩きのコードですが、この構成で、forとか実装できれば、それなりに使えるのではないかと夢見てみたりしてみます。

追記

上記コードをみて、「エッジなエンジニア」な方々は「JavaScriptはオブジェクトを保持するべき！こんな書き方じゃ最初の出力しか賄えないよ」って言われるかもしれないと考えました。しかし、そうではなくてこう考えればいいのです。

「UIは全部dataに帰着する」

dataを返すJSONに、dataと一緒にオブジェクトを返し、dataのプロパティをそれぞれのオブジェクトとリンクすれば良いのではないでしょうか？dataオブジェクトの変更は、随時画面に反映されるようにすれば、HTMLは単なる枠になり、UIはdataオブジェクトで全て操作できる。

プログラマーは、その向こうでオブジェクトなりを操作して、dataを仲介してプログラミングを行えばいいのです。dataというより、controllerですね。

そのこともあって、WriteTextがオブジェクトだったり工夫したつもりです。とはいえ、JavaScriptで壮大なことをやると概して(主にIEで)重くなるので、どこかで落しどころをつけなければいけないでしょう。

続く