BLOG

Thymeleafについて

こんにちは!ririです。

今日はThymeleafについて書きたいと思います。
動作環境はSpring Bootです。

流れとしては
◦概要
◦サンプルコード
◦まとめ
の順です。

概要

Thymeleafはテンプレートエンジンです。
HTMLのタグの中にth:○○という属性を追加することによって、
サーバーから取得したデータを簡単にブラウザ上(View)に表示することができます。

詳しい情報はこちらに掲載されています。

ちなみに読み方は′タイムリーフ′です。
最初、私はサイムリーフと読んでいました(笑)
調べてみると、Thymeはハーブの一種の名前だそうです。
なるほど、だからleaf(葉っぱ)なのかと合点がいきました。

サンプルコード

お決まりですけど、ブラウザ上に’Hello World!’と表示してみます。

<Controller側>

@GetMapping 
public String index(Model model) {
  model.addAttribute("message", "Hello World!");
  return "index";
}

@GetMappingというアノテーションで、ブラウザからのリクエストと、このindex関数の処理をMapping(関係付けること)しています。
そしてaddAttributeメソッドの引数にキー名と格納する値をセットします。

<View側>

<body>
 <h1 th:text="${message}"></h1>
</body>

Controller側でmodelオブジェクトに格納した値をタグのテキストとして表示するために『th:text 属性』と『${…}構文』を使用しています。
HTMLの’タグの属性’として『th:text』を指定しているので、HTMLファイルとして表示してもレイアウトが崩れません。
『${…}構文』の…の部分には Controller側で設定したキー名を指定します。

<表示結果>

無事に表示することができました。

まとめ

Thymeleafを使用すると簡単にデータをブラウザ上に表示できることがわかりました。
Thymeleaf はHTMLベースで記述するので、画面表示に影響を与えません。
ここがJSPとの違いになります。

研修開始時は、 addAttributeメソッド とth:text属性、 ${…}構文 を知らなかったので、ソースコードを読んだときに困惑ました。
一つ一つ調べて、理解することができました。
自分が知りたいと思っている情報だけを検索することはなかなか難しいです。
検索対象の周辺知識の不足が原因だと考えているので、効率的に情報を取捨選択できるように知識を身に着けていきたいです。

今回は以上になります。
ご覧いただき、ありがとうございました。


BLOGトップへ戻る