Spring BootでView層をマスター！Thymeleafテンプレートの使い方【Spring Boot】

　「Controllerで処理はできたけど、画面にはどう出すの？」と悩んだことはありませんか？本記事では、Spring BootのMVC構成における「View層」の役割と、テンプレートエンジンThymeleafの基本的な使い方を解説します。HTMLとJavaをつなぐ仕組みを学ぶことで、静的なページから動的なWebアプリへと一歩進んだ開発ができるようになります。

💻 View層って何をする場所？

　Spring BootはMVCアーキテクチャ（Model-View-Controller）を採用しています。この中でView層は「画面表示」を担当します。アプリケーションにおいて、ユーザーが最初に目にするのは「画面」＝Viewです。どれだけControllerやService層で正しい処理が行われていても、View層がしっかり設計されていなければ、ユーザーはその成果を確認することができません。View層はまさに「アプリの顔」となる重要なパートです。

　たとえば、Controllerでユーザー情報やメッセージなどのデータを準備しても、それをHTMLに表示する手段がなければ意味がありません。ここで登場するのがテンプレートエンジンであり、Spring BootではThymeleafが標準的に利用されます。

　静的なHTMLファイルでは、表示内容は常に固定されてしまい、「ようこそ、太郎さん」のような個別メッセージを表示することはできません。しかし、Thymeleafを使えば、Controllerで渡したJavaのデータをHTMLに動的に埋め込むことができるため、ユーザーに応じた表示が簡単に実現できます。

　このように、View層は見た目の構築にとどまらず、Controllerとの連携を通じて、動的でインタラクティブなWebアプリケーションの鍵を握る存在なのです。

🌱 Thymeleafとは？Spring Bootに最適なテンプレートエンジン

　Thymeleafは、JavaアプリケーションとHTMLテンプレートを結びつけるためのテンプレートエンジンです。特にSpring Bootと組み合わせて使うことで、動的なWebページの作成が非常にスムーズになります。

　最大の特徴は、「HTMLに直接埋め込める構文でありながら、HTMLとして破綻しない」点です。たとえば、th:text や th:each のような属性を使うことで、HTMLの見た目を壊さずに、Javaオブジェクトの内容を表示・繰り返し処理できます。

🌱 Thymeleafの主な特徴

HTMLファイルをそのままブラウザで表示可能：デザイナーとの分業にも適しており、モック作成や見た目の調整が容易です。
Springとの高い親和性：spring-boot-starter-thymeleaf を導入するだけで、ViewResolverの設定も不要で即利用可能。
式言語（OGNLベース）の表現力：変数参照、条件分岐、繰り返し、URL生成などがテンプレート内で簡潔に記述できます。
セキュリティへの配慮：出力はデフォルトでHTMLエスケープされるため、XSS対策も万全。
フラグメントによる部品化：共通のヘッダーやフッターなどを再利用可能にし、テンプレートの保守性が向上します。

✅ なぜThymeleafがSpring Bootに最適なのか？

Spring MVCにおけるViewResolverとして自動設定され、ほぼノー設定で動作する
@Controller でModelに詰めたデータをHTMLテンプレート上で自然に扱える
application.properties によってテンプレートの読み込み先やキャッシュ設定も柔軟に変更可能

　このように、ThymeleafはSpring BootでWebアプリケーションを作る際に、見た目とロジックの分離を実現しつつ、ユーザーに応じた柔軟な画面表示を可能にする頼れる存在です。

⚙️ プロジェクトにThymeleafを導入する

　Spring Initializrでプロジェクトを作成する際に「Thymeleaf」を依存関係として追加するのが最も簡単な方法です。Spring Initializrの画面で「Dependencies」の検索欄に「Thymeleaf」と入力し、表示された候補をクリックして追加しましょう。これにより、初期設定済みの状態でプロジェクトが作成されます。すでにプロジェクトがある場合は、以下のように手動で追加することもできます。

Mavenの場合（pom.xml）

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Gradleの場合（build.gradle）

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

　またThymeleafはapplication.propertiesやapplication.yamlで細かく設定することができます。以下はその設定内容です。

application.properties での設定

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false

application.yaml での設定

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML
    encoding: UTF-8
    cache: false

　以下に、application.properties や application.yaml で設定できる主な項目とその意味を表形式でまとめます：

