Spring

Spring BootでThymeleafを使って簡単なWebページを作成する

Springの公式ドキュメントでも紹介されている、Spring Boot + Thymeleafを使ったHello, Worldを表示するだけの簡単なWebページを作成してみます。Thymeleafはテンプレートエンジンの1つで、Spring BootでView(画面)を作成するときによく利用されます。

環境

- Java 8
- Gradle 6.2.2
- Spring Boot 2.2.5.RELEASE
view raw env.sh hosted with ❤ by GitHub

Spring BootでThymeleafを使って簡単なWebページを作成する

まずは、Spring InitializrでSpring Bootの雛形プロジェクトを作成します。「Dependencies」に「Spring Web」と「Thymeleaf」を追加して作成してやればOKです。できあがったbuild.gradleを載せておきます。

build.gradle

plugins {
id 'org.springframework.boot' version '2.2.5.RELEASE'
id 'io.spring.dependency-management' version '1.0.9.RELEASE'
id 'java'
}
group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation('org.springframework.boot:spring-boot-starter-test') {
exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
}
}
test {
useJUnitPlatform()
}

ここからは、実際にWebページを作成していきます。

Controllerクラスを作成する

Webページからのリクエストを受け付けるControllerクラス(GreetingController.java)を作成します。

GreetingController.java

@Controller
public class GreetingController {
@GetMapping("/greeting")
public String geeting(@RequestParam(name = "name", required = false, defaultValue = "World") String name, Model model) {
model.addAttribute("name", name);
return "greeting";
}
}

@GetMapping("/greeting")は、/greetingへのGETリクエストを受け付けることを意味します。@RequestParamはリクエストパラメータを取得する際に使用します。今回の場合、http://localhost:8080/greeting?name=XXXXXXを取得するために使用します。

ModelはView(画面)に値を渡すためのオブジェクトです。今回は、このオブジェクトにリクエストパラメータを設定します。

戻り値は、Thymeleafのテンプレート名を設定します。例えば上記のようにgreetingを設定すると、src/main/resources/templates/greeting.htmlがViewとして使用されます。

View(画面)を作成する

Thymeleafを使用して画面を作成するときは、テンプレートとなるHTMLを用意し、そこに変数を埋め込むイメージです。

greeting.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

今回は、${name}にControllerから渡されたリクエストパラメータを埋め込みます。

アプリケーションを実行する

アプリケーションクラスはデフォルトのままでOKです。

DemoApplication.java

package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}

最後に、./gradlew bootRunコマンドを実行し、アプリケーションを実行してみます。

http://localhost:8080/greetingにアクセスすると、以下のようにHello, World!が表示されます。

http://localhost:8080/greeting?name=Taroにアクセスすると、以下のようにHello, Taro!が表示されます。リクエストパラメータ(?name=Taro)の値で表示内容が変わるのがわかるかと思います。

まとめ

Spring Boot + Thymeleafを使ったHello, Worldを表示するだけの簡単なWebページを作成してみました。ThymeleafはSpring Bootと親和性が高く、View側との値の受け渡しが簡単に行えるのがいいですね。

参考リンク

-Spring

S