Spring BootとThymeleafをセットで使うべき4つの理由！

本ページはプロモーションが含まれています

2025.09.19

「Thymeleafとは何？」

「Thymeleafを使ってアプリを開発したい」

Spring BootでWebアプリの土台を作った人は、次のステージであるThymeleafというシステムを使うと知って「難しそうで私には無理かも…」と思っているのではないでしょうか。

ネットでThymeleafを検索すると、システムの仕様や導入した場合の有用性といった難解な解説が多く、不安になるのは当然です。

しかし、Thymeleafの設定方法と書き方だけを習得するなら、1時間程度の学習で最低限の機能が実装できます。

そこで、本記事ではJavaによるWebアプリ開発の経験があるみずがめが、以下の内容を紹介します。

  • Spring BootとThymeleafがセットで使われる4つの理由
  • Thymeleafを利用する方法3STEP

この記事を最後まで読むことで、Thymeleafの基礎知識が習得できます。

記事後半では、貼り付けて実行できるサンプルコードを掲載しているため、ぜひチャレンジしてみてください。

Spring BootとThymeleafがセットで使われる4つの理由

Spring BootではThymeleafというテンプレートエンジンがよく使われています。

テンプレートエンジンとは、作っておいたHTMLファイルに計算結果といったデータを差し込んで完成させる仕組みです。

一般的なHTMLだけでは「固定された画面」しか作れませんが、テンプレートエンジンを使うとユーザーごとに異なる表示ができます。

みずがめ
みずがめ

ログイン画面のユーザー名表示機能やECサイトの合計金額などは、テンプレートエンジンを使います！

テンプレートエンジンは多くありますが、中でもThymeleafは以下の点で優れています。

  1. Spring Bootが公式に推奨している
  2. 簡単に導入できる
  3. ブラウザの検証機能で確認できる
  4. 新しい文法を覚える必要がない

本記事では、Spring Bootと併用した場合の利点を中心に解説しています。

1.Spring Bootが公式に推奨している

ThymeleafはSpring Bootの公式サイトで使用をおすすめしているテンプレートエンジンです。

Spring Bootの公式ドキュメント「Build Systems」では、デフォルトのシステムとして紹介されています。

また、「Thymeleaf Web 画面の作成」では、Spring BootをサポートしているEclipseやIntelliJ IDEAで、Thymeleafを使うための手順が詳しく書かれています。

ThymeleafはSpring Bootの公式サイトで利用を推奨しているため、Webアプリ初心者に適しています。

2.簡単に導入できる

Thymeleafは、簡単に導入できるテンプレートエンジンです。

EclipseとIntelliJ IDEAの場合、Spring Bootのプロジェクトを選んで「Thymeleaf」にチェックを入れれば準備が完了します。

ファイルの作成も簡単で、指定された場所に拡張子「.html」で保存するだけです。

Thymeleafは、特別な設定が不要なシステムといえます。

3.ブラウザの検証機能で確認できる

Thymeleafは、ブラウザの検証機能でソースコード（プログラムのテキスト）が確認できます。

Javaで有名なテンプレートエンジンのJSPでは、コードが正常に表示されなかったり、エラーになったりします。

Thymeleafならブラウザで通常のHTMLとして表示され、一時的なコードの修正（更新で元に戻る）も可能です。

ソースコードがHTMLとして認識される仕様は、デザインのビフォーアフターを確認するのに重宝します。

4.新しい文法を覚える必要がない

Thymeleafは新しい文法を覚える必要がないテンプレートエンジンです。

JSPでは、<% %>や<%= %>といった特殊な書き方を覚える必要があり、コードが読みにくくなるため習得難易度は高めです。

しかし、Thymeleafの場合は、HTMLのタグにth:を加えるだけで利用できます。

ThymeleafはHTMLを知っていれば誰でも使えるシステムです。

Spring BootでThymeleafを使う方法3STEP

Spring BootでThymeleafを使うには、プロジェクト立ち上げの段階で「Thymeleaf」にチェックを入れる必要があります。

みずがめが執筆した『【初心者向け】Spring BootをEclipseで使う手順を4STEPで解説！』の記事でThymeleafの設定方法を解説中です。これからSpring Bootでプロジェクトを立ち上げる人はぜひご活用ください。

【2025年版】Spring BootをEclipseで使う手順を4STEPで解説！
Spring BootをEclipseで使用する際の手順は少し複雑です。本記事ではSpring Bootの特徴や初心者にお勧めする理由も解説します。記事後半ではスクショ付きで手順を解説しているため、ぜひご活用ください。
think-think.com
2025.08.23

コントローラーを作成したら以下のステップでThymeleafを使います。今回はEclipseを使って進めていきます。

  1. ビューの作成
  2. コントローラーの編集
  3. ブラウザで実行

