1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-10-31

概要

この記事では、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、その他の必要なライブラリを追加します。

<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を設定し、ルートエンドポイントを設定しています。

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のファイルレンダリングに適用します。

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ディレクトリに配置します。

<!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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?