プロパティ名	意味	デフォルト値	補足
`spring.thymeleaf.prefix`	テンプレートファイルのディレクトリパス	`classpath:/templates/`	カスタムパスに変更可能
`spring.thymeleaf.suffix`	テンプレートファイルの拡張子	`.html`	`.xhtml` なども指定可能
`spring.thymeleaf.mode`	テンプレートモード（解析方法）	`HTML`	`LEGACYHTML5`, `XML`, `TEXT` なども指定可能
`spring.thymeleaf.encoding`	文字エンコーディング	`UTF-8`	特に理由がなければUTF-8推奨
`spring.thymeleaf.cache`	テンプレートのキャッシュ使用有無	`true`	開発中は `false` にすると便利
`spring.thymeleaf.enabled`	Thymeleafを有効にするか	`true`	無効にするとテンプレートは処理されない
`spring.thymeleaf.check-template-location`	テンプレートパスの存在確認	`true`	存在しないと起動時に警告

　これらを適切に設定することで、開発効率やアプリケーションの柔軟性が大きく向上します。

　Thymeleafのテンプレートファイルは src/main/resources/templates/ 配下に配置します。このパスはSpring Bootのデフォルト設定で、自動的にViewとして解釈されます。

🔰 Thymeleafの超基本的な使い方！

　Spring BootとThymeleafを使って、ControllerのデータをHTMLテンプレートに埋め込む基本の流れを見ていきましょう。ここでは「こんにちは、○○さん！」と名前を出力するシンプルな例を使います。○○さんの部分はコントローラーから動的にThymeleafに渡してみます。

Controller クラスの実装

@Controller
public class HelloController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("name", "太郎");
        return "hello"; // resources/templates/hello.html を表示
    }
}

　このコードでは、Model オブジェクトに name という属性を追加し、それを hello.html テンプレートに渡しています。

　model.addAttribute("name", "太郎") という記述は、テンプレートに渡すデータを準備している部分です。第一引数がテンプレートで使用される変数名（ここでは name）、第二引数がその変数に対応する値（ここでは “太郎”）です。Thymeleafのテンプレートでは ${name} と書くことで、この値を参照することができます。この仕組みにより、Controllerからテンプレートへのデータ連携が非常に簡単かつ明示的に行えます。

HTMLテンプレート (`hello.html`)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1 th:text="'こんにちは、' + ${name} + 'さん！'"></h1>
</body>
</html>

　このテンプレートでは、th:text 属性を使って、Controllerから受け取った name の値をHTMLに表示しています。

ブラウザでの表示

　上記のコードを実行してブラウザで http://localhost:8080/hello にアクセスすると、次のような出力が表示されます：

💡 th:text の意味

Thymeleafの th:text は、タグの中身を置き換える属性です。

<h1 th:text="'Hello ' + ${name}">placeholder</h1> と書けば、<h1>Hello 太郎</h1> として出力されます。

単なる ${name} だけでなく、文字列との結合や条件式も記述できます。

　その他にもThymeleafの構文はいくつもあります。Thymeleafのチートシートも用意指定いるので参考にしてみてください。

Thymeleafチートシート【Spring Boot】

　このように、Thymeleafの構文を使えば、HTMLファイルを壊すことなく動的なコンテンツ表示が可能になります。

⚠️⚠️⚠️よくある間違いとその対策⚠️⚠️⚠️

❌ 反例：Modelを使わずに文字列を返す

@GetMapping("/bad")
public String bad() {
    return "<h1>Hello</h1>"; // View名として解釈されてしまう
}

→ 文字列を返してしまうと、それがテンプレート名と解釈され、存在しないテンプレートとしてエラーになる。

✅ 正しい方法：Modelでデータを渡してテンプレートを返す

@GetMapping("/good")
public String good(Model model) {
    model.addAttribute("message", "Welcome");
    return "welcome";
}

❌ 反例：テンプレートファイルが `templates` フォルダ外にある

src/main/resources/public/hello.html

→ Spring Bootは templates フォルダをテンプレート探索パスとしているため、ここに置かれていないと認識されない。

✅ 正しい方法：正しい場所にテンプレートを配置する

src/main/resources/templates/hello.html

❌ 反例：`th:text` を使わずに `${}` を直接書く

