バナー画像

これまで、Java の ウェブアプリケーション開発おけるテンプレートエンジンには「JSP」がよく用いられてきました。現在、Spring などのフレームワークでは JSP は非推奨となり、別のテンプレート エンジンの使用が推奨されています。

この記事では、Spring フレームワークと相性がよく、デザイナーとの協業もしやすい「Thymeleaf」テンプレートエンジンについて解説します。

Thymeleaf とは

Thymeleaf は、Spring Boot 互換のテンプレートエンジンです。

サーバー側で動的に変わる部分を、JSP のような拡張タグではなく、HTML の属性値で記述するため、ブラウザでテンプレートを表示しても見た目かわ崩れず、実際の表示に近い形で表示される特徴があります。

Spring Boot で使用できるテンプレートエンジンは複数ありますが、Thymeleafの利用が推奨されています。 Thymeleaf は学習コストが低いことや、HTMLとの親和性が高いことから多くのシステム開発プログジェクトで採用されています。

ポテパンダの一言メモ

日本でも Spring Boot + Thymeleaf での開発が盛んに行われており、Thymeleaf に関する日本語の書籍や Webページが多数あり、現在では非常に学習しやすい環境にあります。

Thymeleafを使用する

Spring Boot のブロジェエクであれば、Maven や Gradle の依存関係に Thymeleaf 追加するだけで簡単に使い始めることができます。

Thymeleafを依存関係に追加

パッケージ管理に Maven を使用している場合は pom.xml に以下の内容を追加します。

<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.6.1</version>
</dependency>

Gradle の場合は build.gradle に以下の内容を追加します。

// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf
implementation group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.6.1'

テンプレートファイルの作成と表示

Thymeleaf のデフォルトの設定では、src/main/resources/templates の下にあるテンプレート ファイルが検索対象となります。設定で変更することも可能ですが、特に理由がないかぎりはデフォルトのディレクトリを使用した方がいいでしょう。

それでは、テンプレートを作成してみましょう。

以下のテンプレートは、Java 側で設定された 変数 message を表示するだけの簡単なテンプレートです。このファイルをsrc/main/resources/templates の下に hello.html という名前で保存します。

<!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>

テンプレートを作成したら、次はコントローラー側の実装を行います。HelloController という名前でクラスを作成し、model.addAttribute で先ほど作成したテンプレートに値を渡す index メソッドを作成します。

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

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

テンプレートと Java コードの準備ができたら、実行して動きを確認します。

HTMLファイルとして表示した時の値を設定

前述したように、Thymeleaf で使用する th:text などの属性は、 HTMLファイルとして表示した時の表示に影響を与えません。さらに、次のように th:text 属性と、タグの中の値を両方設定すると、HTML ファイルしてテンプレート を表示した時は「Hello Message」が、Spring (Java) 経由で実行された時は message 変数の値が表示されます。

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

このように、Thymeleaf では、デザイナーとHTMLを共有するようなケースでは、JSP などに比べると遥かに共有がやりやすくなりました。

インラインで表示

Thymeleaf では、th:text などの属性で書くことが多いですが、インライン形式でも、サーバー側の処理で設定された変数の値を表示できます。

インライン形式で HTML に値を出力する時は、[[変数または値]] の形式で指定します。

先ほど作成した HTML をインライン形式で書くと、次のようになります。

<!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>[[message]]</p>
    </body>
</html>

ただし、インライン形式で指定した場合、テンプレートを HTML として表示した時に、インラインの式がそのままブラウザ上に表示されます。

まとめ

Java の Web 開発で、JSP に変わる有力候補である Thymeleaf のインストール方法や簡単な使い方を紹介してきました。

冒頭でも述べましたが、Spring Boot アプリケーションにおいて JSP はすでに非推奨の位置付けに設定されており、別の新しいテンプレートエンジンの使用が推奨されています。その中でも Thymeleaf は Spring Boot 互換のテンプレートエンジンで、pom.xml などの パッケージ管理ツールの依存関係に追加するだけで簡単に使用できます。

次回は、もっと詳しく Thymeleaf の使用方法を解説していきます。

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

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

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

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

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

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

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

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

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

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

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