thymeleafことはじめ

thymeleaf


勝手に擬人化！
さておきやってみるよ！

thymeleafとは

XML/XHTML/HTML5用のJava用テンプレートエンジンです。
freemarkerとかvelocityの類ですね！
公式サイトは以下。
Thymeleaf: java XML/XHTML/HTML5 template engine


特徴はすごいざっくり言うとアプリを通さなくても描画が可能というところです。
なのでコーダーさんとの連携がしやすかったりします。すてきね。
動作的に言うと、アプリを通して描画するとアプリから受け取ったデータをHTMLに描画、アプリを通さないとHTMLに記述した内容をそのまま描画するというかんじです。

Springと連携してみる

とりあえず早速thymeleafを使ってみたいので、今回は公式でサポートされているSpringでWEBアプリを作ってみます。
まずはjarの追加。Mavenを使っている場合はpom.xmlに以下を追加します。

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>2.0.13</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring3</artifactId>
    <version>2.0.13</version>
</dependency>


WEBアプリ作成のためのSpringの設定は割愛します。
今回はViewResolverの設定だけ。

<bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
    <property name="prefix" value="/WEB-INF/templates/" />
    <property name="suffix" value=".html" />
    <property name="characterEncoding" value="UTF-8"/>
    <property name="templateMode" value="HTML5" />
    <property name="cacheable" value="false"/>
</bean>

<bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver" />
</bean>
<bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine" />
    <property name="characterEncoding" value="UTF-8"/>
</bean>

これだけで完了です！かんたん！


freemarkerとかvelocityとか使ってる場合はそこを置き換えるだけってかんじです。
デフォルトだとテンプレートはキャッシュされ、書き換えても即座に反映してくれないので、cacheableをfalseにしておきます。
cacheablePatternでキャッシュするファイルの命名パターン、cacheTTLMsでキャッシュする時間の指定などもできるみたい。


テンプレートからpropertiesファイルを呼び出すことができるので、その場合は以下の設定も書いておきます。

<bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource">
    <property name="basename" value="Messages" />
</bean>

早速かいてみる

適当なControllerを書いてテンプレートのパスを返すようにしておきます。
今回はテンプレートのprefixを「/WEB-INF/templates/」、suffixを「.html」にしたので、「/WEB-INF/templates/」の下に「index.html」というHTMLを作ります。
あとは好きにHTMLを書いて、HTMLタグに以下のようにthymeleafの名前空間を定義してやれば準備完了です！

<html xmlns:th="http://www.thymeleaf.org" lang="ja">

らくちんですね！


次にthymeleafによる変数出力を試してみます。
変数の呼び出し方はfreemarkerと同じく${hoge.piyo}という感じで書けばいいんですが、書く場所がちょっと違います。


例えばhogeというStringの変数があったとき、freemarkerでは以下のように書きます。

<p>${hoge}</p>

それに対して、thymeleafでは以下のように書きます。

<p th:text="${hoge}">ダークフレイムマスター</p>


…！？
最初はなんぞこれ…と思うんですが、最初に書いた通りthymeleafはアプリを通さないとHTMLに書いた内容をそのまま出力します。
なので、アプリを通した場合変数hogeに入っている内容を出力しますが、このHTMLファイルを純粋にブラウザで開くと「ダークフレイムマスター」が出力される形になるわけです…！
もちろんpタグの中身は書かなくても問題ありません。アプリを通さなかったときにタグのみが出力される形になるだけです。


これならコーダーさんが普通にHTMLを書きつつ、そのHTML単体での表示に影響なくエンジニアが変数の埋め込みなどの作業ができますね！
しかもthで始まる属性以外は純粋なHTMLなのでコーダーさんも理解しやすいかもしれません。すてき。


次は基本的な記法をみていきます！


スポンサーリンク