JavalinとThymeleafでWebアプリケーションを構築する方法

# 概要

この記事では、JavalinとThymeleafを使用して簡単なWebアプリケーションを構築する方法について解説します。Javalinはシンプルで軽量なJava用Webフレームワークで、ThymeleafはJavaベースのテンプレートエンジンとして、HTMLファイル内で変数をレンダリングするのに役立ちます。

# 必要なファイルと設定

以下の4つのファイルを使用します：

- `pom.xml`: Mavenのプロジェクト設定ファイル
- `App.java`: Javalinアプリケーションのエントリーポイント
- `ThymeleafRenderer.java`: JavalinでThymeleafを設定するためのレンダラー
- `index.html`: レンダリングするHTMLテンプレート

## 1. `pom.xml`の設定

まず、プロジェクトの依存関係を定義するために`pom.xml`ファイルを設定します。Thymeleaf、Javalin、その他の必要なライブラリを追加します。

```xml
<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>
    <groupId>jp.livlog</groupId>
    <artifactId>javalin-thymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <dependencies>
        <!-- Javalin -->
        <dependency>
            <groupId>io.javalin</groupId>
            <artifactId>javalin</artifactId>
            <version>6.3.0</version>
        </dependency>
        
        <!-- Thymeleaf -->
        <dependency>
            <groupId>io.javalin</groupId>
            <artifactId>javalin-rendering</artifactId>
            <version>6.3.0</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>3.1.2.RELEASE</version>
        </dependency>

        <!-- Other -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.34</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.4.5</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>2.0.7</version>
        </dependency>
    </dependencies>

    <build>
        <sourceDirectory>src/main/java</sourceDirectory>
        <outputDirectory>target/classes</outputDirectory>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
            </resource>
        </resources>
        <testSourceDirectory>src/test/java</testSourceDirectory>
        <testOutputDirectory>target/test-classes</testOutputDirectory>
        <testResources>
            <testResource>
                <directory>src/test/resources</directory>
            </testResource>
        </testResources>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <release>17</release>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>versions-maven-plugin</artifactId>
                <version>2.17.1</version>
                <executions>
                    <execution>
                        <phase>compile</phase>
                        <goals>
                            <goal>display-dependency-updates</goal>
                            <goal>display-plugin-updates</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>
```

## 2. `App.java` - Javalinアプリケーションのメインクラス

`App.java`はJavalinアプリケーションのエントリーポイントで、ThymeleafRendererを設定し、ルートエンドポイントを設定しています。

```java
package jp.livlog.javalin_thymeleaf;

import java.util.Map;

import io.javalin.Javalin;

public class App {

    public static void main(final String[] args) {

        final var app = Javalin.create(config -> {
            config.fileRenderer(new ThymeleafRenderer()); // Thymeleafを使う
        }).start(7000);

        app.get("/", ctx -> {
            ctx.render("/index.html", Map.of("message", "Hello, Thymeleaf!"));
        });
    }
}

```

## 3. `ThymeleafRenderer.java` - カスタムThymeleafレンダラー

Thymeleafレンダラーは、JavalinでThymeleafを使用してテンプレートをレンダリングするために使用されます。このファイルは、Thymeleafの`TemplateEngine`を設定し、テンプレートをJavalinのファイルレンダリングに適用します。

```java
package jp.livlog.javalin_thymeleaf;

import java.util.Map;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

import io.javalin.rendering.FileRenderer;

public class ThymeleafRenderer implements FileRenderer {

    private final TemplateEngine templateEngine;

    public ThymeleafRenderer() {

        this.templateEngine = new TemplateEngine();
        final var resolver = new ClassLoaderTemplateResolver();
        resolver.setPrefix("/templates/");
        resolver.setSuffix(".html");
        resolver.setTemplateMode("HTML");
        this.templateEngine.setTemplateResolver(resolver);
    }


    @SuppressWarnings ("unchecked")
    @Override
    public String render(final String filePath, final Map <String, ? extends Object> model, final io.javalin.http.Context ctx) {

        final var thymeleafContext = new Context();
        thymeleafContext.setVariables((Map <String, Object>) model);
        return this.templateEngine.process(filePath, thymeleafContext);
    }

}
```

## 4. `index.html` - テンプレートファイル

`index.html`は、Thymeleafが処理するHTMLテンプレートファイルです。`/templates`ディレクトリに配置します。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1 th:text="${message}">Default message</h1>
</body>
</html>
```

このテンプレートでは、`${message}`の変数に渡されたデータが表示されます【163†source】。

## 実行方法

1. 上記の設定が完了したら、Mavenプロジェクトをビルドし、`App`クラスを実行します。
2. ブラウザで`http://localhost:7000/`にアクセスすると、Thymeleafによってレンダリングされた「Hello, Thymeleaf!」のメッセージが表示されます。

以上がJavalinとThymeleafを使ったWebアプリケーションの簡単な設定方法です。   

# 最後に

さらに、JavalinとThymeleafの設定を学ぶための参考として、GitHub上にサンプルプロジェクトが公開されています。このリポジトリでは、上記の構成を元にした実装例が提供されており、Thymeleafのテンプレートエンジンを使ってJavalinアプリケーションでの動作確認ができる構成になっています。

サンプルリポジトリはこちら: [javalin-sample](https://github.com/blue-islands/javalin-sample)

このサンプルには基本的なセットアップ、Thymeleafテンプレートの活用例、そしてカスタムファイルレンダラーの実装が含まれていますので、ぜひ参照してみてください。