🎉

thymeleafって何

に公開

Thymeleaf(タイムリーフ)は、Spring Boot で最も一般的に使われる「サーバーサイド HTML テンプレートエンジン」です。
Java(Controller)で用意したデータを、HTMLに埋め込んで画面を作る仕組みです。

なぜ Thymeleaf が必要なのか

Spring MVC の Controller で下記を書いていた場合。

return "hellospring";

これはつまり、templates/hellospring.html を テンプレートとして処理して表示するという意味になります。この「テンプレートとして処理する役割」を担っているのが Thymeleaf です。

Thymeleaf が無いとどうなるか

  • Controller は動く
  • でも return "hellospring" の意味を解釈できない
  • HTML をただの静的ファイルとしても扱えない
  • 結果:Template not found / 404 / Whitelabel Error

HTML をただの静的ファイルとしても扱えない?

これは置き場所が関係しています。
static 配下の HTML ファイル → Thymeleaf が無くても表示OK。
templates 配下の HTML ファイル → Thymeleaf が無いと表示NG。
Controller は動くが、 return "hellospring" を View として解決できないわけです。
templates 配下の HTML ファイル はサーバーサイドレンダリング前提で情報を待っているってことですね。

Thymeleaf でできること

① Java → HTML に値を渡せる

@GetMapping("/hello")
public String hello(Model model) {
    model.addAttribute("name", "Spring");
    return "hellospring";
}
<p th:text="${name}"></p>
// 表示結果:
Spring

他にも
② 条件分岐・繰り返しが書ける
③ 普通の HTML としても開ける
Thymeleaf は仮の文字を表示させてHTMLとしても機能します。

<p th:text="${name}">仮の文字</p>

これを**「ナチュラルテンプレート」**と呼びます。
一方で、JSPという記述もあります。これは明確に異なる記法なので割愛。

まとめ

Thymeleaf は動的な読み込みもできるし、仮の文字も表示させることができる便利なやつ。

Spring Boot での役割分担

Controller (Java)

Model(データ)

Thymeleaf(HTMLに埋め込む)

ブラウザ

置き場所

src/main/resources/templates/
    hellospring.html

Discussion