Spring MVCから使うテンプレートエンジンをまとめてみた。

テンプレートエンジンについては未調査だったので調べてみた。Spring Bootが対応しているテンプレートエンジンは以下のとおり。

以下サンプルも交えるが調べただけで動かして試したわけじゃないのであくまで雰囲気メモで。

JSP

素のJSPを使うという選択肢は一番シンプルだが、Spring Bootとの相性が悪いような情報がいくつかあるので(なぜなのかは未調査)やめておこう。メリットなさそうだし。

FreeMarker

  • 素のHTMLの地の部分に${hoge}と記述するタイプ。わかりやすい。
  • が制御は<#hoge>タグというのを使うらしいのでここが素のHTMLじゃないので、ブラウザやIDE、エディタなどの挙動はどうなのか。
  • Velocityとソックリ。
<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
  <link rel="stylesheet" href="/css/common.css">
</head>
<body>
  <div class="innner">
    <div class="outer">
      <#if hoge??>
        <div>ハローワールド:${hoge}</div>
      </#if>
    </div>
  </div>
</body>
</html>

Groovy

  • Spring Bootで使えるテンプレートエンジン、でググると良くGroovyが出てくるので何のことかと思ったら、Groovyの中にある「Markup Template Engine」を使用する、という意味だと思われる。ちなみにBootというより Spring MVC 自体がこれを使えるということらしい。
  • groovyの関数でDOMを記述する仕組み。調べた感じこういう書き方?(動くかどうか知らない)
yieldUnescaped '<!DOCTYPE html>'
html {
  head {
    title('My Site')
    link(rel: 'stylesheet', href: '/css/common.css')
  }
  body {
    div(class: 'outer') {
      div(class: 'inner') {
        if (hoge=hoge){
          div("ハローワールド: $hoge")
        }
      }
    }
  }
}

これが便利だと思う機会が今のところなさそう。

Thymeleaf

th:hogeというエレメントを使って素のHTMLで記述する仕様。FreeMarkerとは似て非なる。 FreeMarkerが制御を<#hoge>タグで構造化するのに比べると、th:hogeに全部やらせる仕様は構造化よりは関数型に近い考え方かな。 xmlnsを記述すればおそらく完全な正しいHTMLとして理解されるはずなので、IDEやブラウザ、エディタでの対応は他のテンプレートエンジンとくらべて一番確実なんじゃないだろうか。

ただ、th:エレメントってthタグとかぶってて検索精度が低いんじゃないだろうか。せめてty:とかだったら良かったのに。ちなみにdata-th-でも良いらしい。

<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
  <link rel="stylesheet" href="/css/common.css">
</head>
<body>
  <div class="innner">
    <div class="outer">
      <div th:if="${hoge}" th:text="ハローワールド:${hoge}">ハローワールド:XXXX</div>
    </div>
  </div>
</body>
</html>

Velocity

  • 有名なやつ。
  • FreeMarkerとどう違うのかわからない。というかVelocityあるのになんでFreeMarkerあるのかわからない。使い込めばわかるのか。
<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
  <link rel="stylesheet" href="/css/common.css">
</head>
<body>
  <div class="innner">
    <div class="outer">
      #if $hoge
        <div>ハローワールド:$hoge</div>
      #end
    </div>
  </div>
</body>
</html>

Mustache

  • いろんな言語でサポートしているテンプレートエンジンらしい。
  • すべてをテンプレート変数で制御する仕組み。ある意味凄い。
  • {{#hoge}}...{{/hoge}}が汎用的につかえて、hogeが真偽値だったらif分、イテレーターだったらfor文として機能する。凄いんだけど、テンプレート見ただけだとどうなるのかわからない。
<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
  <link rel="stylesheet" href="/css/common.css">
</head>
<body>
  <div class="innner">
    <div class="outer">
      {{#hoge1}}
        <div>ハローワールド:{{hoge2}}</div>
      {{/hoge1}}
    </div>
  </div>
</body>
</html>

まとめ

  • 今のところ、情報の多いVelocityか、Spring Bootユーザの多そうなThymeleafか。
  • テンプレートそのものをブラウザで表示した場合、FreemakerやVelocityはテンプレート変数が生で見えるが、Thymeleafはデフォルト値が見える。これは利点かもしれない。