1. Thymeleafとは何か？

Thymeleafは、JavaのWebアプリケーションでよく使われるテンプレートエンジンです。Spring Bootと一緒に利用することで、サーバー側で動的にHTMLを生成できます。ThymeleafはHTMLファイルをテンプレートとして扱い、動的なデータを画面に表示する仕組みを提供します。Thymeleafの特徴として、ブラウザで直接HTMLを開いても表示が崩れにくく、実際の画面イメージを確認しながら開発できる点があります。

Spring BootとThymeleafを使うことで、コントローラから渡されたデータを画面に埋め込みながら、HTML構造をそのまま使うことができます。例えば、ユーザーの名前を動的に表示したり、条件に応じて表示内容を切り替えたりすることが簡単にできます。Spring Bootでは、Thymeleafを組み合わせることで、効率よく動的なWebページを作ることができます。

Thymeleafは、JavaのWeb開発における重要な役割を担っていて、今では多くの企業や個人開発者が採用しています。初心者にとっても、HTMLとJavaの連携を理解しやすく、学習を進めやすい技術です。

2. Spring BootプロジェクトにThymeleafを導入する流れ

ThymeleafをSpring Bootプロジェクトに導入する手順を、Pleiadesを使って詳しく説明します。まずは、Pleiadesで新しいSpring Bootプロジェクトを作成しましょう。Pleiadesは、Eclipseベースの統合開発環境で、初心者でも扱いやすいツールです。

1. Pleiadesを起動したら、「新規」メニューから「Springスタータープロジェクト」を選択します。次に、プロジェクト名やパッケージ名を入力します。ここでは、Gradleをビルドツールとして選択します。PleiadesはGradleにも対応しているので安心です。

2. プロジェクト作成時に表示される「依存関係」の画面で、「Thymeleaf」を選択します。Pleiadesの便利な機能で、チェックを入れるだけで必要な依存関係が追加されます。

3. プロジェクトが作成されたら、実際にThymeleafの設定が反映されているか確認してみましょう。Spring Bootは自動的にThymeleafの設定を行ってくれるので、特別な設定ファイルを作成する必要はありません。

例えば、Gradleのbuild.gradleには、以下のようにspring-boot-starter-thymeleafが追加されています。


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

これで、Spring BootプロジェクトにThymeleafを導入する準備が整いました。次のステップでは、実際にHTMLテンプレートを配置して、動的な画面を作る方法を見ていきましょう。

3. Thymeleafテンプレートの基本的な構成

Thymeleafテンプレートを使うには、HTMLファイルを専用の場所に配置する必要があります。Spring Bootでは、プロジェクト直下のsrc/main/resources/templatesフォルダにHTMLファイルを置くだけで、テンプレートとして自動的に認識されます。拡張子は必ず.htmlにしてください。

この場所にファイルを置くことで、GradleやPleiadesの構築後に特別な設定をせずともThymeleafが画面として利用できるようになります。例えば、home.htmlという名前で下記のようなファイルを用意します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ホーム画面｜Thymeleaf入門</title>
</head>
<body>
    <h1 th:text="${message}">こんにちは、Thymeleaf！</h1>
</body>
</html>

上記の例では、HTML内にth:text属性を使って、コントローラから渡されたmessage変数を表示する仕組みになっています。ThymeleafではこのようにHTMLをベースにして、属性を追加するだけで動的な画面が作れます。

また、Thymeleafテンプレートはブラウザで直接開いても構文エラーになりにくく、静的ページを編集しながら動作確認もできるので、初心者にとって取り扱いやすい点が魅力です。

4. コントローラでビューを返す基本的な仕組み

次に、@Controllerアノテーションを使ってビューを返す基本的な仕組みを確認します。Spring Bootでは、コントローラクラスでHTMLテンプレート名を返すだけで、対応するテンプレートが自動的に表示されます。


@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "ようこそ、Thymeleafの世界へ！");
        return "home";
    }
}

上記のHomeControllerでは、/というURLにアクセスされたときにhome.htmlテンプレートを返すように設定しています。Modelオブジェクトにmessageという変数を登録し、HTML側で表示できます。

この仕組みにより、Java側で処理したデータを簡単にHTMLに反映できるのがThymeleafの魅力です。コントローラは@RestControllerではなく、@Controllerを使うことで、ビュー名を返して画面表示が可能になります。

また、Pleiades上でアプリケーションを実行すれば、http://localhost:8080/にアクセスするだけで、以下のように画面が表示されます：


ようこそ、Thymeleafの世界へ！

このように、HTMLテンプレートの配置とコントローラの簡単な設定だけで、動的なWebページが動く仕組みが完成します。初心者でも数分で実行できる流れなので、まずはこの構成をマスターしましょう。

5. Thymeleafの基本構文の例（変数展開、条件分岐など）

Thymeleafでは、...のように変数を展開できます。以下は、コントローラで渡したメッセージとユーザー名を表示する例です。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>サンプル画面｜Thymeleaf構文例</title>
</head>
<body>
    <h1 th:text="${message}">メッセージ表示</h1>
    <p th:text="'こんにちは、' + ${userName} + 'さん！'">ユーザー名表示</p>
    <div th:if="${isLoggedIn}">
        <p>現在ログイン中です。</p>
    </div>
    <div th:unless="${isLoggedIn}">
        <p>ログインしていません。</p>
    </div>
</body>
</html>

上記では、th:textでメッセージやユーザー名を表示し、th:ifやth:unlessでログイン状態による表示切替をしています。これがThymeleafの基本構文です。

6. よくあるエラーと解決方法

Thymeleafを使っていてよく出るエラーには、以下のようなものがあります。

① テンプレートが見つからないエラー

TemplateInputException: Error resolving templateというエラーが出る場合、HTMLファイルがsrc/main/resources/templatesにないか、拡張子が.htmlではない可能性があります。ディレクトリと拡張子を再確認してください。

② 変数がnullの場合のエラー

EL1008E: Variable or field 'xxx'...というエラーが出る場合、コントローラで該当の変数をmodel.addAttributeできていない可能性があります。以下のように、必ず登録するようにしましょう。


@Controller
public class SampleController {

    @GetMapping("/sample")
    public String sample(Model model) {
        model.addAttribute("userName", "太郎");
        model.addAttribute("isLoggedIn", true);
        return "sample";
    }
}

③ HTMLにtypoがある場合

例えば、th:testのように誤って書いた場合、正しく処理されずに画面が真っ白になったりエラーになります。属性名を正しく書くように注意してください。

④ Gradleの依存関係が不足している

稀に、spring-boot-starter-thymeleafが追加されていない場合があります。build.gradleを開いて、以下のように確認しましょう。


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