ミルラク

EclipseでSpring BootとThymeleafの実行環境を構築する

更新日: 2024-02-27

当サイトはアフィリエイト広告を利用しています。

Thymeleafを書籍で学びたい方やThymeleafと一緒にSpringも習得したい方におすすめな書籍です。
Springについての書籍ですが、Thymeleafの基本構文や他システムとの連携など30ページほど取り上げられています。
ThymeleafとSpringは親和性の高い技術なので、これを機にSpringを学んでみるのはいかがでしょうか?

IntelliJ IDEAでの環境構築方法はこちらの記事で紹介しています。

実行環境

項目バージョン
OSmacOS Catalina
JDKOracle JDK@8
EclipsePhoton 2018-09

EclipseでSpring BootとThymeleafの実行環境を構築する

手順は以下のとおりです。

  1. Springのプロジェクトを作成する
  2. Controllerクラスを作成する
  3. テンプレートを作成する
  4. Spring Bootを起動する

Springのプロジェクトを作成する

今回は、Pleiadesに同梱されているSpring Tool Suite (STS)とThymeleafを使用するため「Photon 2018-09」を使用します。

Springのパースペクティブを開く

  1. 画面右上のJavaアイコンの左にある [+のついた表] を押下
  2. [Spring] を選択して [開く] を押下
  3. [Spring スターター・プロジェクト] を押下
  4. [次へ] を押下
EclipseでSpringのパースペクティブを開いた際のスクリーンショット

Springのプロジェクトを作成

  1. 画面左にあるパッケージ・エディタで右クリック
  2. [新規] を押下
  3. [Spring スターター・プロジェクト] を押下
  4. 何も変更せず [次へ] を押下
Eclipseの新規Springスターター・プロジェクトウィンドウのスクリーンショット

以下の依存関係を選択して [完了] を押下します。

  • 開発ツール > Spring Boot DevTools
  • 開発ツール > Lombok
  • テンプレート・エンジン > Thymeleaf
  • Web > Spring Web
Eclipseの新規Springスターター・プロジェクト依存関係ウィンドウのスクリーンショット

以下のように表示されます。

EclipseでSpringのプロジェクトを作成した際のスクリーンショット

Controllerクラスを作成する

テンプレートファイルを呼び出すためのControllerクラスを作成します。

  1. src/main/java/com/example/demo で右クリック
  2. [新規] > [クラス] を押下
  3. クラス名に DemoController を入力して [完了] を押下
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class DemoController {

  // アクセスする際に使用するURLを設定
  @RequestMapping("/demo")
  public String demo(Model model) {
    // "message"という変数に「Hello world」という文字列を設定
    model.addAttribute("message", "Hello world");

    // 返却するテンプレートファイル名を指定
    return "demo";
  }
}

テンプレートを作成する

Controllerクラスから呼び出されるテンプレートファイルを作成します。

  1. src/main/resources/templates で右クリック
  2. [新規] > [その他] を押下
  3. [Web] > [HTMLファイル] を選択して [次へ] を押下
  4. ファイル名に demo.html を入力して [完了] を押下
<!DOCTYPE html>
<!-- Thymeleafで使用するthタグを認識するための記述 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Hello world</title>
</head>
<body>
  <!-- "message"という変数の値を表示する -->
  <h1 th:text="${message}"></h1>
</body>
</html>

Spring Bootを起動する

  1. demo で右クリック
  2. [実行] > [Spring Boot アプリケーション] を押下
  3. http:localhost:8080/demoにアクセス
http://localhost:8080にアクセスした際のスクリーンショット

お疲れさまでした

今回は、EclipseでSpring BootとThymeleafの実行環境を構築しました。
少しでも参考になれば幸いです。