Thymeleafがデザイナーとのコラボが進む理由

次のプロジェクトへ向けSpring Framework関連のサンプルを触っていると名前をよく聞くThymeleaf（タイムリーフ）というテンプレートエンジン。まずは公式サイトから。

Thymeleaf

Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

開発フローでnatural templateを使えるようにするというのがゴール。ブラウザで正しく表示でき、静的なプロトタイピングとして動く。

そのnaturalなテンプレートというのがこちら。普通のブラウザで開くとOranges,0.99と表示され、アプリケーションから開くとprod.nameという変数に置き換わる。

<table>
 <thead>
   <tr>
     <th th:text="#{msgs.headers.name}">Name</th>
     <th th:text="#{msgs.headers.price}">Price</th>
   </tr>
 </thead>
 <tbody>
   <tr th:each="prod: ${allProducts}">
     <td th:text="${prod.name}">Oranges</td>
     <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
   </tr>
 </tbody>
</table>

昔から、Javaのプログラマとデザイナが別々に作業できるような目的でテンプレートエンジンが存在していたが、どういうわけか上の例でいうOrangeの箇所に変数名が入るものが多い。これでデザイナーは仕事になるのか不思議だったが、他のテンプレートエンジンは未だにそういった仕様だ。

Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework.

Eclipseを始めとする様々な環境で作業を効率化できるプラグインなども提供される。

試しにSTSというEclipseベースの環境に入れてみたが、Javaプロジェクトじゃないとコンテンツアシスタントは有効にならなかった。VSCodeは公式じゃないが単体ファイルでも使えて、このように補完が効く。

個人で使っている人の話を聞くと、実行速度は遅いらしいのだが用途によっては十分ではないかと思う。