Thymeleafについて学ぼう
公開日: 2025/4/30
皆さんはThymeleafについて耳にしたことはありますか。Javaの代表的なテンプレートエンジンでとても便利です。
Thymeleafとはなにか、どういったメリットやデメリットがあるのかをこの記事作成を通して学んでいきたいと考えています。
1. Thymeleafとは
「タイムリーフ」と読みます。
Thymeとはハーブの一種です。leafは葉っぱを意味します。
すなわち、Thymeleafとは直訳でハーブの葉となります。
スペインのソフトウェアエンジニアであるダニエル・フェルナンデスによって作成されました。
オープンソースのJava向けテンプレートエンジン(Webアプリケーション開発などにおいて使用されるソフトウェア)の一つです。
Webページの雛形（テンプレート）から動的にページを生成する仕組みを提供するソフトウェアで、Webサーバ上でも単体（スタンドアローン）でも使用できます。
2024年4月11日現在、最新バージョンは3.1.2(リリース日は2023年7月30日)となっています。
Thymeleafは、Spring Bootでの使用が推奨されているテンプレートエンジンであり、MVCモデルの「View」に該当します。
2. Thymeleafの特徴
以下がThymeleafの特徴になります。
1.動的コンテンツの生成
Webサーバから受けとったデータをテンプレートに埋め込むことができ、これによって動的なコンテンツを生成することができます。また、テンプレート内で繰り返しの処理や条件分岐を実装することもできます。
2.XMLタグや属性の形式で記述可能
HTMLなどのテンプレートのタグや属性と同じ形式で記述することができます。たとえば、条件の分岐やループ処理、変数の表示などに特別な記述方法は用いておらず、HTMLの記述と同じように、タグや属性としてテンプレート内に記述できます。
3. Thymeleafのメリット・デメリット
1.Thymeleafのメリット
・HTMLファイルに少しの記述を加えるだけで、動的なWebページを簡単に作成することができる・学習コストが低い
・簡単に使用できる
2.Thymeleafのデメリット
・表示に関する処理しか記述できない・Thymeleafについてのサイトが少ない(内容が簡単であるため、そこまで問題はないかもしれませんが...)
4. Thymeleafの基本的な構文
基本的な構文とその構文の使い方について説明と例を記述します。
1.リテラル
リテラルは、テンプレート内で直接記述される固定の文字列や数値です。文字列はダブルクォーテーションの中にシングルクォーテーションがあります。
<p>
<span th:text="'Hello World'"></span>
<span th:text="2024"></span>
</p>2.文字列の連携
「+」を使用して文字列を連結します。<span th:text="'Hello' + ‘ ’ + 'World'"></span>
<span th:text="'ようこそ、' + ${username} + 'さん'"></span>3.算術演算子
数値リテラルの四則演算が使用できます。<div>
<p th:text="100 + 50"></p>
<p th:text="100 - 50"></p>
<p th:text="100 * 2"></p>
<p th:text="100 / 2"></p>
<p th:text="100 % 6"></p>
</div>4.条件演算子
条件によって値を変更する場合は、条件演算子を使用することで内容を変更することができます。<span th:text="${userAge} >= 20 ? 'おとな' : 'こども"></span>5.条件式
条件式を使用することができます。<div th:if="${isVisible}">
<p表示します！</p>
</div>ただし、Thymeleafにはelse文に該当する構文は存在しません。
その場合の代替方法は以下の2つです。
・th:unless
<th:block th:if="${isReady}">
<!-- isReadyがtrueの場合の処理 -->
</th:block>
<th:block th:unless="${isReady}">
<!-- isReadyがfalseの場合の処理 -->
</th:block>・th:switch
<th:block th:switch="${isReady}">
<th:block th:case=true>
<!-- isReadyがtrueの場合の処理 -->
</th:block>
<th:block th:case=*>
<!-- isReadyがfalseの場合の処理 -->
</th:block>
</th:block>6.論理演算子
論理演算子が使用できます。ANDは「&&」で、ORは「||」で表します。・AND条件
<div th:if="${param1 >= 10 && param2 <= 5}">5. Thymeleafのまとめ
Thymeleafを調べていくと、とても簡単に実装できることがわかりました。
この記事を読んだ方が少しでも理解していただけたら幸いです。