Chapter 06

Thymeleafで画面のあるWebアプリを作ろう！

AKIHIKO Sato
AKIHIKO Sato
2024.12.13に更新
このチャプターの目次
  1. テンプレートとは？
  2. Thymeleafとは？
  3. Gradleプロジェクトの概要
    1. プロジェクトの構成
  4. クラスの作成
    1. Controllerクラス
  5. テンプレートの作成
  6. プロジェクトの起動

Thymeleafというテンプレートエンジンを使って、HTMLをレスポンスするWebアプリを作成していきたいと思います！

1つのController、1つのテンプレートを使ったWebアプリを作ります。

テンプレートとは？

テンプレートは、Webアプリケーションで表示する画面のレイアウトやデザインを定義するファイルです。

MVCモデルのViewの役割を担います。Controllerから受け取ったデータを適切な形式で表示します。ビジネスロジックと表示ロジックを明確に分離することができます。

mvc.png

HTMLを生成するためのベースとなるファイルで、静的なHTMLの構造を定義しながら、動的なコンテンツを埋め込むことができます。テンプレートエンジンによって処理される際に、実際のデータと組み合わされて最終的なHTMLページが生成されます。

Thymeleafとは？

Thymeleafは、JavaのWebアプリケーションで広く使用されているテンプレートエンジンです。HTMLファイルに直接テンプレート構文を記述できるため、デザイナーとの協業がしやすく、静的なプロトタイプとしても使用できます。Spring Bootと組み合わせることで、効率的な開発が可能になります。

具体的には、以下のような特徴的な機能があります：

  • テンプレートの中で変数を使用できます。Controllerから渡された値を、${変数名}の形式で参照できます。
  • 繰り返し処理やif文などの制御構文を使用できます。th:eachやth:ifといった属性を使って実現します。
    • Thymeleafでは「th」という識別子を使用します。
      • HTMLテンプレートのhtml開始タグ内にxmlns属性を記述します。定型的な書式となっています。
      • 「th」の仕様はこのURLで定義されている。

Gradleプロジェクトの概要

ブラウザ上に以下のような文字列を表示するアプリケーションを作成します。

hello_thymeleaf.png

プロジェクトの構成

以下の内容（または同等のもの）を指定してください。

Spring Initializr 意味 選択
Specify Spring Boot version. Spring Bootのバージョン 3.4.0
Specify project language. プロジェクトで使用する言語 Java
Input Group Id for your project. Group Idを入力してください com.example(default)
Input Artifact Id for your project. Artifact Idを入力してください hello
Specify packaging type. パッケージングタイプ Jar
Specify Java version. Javaのバージョン 17（任意）
Choose dependencies. 依存関係 Last used
Spring Web, Thymeleaf, Spring Boot DevTools
Generate into this folder プロジェクトフォルダを作成する場所を指定します デスクトップ

クラスの作成

src > main > javaフォルダの下のcom.example.helloの下に作成します。ファイル名は、HelloController.javaとします。

created_HelloController_hellopackage.png

Controllerクラス

HelloController.javaを以下のように変更します。

HelloController.java
package com.example.hello;

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

@Controller
public class HelloController {
    @GetMapping("/")
    public String index() {
        return "index";
    }
}

Controllerで使用するアノテーション

  • @Controller

    このアノテーションは、このクラスがWebリクエストを処理するMVCモデルのControllerであることを示します。Spring MVCフレームワークがこのクラスをControllerとして認識し、HTTPリクエストをハンドリングできるようになります。

テンプレートの作成

src > main > resourcesフォルダの下のtemplatesの下に作成します。ファイル名index.htmlにHTMLの雛形を作成してください。

index_template.png

index.htmlを以下のように変更します。

index.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello Thymeleaf!</h1>
</body>
</html>

プロジェクトの起動

Spring Boot Dashboardからプロジェクトを起動します。プロジェクト起動後にブラウザで http://localhost:8080 にアクセスすると、以下の画面が表示されます。

hello_thymeleaf.png

このように、Thymeleafを使用することで、HTMLテンプレートとJavaのコントローラーを組み合わせた基本的なWebアプリケーションを作成することができました。これがThymeleafを使用したWebアプリ開発の第一歩となります。