<p>${name}</p> <!-- これはプレーンテキストとして扱われる -->

→ これはテンプレートとして処理されず、そのまま文字列が表示される。

✅ 正しい方法：Thymeleafの属性で埋め込む

<p th:text="${name}"></p>

❌ 反例：文字エンコーディングの設定漏れ

テンプレートやControllerに日本語を含む場合、エンコーディングの不一致で文字化けが発生する。

✅ 正しい方法：UTF-8を明示する

HTMLに <meta charset="UTF-8">
application.properties に spring.thymeleaf.encoding=UTF-8
Javaファイルを UTF-8 で保存

　こうした間違いは初心者にありがちですが、一度理解してしまえば確実に回避できます。

まとめ

　Thymeleafは、Spring Bootに自然に組み込めるテンプレートエンジンで、View層の構築を強力にサポートします。Controllerで処理したJavaのデータを、HTMLでわかりやすく出力できることで、MVCの分離が明確になり、保守性の高いアプリケーション開発が可能になります。

　Thymeleafの基礎を押さえることで、画面とロジックがつながり、Webアプリ開発の楽しさがぐっと広がるはずです。

　次回は、ThymeleafによるHTML出力から一歩進んで、JSON形式を用いたREST APIの基本構成について解説します。入力と出力の仕組みを理解することで、より柔軟で実用的なWebアプリケーション開発へとつなげていきましょう。

Spring BootでView層をマスター！Thymeleafテンプレートの使い方【Spring Boot】

💻 View層って何をする場所？

🌱 Thymeleafとは？Spring Bootに最適なテンプレートエンジン

🌱 Thymeleafの主な特徴

✅ なぜThymeleafがSpring Bootに最適なのか？

⚙️ プロジェクトにThymeleafを導入する

Mavenの場合（pom.xml）

Gradleの場合（build.gradle）

application.properties での設定

application.yaml での設定

🔰 Thymeleafの超基本的な使い方！

Controller クラスの実装

HTMLテンプレート (`hello.html`)

ブラウザでの表示

💡 th:text の意味

⚠️⚠️⚠️よくある間違いとその対策⚠️⚠️⚠️

❌ 反例：Modelを使わずに文字列を返す

✅ 正しい方法：Modelでデータを渡してテンプレートを返す

❌ 反例：テンプレートファイルが `templates` フォルダ外にある

✅ 正しい方法：正しい場所にテンプレートを配置する

❌ 反例：`th:text` を使わずに `${}` を直接書く

✅ 正しい方法：Thymeleafの属性で埋め込む

❌ 反例：文字エンコーディングの設定漏れ

✅ 正しい方法：UTF-8を明示する

まとめ

コメントを残すコメントをキャンセル

サイト内検索

デザインパターン講座

カテゴリー

アーカイブ

💻 View層って何をする場所？

🌱 Thymeleafとは？Spring Bootに最適なテンプレートエンジン

🌱 Thymeleafの主な特徴

✅ なぜThymeleafがSpring Bootに最適なのか？

⚙️ プロジェクトにThymeleafを導入する

Mavenの場合（pom.xml）

Gradleの場合（build.gradle）

application.properties での設定

application.yaml での設定

🔰 Thymeleafの超基本的な使い方！

Controller クラスの実装

HTMLテンプレート (hello.html)

ブラウザでの表示

💡 th:text の意味

⚠️⚠️⚠️よくある間違いとその対策⚠️⚠️⚠️

❌ 反例：Modelを使わずに文字列を返す

✅ 正しい方法：Modelでデータを渡してテンプレートを返す

❌ 反例：テンプレートファイルが templates フォルダ外にある

✅ 正しい方法：正しい場所にテンプレートを配置する

❌ 反例：th:text を使わずに ${} を直接書く

✅ 正しい方法：Thymeleafの属性で埋め込む

❌ 反例：文字エンコーディングの設定漏れ

✅ 正しい方法：UTF-8を明示する

まとめ

最新の投稿

SNSでもご購読できます。

コメントを残す コメントをキャンセル

サイト内検索

デザインパターン講座

カテゴリー

アーカイブ

HTMLテンプレート (`hello.html`)

❌ 反例：テンプレートファイルが `templates` フォルダ外にある

❌ 反例：`th:text` を使わずに `${}` を直接書く

コメントを残すコメントをキャンセル