banner
jzman

jzman

Coding、思考、自觉。
github

Spring BootシリーズのThymeleafテンプレート入門

PS:絶対に自分がやりたいことをやらない理由を探さないでください。

Thymeleaf は Web 開発のための Java テンプレートエンジンで、HTML、XML、JavaScript、CSS、さらにはプレーンテキストを処理できます。Spring Boot は従来の JSP 技術ではなく Thymeleaf テンプレートエンジンの使用を推奨しています。主な内容は以下の通りです:

  1. Thymeleaf の導入
  2. Thymeleaf 属性
  3. Thymeleaf の使用
  4. ホットデプロイ

Thymeleaf の導入#

個人的には Gradle は Maven よりもシンプルだと思います。ここでは gradle を使用して Web プロジェクト全体を構築し、build.gradle ファイルに Thymeleaf 依存関係を以下のように追加します:

dependencies {
    // thymeleaf 依存関係を追加
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

Thymeleaf はサードパーティのプラグインに属するため、build.gradle ファイルに対応する classpath を指定する必要があります。build.gradle ファイルに以下のように設定します:

// サードパーティのプラグインには対応する classpath を指定する必要があります
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:2.2.5.RELEASE")
    }
}

これで Thymeleaf が Web プロジェクトに導入されました。インポートされたライブラリのリストで Thymeleaf が正しくインポートされているか確認できます。

Thymeleaf 属性#

# テンプレートキャッシュを有効にする、デフォルトは true
spring.thymeleaf.cache=false
# レンダリング前にテンプレートが存在するか確認する
#spring.thymeleaf.check-template=true
# テンプレートの場所が存在するか確認する
#spring.thymeleaf.check-template-location=true
# SpringEL 表現式で SpringEL コンパイラを有効にするか
#spring.thymeleaf.enable-spring-el-compiler=false
# Web フレームワークに Thymeleaf ビュー解決を有効にするか
#spring.thymeleaf.enabled=true
# テンプレートエンコーディング
#spring.thymeleaf.encoding=UTF-8
# 解決から除外するビュー名のカンマ区切りリスト
#spring.thymeleaf.excluded-view-names
# テンプレートモード
#spring.thymeleaf.mode=HTML
# URL 構築時のプレフィックス
#spring.thymeleaf.prefix=classpath:/templates/
# URL 構築時のサフィックス
#spring.thymeleaf.suffix=.html
# カンマ区切りのビュー名リスト、最大ブロックサイズが設定されている場合、CHUNKED モードで唯一実行されるビュー名リスト
#spring.thymeleaf.reactive.chunked-mode-view-names
# 最大ブロックサイズが設定されている場合、FULL モードでのカンマ区切りのビュー名リスト
#spring.thymeleaf.reactive.full-mode-view-names
# レスポンスデータバッファの最大サイズ、テンプレートが設定されている場合、デフォルトでは CHUNKED モードで実行される
#spring.thymeleaf.reactive.max-chunk-size=0B
# ビュー技術がサポートするメディアタイプ
#spring.thymeleaf.reactive.media-types
# チェックボックスのマーカーとして機能する隠しフォーム入力がチェックボックス要素自体の前にレンダリングされるべきか。
#spring.thymeleaf.render-hidden-markers-before-checkboxes=false
# HTTP レスポンスの Content-Type タイプ
#spring.thymeleaf.servlet.content-type=text/html
# Thymeleaf は可能な限り出力に書き込むか、テンプレート処理が完了するまでバッファリングするべきか
#spring.thymeleaf.servlet.produce-partial-output-while-processing=true
# テンプレートリゾルバのチェーン内の順序、デフォルトではテンプレートリゾルバはチェーン内の最初に位置し、1 から始まり、他の TemplateResolver が定義されている場合のみ設定可能
#spring.thymeleaf.template-resolver-order
# 解決可能なビュー名のカンマ区切りリスト
#spring.thymeleaf.view-names

Thymeleaf の使用#

Thymeleaf 依存関係を正常に導入した後、resources/templates の下にテンプレートファイル hello.html を以下のように作成します:

<!DOCTYPE html>
<!-- thymeleaf の名前空間を追加する必要があります -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
</head>

<body>
    <p th:text="${name}">Hello World!</p>
</body>

</html>

上記のコードでは、Thymeleaf のタグが Html タグ内で使用されています。これは他のテンプレートエンジンとは異なる点です。${name} は name の値を取得し、テンプレート処理時に p タグ内の内容が name の値に置き換えられます。その後、対応する Controller を以下のように作成します:

@Controller
public class ThymeleafController {
    @RequestMapping("/index")
    public String hello(Model model){
        model.addAttribute("name","jzman");
        return "hello";
    }
}

実行後、以下のアドレスにアクセスできます:

http://localhost:8080/index

その実行結果は以下の通りです:

jzman

ホットデプロイ#

build.gradle ファイルに devtools を以下のように追加します:

dependencies {
    // ホットデプロイ
    implementation("org.springframework.boot:spring-boot-devtools:2.0.2.RELEASE")
}

その後、Ctrl+Shift+A を押して Registry を見つけ、以下のオプションにチェックを入れます:

image

最後に、設定 Compiler で以下のオプションにチェックを入れます:

image

設定が完了したら、Thymeleaf テンプレートキャッシュを無効にして、迅速な更新を保証する必要があります:

spring.thymeleaf.cache=false

プロジェクトを実行した後、プロジェクトに変更があった場合は、ショートカットキー Ctrl+F9 を使用して迅速にデプロイできます。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。