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 の導入#

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

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

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

// サードパーティのプラグインには対応するクラスパスを指定する必要があります
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
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 キーを使用して素早くデプロイできます。

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