HTMLコーダー向けの最強のテンプレートエンジンを再考する①

背景

弊社、PRODUCTION C-TIMEは、ウェブサイト制作を”工業化”すべく、分業、プロセス化、自動化に積極的に投資をしています。

現在、CMS等の導入や、開発の効率化にあたっては避けては通れないテンプレートエンジンを再設計しようと開発を進めており、その思考の過程についてつづっていきたいと思います。

要件あれこれ

テンプレートエンジンが担当するのは「DOMの生成」です。利用するのは、HTMLコーダーになります。

弊社が想定しているHTMLコーダーは、高校生レベル（現代の高校生は、HTMLを必修で履修しています）で、プログラミングの知識はないが、HTMLは触ったことがある、というレベルの人を想定しています。この初学者レベルの人材を、即戦力として活用できることが理想です。

また、弊社の理念上、最も大切にしたいのは保守性です。ウェブサイトは思った通りに素早く修正できることが最も大切です。そのため、テンプレートHTMLの変更が容易（変更の影響範囲が自明）であることと、生成後のHTMLの可読性が高いことがとても大切です。また、初学者が触っても複雑にならないことはとても大切な要件になります。

もうひとつ重要なのは、テンプレートがHTMLとして成立していることです。よくあるテンプレートエンジンは、HTML外の文法がでてきます。

<div><%= people.names[0] %></div>

これをしてしまうと、ブラウザで開くだけでは状態が確認できなくなり、初学者のハードルになることもありますが、業務上いろいろな不都合がおこってきます。

最後に、自動生成システムとの相性が要件としてあげられます。当社は基本的に、WireframeDefinitionという、ウェブサイトの設計を記述する設定ファイルから、HTMLを自動生成します。HTMLタグ構造を変えることはほとんどなく、属性の変更のみで終わるケースがほとんどです。この製造方式の維持は大切になってきます。

まとめると以下のようになるかと思います。

1. 初学者を即戦力化できること

2. 変更容易性、可読性が高いこと

3. 複雑化しないこと

4. HTMLとして成立していること

5. 自動生成との相性が良いこと

既存技術について

4 の要件が厳しく、既存のオープンソースソフトウェアだとなかなか選択肢は多くありません。

一応、Template Attribute Language (TAL) というコンセプトが存在していて、イメージはこれに近いのですが、2 の観点で、細かい実装の部分で結局かなりのチューニングが必要で、なかなか利用できそうな実装が見当たりません。template-talや、thymeleafjs などが有力な候補としてあったのですが、いずれもActiveに保守されていませんし、採用は見送りました。

方針の決定

もろもろの議論を経た結果、テンプレートエンジンを独自開発することにしました。機能は極めて限定的なものにし「変数をHTMLにバインドするだけ」ということに絞り開発していきます。

1. 表示

   1. テキストの埋め込み

   2. HTMLの埋め込み

2. 繰り返し

3. 表示／非表示の条件指定

4. 部品の再利用

この機能のみです。例えば、文字列の結合であったり、四則演算であったりの機能は開発せず、ほんとうにオブジェクトから値を取り出してバインドするだけ、という機能にしていきます。

次回予告

「全然機能不足だろう」と思われるかたもいると思うのですが、この判断は、C-TIMEで定義した”ウェブサイト制作・運用標準プロセス”との関連しています。この辺りについて次回は書いていこうと思います。