Springの公式ドキュメントでも紹介されている、Spring Boot + Thymeleafを使ったHello, World
を表示するだけの簡単なWebページを作成してみます。Thymeleafはテンプレートエンジンの1つで、Spring BootでView(画面)を作成するときによく利用されます。
環境
- Java 8 | |
- Gradle 6.2.2 | |
- Spring Boot 2.2.5.RELEASE |
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=XXX
のXXX
を取得するために使用します。
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側との値の受け渡しが簡単に行えるのがいいですね。