Thymeleaf とは

Thymeleaf は Spring Boot 標準のテンプレートエンジン。最大の特徴は th: 属性で記述するため素の HTML としてブラウザで開けること。デザイナーがそのまま編集できるため、JSP に比べて開発フローが分業しやすい。

セットアップ (Spring Boot)

    org.springframework.boot
    spring-boot-starter-thymeleaf

src/main/resources/
├── templates/        ← Thymeleaf テンプレート (デフォルト)
│   ├── index.html
│   └── user/
│       ├── list.html
│       └── detail.html
└── static/           ← CSS / JS / 画像
    ├── css/app.css
    └── js/app.js

基本記法

    
    
    




山田太郎


紹介文


詳細



管理者です
一般ユーザーです



    
管理者
    
ユーザー
    
ゲスト




    
名前




    1
    名前

フォーム

    
    
    エラー

    

    
    男
    女

    
    
        選択してください
        県名
    

    
    利用規約に同意

    送信

Spring MVC との連携

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping
    public String list(Model model) {
        model.addAttribute("users", userService.findAll());
        model.addAttribute("title", "ユーザー一覧");
        return "user/list";   // → templates/user/list.html
    }

    @GetMapping("/new")
    public String form(Model model) {
        model.addAttribute("form", new UserForm());
        return "user/edit";
    }

    @PostMapping("/save")
    public String save(@Valid @ModelAttribute("form") UserForm form,
                       BindingResult result,
                       RedirectAttributes ra) {
        if (result.hasErrors()) return "user/edit";

        userService.save(form);
        ra.addFlashAttribute("message", "保存しました");
        return "redirect:/user";
    }
}

レイアウト (fragment)

共通ヘッダ・フッタを切り出して再利用:

    
    




    
サンプルサイト
    

    







    
ユーザー一覧
    

        

    

th:replace と th:insert の違い:

JS / CSS との連携

ユーティリティオブジェクト

2000/01/01


1,234.56


YAMADA
短縮...


10


000-0000

FAQ

Q: th:text と th:utext の違い
A: th:text は HTML エスケープあり（XSS 安全）、th:utext はエスケープなし（XSS 注意、自己責任）。原則 th:text。

Q: Thymeleaf 2 と 3 の違い
A: 3.0 から th:include 廃止、~{...} fragment 構文導入、HTML5 への移行など。Spring Boot 2.0+ は Thymeleaf 3 が標準。

Q: 開発中に変更が反映されない
A: spring.thymeleaf.cache=false を application.properties に。または DevTools を入れる。本番は cache=true。