先生と生徒の会話形式で理解しよう

生徒

「Spring Bootで最初のプロジェクトを作るときに、REST APIとThymeleafの両方を使えるようにしたいんですが、どうしたらいいですか？」

先生

「それはよい視点ですね。実は最初に雛形をきちんと作っておくと、REST APIもHTML画面も両方に対応できる設計が簡単になりますよ。」

生徒

「具体的にどういう構成にすれば良いんですか？」

先生

「では、Spring BootでRESTとThymeleafを両対応にするためのプロジェクト雛形を一緒に作ってみましょう！」

1. Spring BootでRESTとThymeleafの両方を使う理由

Spring Bootでは、REST APIによってJSON形式でデータを提供し、ThymeleafによってHTMLテンプレートで画面を表示することができます。両方に対応しておくことで、WebページとAPIエンドポイントの両立ができ、今後の開発や拡張がしやすくなります。

例えば、HTML画面でのユーザー操作と、JavaScriptの非同期通信（Ajax）によるREST API呼び出しを組み合わせれば、柔軟なWebアプリケーションを構築できます。

2. Spring Initializrで雛形プロジェクトを作成する

Spring Initializrを使えば、最小限の設定でSpring Bootプロジェクトを作成できます。以下のように設定しましょう：

Project： Maven
Language： Java
Spring Boot： 最新安定版
Dependencies：
- Spring Web
- Thymeleaf

この構成で、REST用のControllerとThymeleaf用の画面テンプレートを同時に扱えるプロジェクトの土台が整います。

3. パッケージ構成の基本設計

初心者の方でも管理しやすいように、以下のような構成がおすすめです：


src/
├── main/
│   ├── java/
│   │   └── com.example.demo/
│   │       ├── controller/
│   │       │   ├── ViewController.java
│   │       │   └── ApiController.java
│   │       └── DemoApplication.java
│   └── resources/
│       ├── templates/
│       │   └── index.html
│       └── application.properties

ViewControllerではThymeleafを使ったHTML表示を、ApiControllerではREST APIのレスポンス処理を行います。

Spring FrameworkやThymeleafを使った Webアプリ開発の全体像をやさしく理解したい人には、この入門書が定番です。

Spring Framework超入門をAmazonで見る

※ Amazon広告リンク

4. REST APIのControllerの書き方

JSON形式のレスポンスを返すControllerは@RestControllerを使って記述します。以下が基本形です：


package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Map;

@RestController
public class ApiController {

    @GetMapping("/api/message")
    public Map<String, String> getMessage() {
        return Map.of("message", "これはREST APIのレスポンスです！");
    }
}

5. HTMLを返すControllerの書き方（Thymeleaf対応）

Thymeleafテンプレートを返すControllerは@Controllerを使い、メソッド内でModelを使って値を画面に渡します。


package com.example.demo.controller;

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

@Controller
public class ViewController {

    @GetMapping("/")
    public String showIndex(Model model) {
        model.addAttribute("title", "Thymeleafのサンプル画面");
        return "index";
    }
}

6. Thymeleafテンプレートの書き方

テンプレートファイルはsrc/main/resources/templatesに置きます。拡張子は.htmlにし、以下のようにth:textで値を埋め込みます：


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}">タイトル</title>
</head>
<body>
    <h1 class="text-primary">Thymeleaf テンプレート</h1>
    <p th:text="${title}">ここにタイトルが表示されます。</p>
</body>
</html>

7. アプリケーション設定（application.properties）

基本的にはデフォルト設定で動きますが、開発中は以下の設定を加えておくと便利です：


spring.thymeleaf.cache=false
server.port=8080

spring.thymeleaf.cache=falseとすることで、HTMLを修正した際にサーバーを再起動しなくても即時反映されます。

8. 実行と確認方法

Spring Bootアプリを起動して、次のURLにアクセスしてみましょう：

http://localhost:8080/ → Thymeleafで描画されたHTML画面
http://localhost:8080/api/message → REST APIのJSONレスポンス

それぞれが正しく表示されれば、RESTとThymeleafの両対応プロジェクトの完成です！

9. よくあるエラーと対処法

初心者がつまずきやすいポイントと対処法をまとめました：

HTTP 404 エラー： URLのパスやControllerのアノテーションを再確認
テンプレートが表示されない： templatesフォルダの位置が正しいか確認
JSONが返らない： @RestControllerの指定ミスやメソッドが@GetMappingになっているかを確認

まとめ

今回のSpring Boot初期雛形づくりでは、REST APIとThymeleafをひとつのプロジェクト構成で自然に共存させるための基礎的な流れを丁寧にたどりました。とくに、両方のControllerを役割別に整理し、画面描画とデータ提供を分離した構成は、将来的な機能拡張や保守性の向上につながる重要な設計要素となります。さらに、Thymeleafによるテンプレート描画とRESTによるJSONレスポンスを両立させることで、柔軟なWebアプリケーションの基盤を整えることができました。こうした構成は、Ajax通信をはじめ、非同期データ取得によるユーザー体験の向上にも大きく寄与し、最新のWeb開発において欠かせない要素となります。また、パッケージ構成を明確に保つことは、Spring Boot開発に慣れていない初心者にとっても理解しやすく、API処理と画面処理の混在を避ける効果があります。controllerディレクトリ内にREST専用とThymeleaf専用のControllerを分けて設置し、templatesディレクトリに画面テンプレートをまとめて管理することで、作業導線がわかりやすく整理されます。こうした構成は、開発が進むにつれて関係ファイルが増加しても迷いにくく、効率的な開発を支えてくれます。 application.propertiesの基本設定も、開発効率を高めるうえで見逃せません。とくにThymeleafキャッシュを無効化しておくことで、画面修正が即座に反映され、テンプレート調整のストレスを軽減します。加えて、エラー原因の切り分けでは、URLのパスやアノテーションの確認、フォルダ構造の再点検といった基本的なチェックが非常に効果的です。これらを意識して進めることで、スムーズに開発を進めるための土台を整えることができます。以下に、このまとめで振り返ったポイントを再確認できる簡単なサンプルコードを記載します。クラス名やディレクトリ構成は先の例と共通の形式を使い、より実際のプロジェクトに近いイメージで学べるようにしています。

サンプルプログラム（まとめ用）


package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Map;

@RestController
public class SummaryApiController {

    @GetMapping("/api/summary")
    public Map<String, String> getSummary() {
        return Map.of("result", "RESTとThymeleafを両立させたSpring Boot構成が理解できました。");
    }
}





    <meta charset="UTF-8">
    <title>まとめ画面</title>


    <h1 class="text-success">学習のまとめ</h1>
    <p th:text="'今回学んだ内容：' + ${summary}">まとめが表示されます。</p>

先生と生徒の振り返り会話

生徒

「REST APIとThymeleafを同じSpring Bootプロジェクトで扱う意味がよくわかりました。特に、役割別のController分けが開発しやすい理由も理解できました。」

先生

「そうですね。構造を整えることで、後から機能追加する際にも迷わず進められますよ。実行URLの確認やテンプレートの配置も非常に大切です。」

生徒

「テンプレートのキャッシュ設定も便利でした。すぐ反映されるので調整が楽になりますね。」

先生

「その通りです。今回の雛形は応用範囲が広いので、この構成を基盤にして色々なWebアプリケーションを作れますよ。」

生徒

「はい！RESTでデータを返しながら、Thymeleafで画面を整える仕組みをもっと活用してみたいです。」