【Java Web入門 #14】Thymeleafの利用（１） | Eclipseで開発環境作成

2025.03.14

前回までの記事では、JavaのWebアプリケーションの最も基本的なテンプレートエンジンとしての JSPの利用方法と、JSP上で利用できるアクションやタグライブラリの利用方法について説明しました。

今回の記事では、JavaのWebアプリケーションで利用される代表的なテンプレートエンジンの１つである「Thymeleaf」について、Eclipse 上に Spring Boot アプリケーションを作成して利用する方法を説明します。

1 Thymeleafとは
- 1.1 Thymeleafを利用する目的
- 1.2 Thymeleafのメリット
2 Spring Bootとは
3 Spring Bootプロジェクトの作成（Eclipse）
4 Thymeleafを用いたページの表示

Thymeleafとは

Thymeleafは、JavaベースのWebアプリケーション開発における強力なテンプレートエンジンです。特に Spring Framework との親和性が高く、多くの開発者に支持されています。

Thymeleafを利用する目的

Thymeleafの主な目的は、Webアプリケーションのプレゼンテーション層（View）とビジネスロジック層（Controller）を明確に分離し、開発効率と保守性を向上させることです。HTMLをベースとした自然な記法で、デザイナーと開発者が協働しやすい環境を提供します。

Thymeleafのメリット

Thymeleaf は、Java のWeb開発で人気のテンプレートエンジンです。

HTMLタグに属性を追加する形でテンプレートを記述するため、デザイナーと開発者が連携しやすく、コードの可読性も向上します。HTMLとして作成されたテンプレートは、アプリケーションに取り込まずにブラウザ上でデザインを確認することも可能です。

　　　参考：Thymeleaf 公式サイト（英語）

特に Thymeleaf は、人気のフレームワークである Spring との組み合わせで大きな効果を発揮します。Spring Boot では、Spring Initializr と呼ばれるサービスを用いることで、Thymeleaf を含む Webアプリケーションの開発環境を自動構築することができます。

条件分岐などの機能も豊富に準備されており、Spring の強力な機能と合わせることで複雑なページを効率的に開発したり、保守性の高いWebアプリケーションの開発に貢献します。

Spring Bootとは

Spring Boot はJavaのアプリケーション開発を大幅に効率化するフレームワークです。Ruby on Rails などに見られる CoC（convention over configuration・設定より規約）という考え方を採用し、複雑なアプリケーションの設定作業が大幅に削減されています。

　　　参考：Spring Boot 公式サイト（英語）

サーバーの設定ファイルに定義をまとめるのではなく、クラスやメソッド、変数などに役割に応じたアノテーションを付加することで、様々な動作を制御することが可能です。

　　　参考：Spring Boot ドキュメント

また、Spring Bootは、TomcatなどのWebアプリケーションコンテナを内蔵した形で作成できるため、別途動作環境を用意する必要がありません。アプリケーションをビルドすればすぐに実行が可能で、軽量で独立したアプリケーション開発にも適しており、マイクロサービスの開発なども強力にサポートします。

Spring Bootプロジェクトの作成（Eclipse）

まずは Thymeleaf を利用するための Spring Boot プロジェクトを作成してみましょう。

過去の記事（【Java入門】第6回　IDE（統合開発環境）を使ってみよう）でご紹介した Pleiades All in One のJavaパッケージ（またはUltimateパッケージ）を利用している場合などは、簡単に SpringBoot プロジェクトを作成することができます。

新規プロジェクトの作成時に「Spring Boot」フォルダが表示されるかを確認する

まず、Eclipse上で「ウィザードを選択」画面を表示して、作成可能なプロジェクトの一覧に「Spring Boot」のフォルダが表示されるかどうかを確認します。

「ウィザードを選択」画面は、メニューの「ファイル」（またはプロジェクト・エクスプローラーやパッケージ・エクスプローラー上で右クリック）　→　「新規」から　「その他」を選択して表示します。

作成可能なプロジェクトの一覧に「Spring Boot」フォルダが表示されている場合は、引き続き Spring Boot プロジェクトの作成を行います。

「Spring Boot」フォルダが表示されている場合
（Spring Boot プロジェクトの作成）

「ウィザードを選択」画面で、「Spring Boot」の中から「Spring スターター・プロジェクト（Spring Initializr）」を選択し、「次へ」ボタンをクリックします。

次に「新規 Spring スターター・プロジェクト（Spring Initializr）」画面で、プロジェクト名や利用する言語、作成する Java ソースのパッケージ名などの設定を行います。

内容を確認したら、「次へ」ボタンをクリックします。今回はタイプを「Maven」に指定して、残りの項目はデフォルト設定のまま進めます。（必要に応じて変更してもOKです）

「新規 Spring スターター・プロジェクト依存関係」画面では、作成するプロジェクトで利用するライブラリを選択します。
上部の「使用頻度高：」のエリアには、よく Spring Boot アプリケーション上で利用されるライブラリが表示されています。「使用頻度高：」のエリアに表示されていないライブラリは、左下の枠内から選択します。

