デザイナーとプログラマのわがままに応えて、テンプレートエンジンから生成されたHTMLファイルを元の部品ファイルに分割するツールを作る

Webアプリを開発する際、

最近の多くのテンプレートエンジンはHTMLをレイアウトや部品に分割して作成し、

それをextendしたりincludeしたりして1つのHTMLとして出力できるようになっている。

部品化することで、ヘッダーとかメニューとかフッターとか、

複数のページで共通して表示する要素を変更する際に、

1箇所だけ変更すれば済むようになるわけだ。

しかし部品化することで発生するデメリットもあって、

Webアプリとして実行してみないと完成版のHTMLが確認できない、

外部のデザイナーさんとデザインをやりとりしづらい、

といった問題が発生する。

JavaのSpring Frameworkなんかで利用されているThymeleafなんかは、

上記の問題を解決するために完成版のHTMLとしてWebアプリのテンプレートを

作成できるようになっているようなのだけど、

今度は逆に部品化できないことで共通部分の変更が面倒になる。

Thymeleaf

そこをなんとかしてくれ、というデザイナーとプログラマ双方のわがままに応えて、

結合されたHTMLをわざわざ部品に戻してくれる仕組みを考えました。

結合されたファイルを元に戻す仕組み

この問題を解決する1つの方法として、

テンプレートの結合だけでなく、分割できるツールを用意すれば良いのではないか、

と考えて、試しに作ってみた。

テンプレートエンジンはECTを使用した。

ectjs.com

仕組みとしては、ファイルの結合を行う

extend機能（あらかじめ作成したレイアウトファイルにコンテンツを埋め込む機能）や

include機能（複数の画面で利用する部品をコンテンツに埋め込む機能）

を使用している位置にHTMLコメントで分割用の定義を書いておく。

例えば、includeされるファイルなら下記のような感じ。

pager.html.ect

<!-- tpl:include="parts/pager" --> 
<div>ページャーのHTML...</div>
<!-- /tpl:include="parts/pager" --> 

このように書いておくと、

結合されたHTMLにもHTMLコメントが残るので、

その要素がどのような部品から作成されたのかが分かる。

そして、

別途HTMLファイルを解析してこのコメントを元にファイルを分割するツールを作成する。

HTMLの解析はどの方法が最適か迷ったのだけど、

一番簡単そうな正規表現で置換する方法を採用した。

ツールとしては、

上記のコメント入りHTMLが入ったフォルダのパスと、

部品化されたテンプレートを出力するフォルダのパスを指定して

コマンドを実行すれば一括で部品に戻してくれるようにした。

github.com

ECTはNode.js用のテンプレートエンジンなので、

Javascriptで作成するのが最適なのだけど、

ついClojureで作成してしまった。

誰にもメリットのない組み合わせで作ってしまったかもしれない。

まあ処理内容はファイルの中身に正規表現置換をかけているだけなので、

Javascript版を作るのもそんなに難しくないと思う。

正規表現クックブック