ビューとはMVCのV（ビュー）を指し、ユーザーのデバイスに表示される画面を担当するHTMLファイルです。Thymeleafはビューを効率的に作成するために使用します。

コントローラーとはMVCのC部分を指し、ユーザーの動作に合わせて必要なファイルを呼び出したり、データを受け渡したりするWebアプリの司令塔のようなものです。

ファイルを編集し、次にコントローラーを修正してWebアプリの表示画面を作っていきます。

ファイルの保存場所に気を付けて作業を進めましょう。

1.ビューの作成

Spring BootのプロジェクトにThymeleafでビュー（HTMLファイル）を作っていきます。

Eclipseを立ち上げて、編集画面を表示させます。

[boot][devtools]とオレンジ色で書かれているプロジェクトは、Spring Bootで作られています。上画像のように『CafeOrder[boot][devtools]』をクリックして展開してください。

「src/main/resources」をクリックして、中にあるファイルを表示させます。

展開すると「templates」と書かれているフォルダ（ファイルを格納するもの）が見つかるはずです。Webアプリを構成するMVCのV（ビュー）は、すべてtemplatesの中に作ります。

マウスカーソルを「templates」に合わせた状態で右クリックします。

「新規（W）」にマウスカーソルを合わせます。

追加で右側に表示されたメニュー画面の中にある「ファイル」をクリックしてください。

ファイル名を決める画面が表示されます。

表示されたメニュー画面の中央より下の「ファイル名（M）:」に「order.html」と入力して「完了（F）」をクリックします。

templatesの中に「order.html」が作られていれば成功です。上画像のようにパッケージエクスプローラー（左側のエリア）とタブの2か所で作ったHTMLファイルが確認できます。

上に表示されているタブが「order.html」になっていることを確認します。違う場合はこれから編集するHTMLファイルに切り替えましょう。

「以下のコードをそのままコピー＆ペーストすれば動作します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>カフェ注文フォーム</title>
</head>
<body>
    <h1 th:text="${message}"></h1>

    <form action="/order" method="post">
        <label>商品を選んでください：</label>
        <select name="item">
            <option value="coffee">コーヒー</option>
            <option value="tea">紅茶</option>
            <option value="sandwich">サンドイッチ</option>
        </select>
        <button type="submit">注文する</button>
    </form>
</body>
</html>

2.コントローラーの編集

コントローラーの中身を作成したビュー（HTMLファイル）に合わせて編集します。

「src/main/java」をクリックして中にあるファイルを表示させます。

「com.example.cafeorder」をクリックします。

「controller」をクリックして展開してください。

前回作成したコントローラーの中身が確認できます。この部分をorder.html（ビュー）と連動するように変えていきましょう。

以下のコードをそのままコピー＆ペーストすれば動作します。

package com.example.cafeorder.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.RequestParam;

@Controller
public class CafeOrderController {

    // 注文フォームを表示
    @GetMapping("/order")
    public String showOrderForm(Model model) {
        model.addAttribute("message", "カフェ注文フォームへようこそ！");
        return "order"; // order.html を表示
    }

    // フォームから送信された注文を受け取る
    @PostMapping("/order")
    public String submitOrder(@RequestParam("item") String item, Model model) {
        model.addAttribute("message", "ご注文ありがとうございます！ 選んだ商品: " + item);
        return "order"; // order.html を再び表示
    }
}

「Model model」とは、コントローラーからビュー（HTML）にデータを渡すための入れ物を指します。

「model.addAttribute」とは、「Model model」に具体的なデータを入れるコードです。

上記のサンプルコードでは「message」という名前を付けて「”ご注文ありがとうございます！ 選んだ商品: ” + item」というデータを「Model model」の中に入れています。

ビュー（Thymeleaf）側で ${message}と書くことで、中にある「”ご注文ありがとうございます！ 選んだ商品: ” + item」を表示しています。

3.ブラウザで実行

コントローラーまで編集できたら、実行してWebアプリの動作を確認します。

画面上部のメニューバーにある「▷」をクリックしてWebアプリを起動させましょう。

下側に表示される部分に上画像の表示が出たら、起動成功です。

Google Chromeを起動します。

「http://localhost:8080/order」と入力してください。「/order」の部分は、今回作ったorder.html（ビュー）の場所を示します。

Thymeleafで作成したページが表示されます。

選択機能を使って商品を選択してみてください。

「注文」をクリックしましょう。

画面上部に表示されていた「カフェ注文フォームへようこそ！」が「ご注文ありがとうございます！選んだ商品：○○」と切り替われば成功です。

何度かトライして感覚をつかんだらMVCのM（モデル）にチャレンジしてみてください。モデルとはデータ処理を担当する部分で、注文内容の保存や追加、削除ができます。

コメント

タイトルとURLをコピーしました