Spring Boot の Webアプリで、テンプレートエンジンの Mustache を使う方法を書いていきます。
バージョン
動作確認で使用した製品のバージョンは以下の通りです。
1. ライブラリの追加
Maven のビルドファイルに、Spring Boot の Mustache と Web を追加します。
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-mustache</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> </dependencies>
Gradle の場合は以下の通りです。
dependencies { implementation 'org.springframework.boot:spring-boot-starter-mustache' implementation 'org.springframework.boot:spring-boot-starter-web' }
2. コントローラーの作成
ビューとモデルを設定するコントローラーを作成します。
src/main/java/org/example/controller/SurveyController.java
package org.example.controller; import java.util.List; import java.util.Map; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.servlet.ModelAndView; import lombok.Getter; import lombok.Setter; @Controller public class SurveyController { @GetMapping("/survey") public ModelAndView get() { ModelAndView mv = new ModelAndView(); mv.addObject("season", "2023年01月"); mv.addObject("survey", new Survey()); mv.setViewName("survey"); return mv; } @Setter @Getter private static class Survey { private long id = 1; private List<String> os = List.of("Windows", "Mac"); private Map<String, String> qa = Map.of("Q1", "A2", "Q1", "A2"); } }
Getter/Setter を省略するために Lombok を使用しています。
3. テンプレートの作成
Mustache のテンプレートを作成します。
src/main/resources/templates/survey.mustache
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Mustacheのサンプル</title> </head> <body> <div> <h1>{{season}}</h1> {{#survey}} <h2>ID: {{id}}</h2> <h3>OS</h3> <ul> {{#os}} <li>{{.}}</li> {{/os}} </ul> <h3>QA</h3> <ul> {{#qa}} <li>Q1: {{Q1}}</li> <li>Q2: {{Q2}}</li> {{/qa}} </ul> {{/survey}} </div> </body> </html>
アプリを実行してブラウザで開くと、以下のように表示されます。
2023年01月 ID: 1 OS ・Windows ・Mac QA ・Q1: A1 ・Q2: A2
4. Mustacheの設定
Mustache の設定を変更したい場合は、以下のファイルを作成します。
src/main/resources/application.properties
# テンプレートのエンコーディング spring.mustache.charset=UTF-8 # テンプレートのプレフィクス(保存先) spring.mustache.prefix=classpath:/templates/ # テンプレートのメディアタイプ(レスポンス) spring.mustache.reactive.media-types=text/html;charset=UTF-8 # テンプレートのキャッシュ spring.mustache.servlet.cache=false # テンプレートのサフィックス(拡張子) spring.mustache.suffix=.mustache
上の値がデフォルトになります。他の設定値は Spring Boot のマニュアルに記載されています。
Spring Boot Reference Documentation
5. 起動クラスの作成
アプリを起動するクラスを作成します。
src/main/java/org/example/SpringApp.java
package org.example; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class SpringApp { public static void main(String[] args) { SpringApplication.run(SpringApp.class, args); } }
6. ビルドファイルの作成
動作確認のために、Maven のビルドファイルを作成します。
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>3.0.1</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>org.example</groupId> <artifactId>spring-mustache</artifactId> <version>1.0.0</version> <properties> <java.version>17</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-mustache</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <scope>provided</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
7. 動作確認
IDE で起動クラスを実行するか、以下のコマンドを実行します。
mvn spring-boot:run
以下の URL をブラウザで開いて、画面が表示されることを確認します。
http://localhost:8080/survey