バナー画像

Spring フレームワークのテンプレートエンジンはいくつかありますが、その中でも Thymeleaf は Spring 公式ページでも推奨され、使いやすいと人気です。

これまで Java の Web アプリのテンプレートエンジといえば、 JSP が採用されてきましたが、JSP 独自のタグは学習コストも高く、デザイナとの HTML の共有も難しい状況でしたが、Thymeleaf の登場によりこれらの問題は大きく改善ました。

この記事では、Spring フレームワークで用いられるテンプレートエンジンの Thymeleaf の使い方を解説します。Thymeleaf の設定手順や、簡単な使用方法は以下の記事で解説していますので、こちらもご覧ください。

【関連記事】
[Java]テンプレートエンジンのThymeleafとは?インストール方法から使用方法を解説

テキストの表示

簡単なメッセージを表示するサンプルコードを見てみましょう。

まず、次のようなコントローラークラスを作成します。テンプレート(HTML)に渡す変数は model.addAttribute で登録します。

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(Model model) {
        model.addAttribute("message", "メッセージ");
        return "hello";
    }
}

次に Thymeleaf のテンプレートファイルを用意します。

Thymeleaf のテンプレートは、<html> タグに xmlns:th=”http://www.thymeleaf.org”を付けます。また、サーバー側(Java)側で登録した変数は、th:属性名=””${変数名}” の形式で参照できます。

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Thymeleaf Sample</title>
    </head>
    <body>
        <p th:text="${message}"></p>
    </body>
</html>

条件分岐

ある条件によって、HTML の出力を切り替える時は th:if または th:unless を使用します。

th:if は指定された条件式が true の時、対象のタグと子要素が出力され、 th:unless はその逆で、条件式が false の時にタグが出力されます。

具体的なサンプルコードを見てみましょう。

次のコードは、年齢(age)が 20以上かそれ未満か出力を切り替える例です。

<body>
  <span th:if="${age >= 20}">20歳以上です</span>
  <span th:unless="${age >= 20}">20歳未満です</span>
</body>
ポテパンダの一言メモ

条件に一致した時と、それ以外の時で処理を行う場合、Java では if ~ else 構文を用いますが、Thymeleaf には else 式はないため、そのような時は th:if および th:unless を組み合わせて使用します。

繰り返し

配列・リストなどのコレクションを繰り返す時は、th:each を使用します。

コントローラー側で次のようなリストを作成します。

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(Model model) {
        List<String> list1 = new ArrayList<>();
        list1.add("Java");
        list1.add("Python");
        list1.add("Ruby");
        list1.add("PHP");
        model.addAttribute("list1", list1);
        return "hello";
    }
}

上で作成したリストを、テンプレート側の HTML で繰り返す場合は、次のように書きます。

<th:block th:each="lang : ${list1}">
    <p th:text="${lang}"></p>
</th:block>

オブジェクトの繰り返し

クラスなどのオブジェクトのリストを繰り返す場合についても解説します。

コントローラー側で、ID(id)、氏名(name)、メールアドレス(email)の3のプロパティを持つオブジェクトのリストを作成します。

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(Model model) {
        List<User> usres = new ArrayList<>();
        // User(id, name, email)
        usres.add(new User(1, "Yamada", "yamada@sample.com"));
        usres.add(new User(2, "Suzuki", "suzuki@sample.com"));
        usres.add(new User(3, "Sato", "sato@sample.com"));
        model.addAttribute("users", usres);
        return "hello";
    }
}

オブジェクトの場合、繰り返しの変数名.プロパティ名で、対象の値を出力できます。

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>EMail</th>
    </tr>
    <tr th:each="user : ${user}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.email}"></td>
    </tr>
</table>

まとめ

Spring Boot アプリケーションで推奨しているテンプレートエンジンである、Thymeleaf の使用方法について解説してきました。

Thymeleaf は Spring Boot と互換性が高く、pom.xml などの パッケージ管理ツールの依存関係に追加するだけで簡単に使用できます。

構文も、angularvue.js などの人気 JS フレームワークでよく使われている属性ベースのものであるため、これらの JS フレームワークを体験したことがあれば、Thymeleaf も容易に習得することもできるでしょう。

【関連記事】
[Java]テンプレートエンジンのThymeleafとは?インストール方法から使用方法を解説

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。