デフォルトでは「Thymeleaf」は選択されていないため、チェックを付けて「完了」をクリックします。
選択したライブラリは、ビルドツールである Maven（または Gradle）により、依存するライブラリを含めてダウンロードされます。

Eclipse上に Spring Boot プロジェクトが作成されました！
※プロジェクトの作成時に、必要なライブラリがビルドツールによりダウンロードされるため、完了までには１～２分程度時間がかかる場合があります。

「Spring Boot」フォルダが表示されない場合
（Spring Tools プラグインのインストール）

プロジェクトの新規作成時に「Spring Boot」の項目が表示されない場合は、以下の手順で Spring Tools プラグインを Eclipse に追加します。

１．Eclipse の上部メニューの「ヘルプ」から「Eclipse マーケットプレース」（Eclipse Marketplace）を開きます。

２．「Spring Tools」で検索、表示された『Spring Tools（aka Spring Tool Suite）』を選択してインストールします。

Spring Tools プラグインの追加後、新規プロジェクトの作成時に「Spring Boot」フォルダが表示されるようになりますので、上記の手順で Spring Boot プロジェクトを作成してください。

Thymeleafを用いたページの表示

表示するHTML（テンプレート）の作成

Thymeleaf で表示するテンプレートは、通常のHTMLの形式で作成することができます。

HTML

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
  </head>
  <body>
    <p>こんにちは、 [[${name}]]さん。</p>
  </body>
</html>

JSPと異なる点として、HTMLファイルとしてテンプレートを作成することにより、Webアプリケーションを通さなくてもブラウザ上で直接表示（デザイン）を確認することができます。

これにより画面のデザインとアプリケーション側の処理（ロジック）がより明確に分離され、デザイナーと開発者の作業分担や連携を、より容易かつ円滑に行うことができます。

Controllerクラスの作成

次に、作成したHTMLテンプレートにアクセスするための Controller クラスを作成します。

今回は、Mainクラス（DemoApplication.java）があるフォルダに「controller」フォルダを作成し、その中に以下のクラス（SampleController.java）を作成します。

Java

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;

@Controller
public class SampleController {

	@GetMapping("/")
	public String sample(Model model) {
	
    // テンプレートの ${name} に埋めこむ値を設定
		model.addAttribute("name", "knovus");
		
		// テンプレート「sample.html」を利用 
		return "sample";
	}
	
	@PostMapping("/")
	public String samplePost(@RequestBody String entity, Model model) {
		return sample(model);
	}
}

SampleController クラスを Spring Boot アプリケーションの Controller クラスとして動作させるために、クラスの宣言の上にアノテーション（@controller）を記述します。

また、Get、Post に対応するメソッドに対してもアノテーション（@GetMapping、@PostMapping）を記述し、対応するURIを指定します。ここでは URI に "/" を指定していますので、Webアプリケーションのトップへのアクセス時にそれぞれのメソッドが呼び出されます。

Spring Boot アプリケーションの起動

アプリケーションの起動とブラウザからのアクセス

Eclipse上で作成した Spring Boot アプリケーションを起動するには、パッケージ・エクスプローラーまたはプロジェクト・エクスプローラー上でプロジェクトを右クリック →「実行」→「Spring Boot アプリケーション」の順に選択します。

またショートカットキーを利用して、対象のSpring Boot プロジェクト上で「Alt + Shift + X」を同時に押し、　実行メニューが表示された状態で「B」キーを押すことでも起動できます。

アプリケーションが起動したら、Webブラウザで「http://localhost:8080」にアクセスします。
Spring Boot アプリケーションによって作成された画面が表示できました。

（参考）Tomcat のポートを指定したい場合

Spring Bootアプリケーションは、組み込みのTomcatをデフォルトで使用し、アプリケーションごとに起動します。デフォルトの設定では、全てのSpring Bootアプリケーションは8080番ポートを利用して起動されます。

複数の Spring Boot アプリケーションを起動したり、他のWebアプリケーションと同時に起動したい場合などでは、Spring Boot アプリケーションごとに Tomcat のポートを指定することで、ポートの重複を回避することができます。

Tomcat で利用するポート番号を指定するには、src/main/resources/ フォルダにある設定ファイル（application.propertie または application.yml）に設定を追加します。

・設定ファイルに application.properties を利用している場合は、以下の行を追加します。

server.port=8081

・設定ファイルに application.ymlを利用している場合は、以下の行を追加します。

server:
  port: 8081

ポート番号を8081に変更した場合、Webブラウザからは「http://localhost:8081」で Spring Boot アプリケーションにアクセスできます。

次回以降の記事では、Spring Boot の Contorller クラスから Thymeleaf テンプレートへのデータの受け渡しや、Thymeleaf で利用できる Spring のEL式「SpEL式」について簡単に解説していきます。