SpringBoot Mustacheを使う方法（テンプレートエンジン）

Spring Boot の Webアプリで、テンプレートエンジンの Mustache を使う方法を書いていきます。

バージョン

動作確認で使用した製品のバージョンは以下の通りです。

Spring Boot 3.0.1
Java 17
Lombok 1.18.24

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

Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。