初心者向けにThymeleaf 基本の使い方！最初に覚えるべきポイント集
新人
「Thymeleafって何ですか？Spring Bootの中でどんな役割を持っているんでしょうか？」
先輩
「Thymeleafは、HTMLを作成するためのテンプレートエンジンだよ。Spring Bootと一緒に使うことで、Webアプリケーションの画面表示をとても柔軟に作れるようになるんだ。」
新人
「なるほど。実際にはどうやってThymeleafを使うんですか？準備とか必要ですか？」
先輩
「それじゃあ、Thymeleafの基本の使い方や、Pleiadesでの開発準備について詳しく説明していこう！」
1. Thymeleafとは？
Thymeleaf（タイムリーフ）は、Spring Bootでよく使われるテンプレートエンジンです。Webアプリケーションで、HTMLを動的に生成するときにとても役立ちます。Thymeleafを使うと、<div>や<p>などのHTMLタグの中に、サーバーサイドのデータを埋め込むことができます。
例えば、データベースから取り出した情報を画面に表示するときや、条件によって表示する内容を変えたいときにThymeleafが活躍します。
Thymeleafの特徴は、HTMLの見た目を壊さずにテンプレートを作れるところです。実際のHTMLと同じような形を保ちながら、データを埋め込む部分だけ特別な書き方をします。これにより、デザイナーさんや他のメンバーとも共有しやすくなります。
また、Spring Bootと一緒に使うと、画面表示の処理を@Controllerクラスから簡単に連携できます。Thymeleafを使ったHTMLは、Spring Bootのコントローラが用意するデータ（モデル）を埋め込む形で表示されます。
以下は、Thymeleafを使った簡単なサンプルHTMLです。th:textという属性で、コントローラから送られてくるデータを表示します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleafサンプル</title>
</head>
<body>
<h1 th:text="${message}">ここにメッセージが表示されます</h1>
</body>
</html>
このサンプルでは、${message}の部分にコントローラで設定したメッセージが表示されます。こういった仕組みを、Thymeleafを使ってどんどん覚えていきましょう。
2. Thymeleafを使うための事前準備
Thymeleafを使うには、まず開発環境を整えておく必要があります。ここでは、Pleiadesをインストールして、Pleiades上でGradleを使ってプロジェクトを作成する流れを説明します。
1. Pleiadesのインストール
Pleiadesは、日本語化されたEclipseのセットです。Pleiadesをインストールすると、すぐにJavaの開発が始められます。インストール手順は公式サイトからPleiadesをダウンロードして解凍するだけなので簡単です。
2. PleiadesでGradleプロジェクトを作成
Thymeleafを使うには、Spring BootプロジェクトをGradleで作成します。Pleiadesを起動したら、メニューから「ファイル」→「新規」→「Spring スターター・プロジェクト」を選びます。
プロジェクト作成画面で、Gradleを選択し、必要な情報（プロジェクト名やパッケージ名）を入力します。
3. 依存関係の設定
プロジェクトを作成するときに、依存関係として「Spring Web」「Thymeleaf」を選びます。Pleiadesでは、これらをチェックするだけで自動的にbuild.gradleに必要な設定が追加されます。
4. @Controllerクラスの作成
準備ができたら、@Controllerを使ったコントローラを作成します。コントローラでは、画面に表示するデータを用意し、Thymeleafのテンプレートを返すようにします。
以下は、簡単なコントローラのサンプルです。
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 SampleController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("message", "こんにちは！Thymeleafの基本を覚えよう");
return "hello";
}
}
この例では、/helloというURLにアクセスすると、「hello.html」というテンプレートが表示されます。テンプレートには、messageというデータが渡されます。
5. Pleiadesでアプリを起動
最後に、Pleiadesの「Spring Boot Dashboard」や「Bootアプリケーション」からアプリケーションを実行します。ブラウザでhttp://localhost:8080/helloにアクセスすると、Thymeleafで作った画面が表示されます。
これで、PleiadesとGradleを使ったThymeleafの基本的な準備は完了です。次は、具体的なタグの使い方や、条件分岐、繰り返し表示などを順番に覚えていくと良いでしょう。
3. Thymeleafのテンプレートの基本構造
Thymeleafのテンプレートは、HTMLの基本構造をそのまま活かして作ります。HTMLのルールを守りながら、必要なところだけThymeleaf専用の属性を追加するだけなので、初心者の方でもすぐに馴染めます。特に重要なのは、xmlns:thという名前空間の宣言です。これがあることで、Thymeleafの属性を使えるようになります。
以下は、Thymeleafの基本的なテンプレート構造の例です。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf基本構造</title>
</head>
<body>
<h1 th:text="${title}">ここにタイトルが入ります</h1>
<p th:text="${content}">ここにコンテンツが入ります</p>
</body>
</html>
このテンプレートでは、<h1>と<p>の中身を、コントローラから渡されたデータで動的に置き換えます。HTMLとしても正しい形なので、ブラウザで直接開いても大きな崩れはありません。
このように、HTMLのルールを守りながら、th:textなどの属性をうまく使うのがThymeleafの基本の使い方です。Pleiadesを使ってテンプレートを作るときも、HTMLの見た目をそのまま活かしながら、必要なところだけThymeleafの属性を追加していきましょう。
4. @ControllerとThymeleafの連携方法
Thymeleafを使った画面表示は、@Controllerを通して行います。コントローラでは、Modelを使って画面に渡したいデータを用意します。Modelにデータをセットすると、そのデータはThymeleafテンプレートの中で${データ名}として使えます。
例えば、次のようなコントローラを作成します。
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 GreetingController {
@GetMapping("/greeting")
public String greeting(Model model) {
model.addAttribute("title", "Thymeleaf ポイント集");
model.addAttribute("content", "Thymeleaf 基本の使い方を覚えていきましょう！");
return "greeting";
}
}
この例では、/greetingというURLにアクセスすると、「greeting.html」というテンプレートが表示されます。そして、titleやcontentというデータがテンプレートに渡されます。
テンプレート側では、以下のように書くことで、コントローラから送られてきたデータを表示できます。
<h1 th:text="${title}">ここにタイトルが入ります</h1>
<p th:text="${content}">ここにコンテンツが入ります</p>
この仕組みはとてもシンプルで、初心者でもすぐに使いこなせるようになります。Pleiadesを使うと、コントローラの作成からテンプレートの作成まで一括して管理できるので、学習がしやすいです。
この連携方法を覚えておくと、今後の画面開発がとてもスムーズになります。どのページでも、必要なデータをModelに入れてあげれば、Thymeleafテンプレートが自動的にそれを使ってくれるのです。
5. よく使うThymeleafの属性（th:textなど）の使い方
Thymeleafの基本の使い方の中で、特に重要なのがth:textやth:hrefなどの属性です。これらを使うと、動的に画面を作れるようになります。まずは、th:textの使い方から見ていきましょう。
th:textの使い方
th:textは、指定した値をHTMLタグの中に表示するときに使います。例えば、以下のように書きます。
<p th:text="${message}">ここにメッセージが入ります</p>
この例では、messageというデータが<p>の中に表示されます。実際に表示される内容は、コントローラでmodel.addAttribute("message", "こんにちは！")と設定した値です。
th:hrefの使い方
リンクを動的に作るときには、th:hrefを使います。例えば、以下のように書くと、リンクのURLをコントローラから渡した値に置き換えられます。
<a th:href="@{/home}">ホームに戻る</a>
このth:href="@{/home}"は、@{/home}という書き方でアプリケーション内のパスを示します。/homeにリンクが張られて、クリックするとそのページに移動します。
th:eachの使い方
繰り返し処理をするときは、th:eachを使います。例えば、リストを画面に表示したい場合、次のように書きます。
<ul>
<li th:each="item : ${itemList}" th:text="${item}">アイテム</li>
</ul>
この例では、itemListというリストの中身を、<li>の中に繰り返し表示します。繰り返し部分のitemが、リストの1つ1つの値を受け取って表示されます。
このように、Thymeleafの基本の使い方をマスターすることで、どんなデータでも柔軟に画面に表示できるようになります。Pleiadesを使った開発でも、th:textやth:hrefなどを使いこなせば、動的で見やすい画面が作れるので、ぜひ覚えておきましょう。
6. よくあるエラーとその解決方法
Thymeleafの基本の使い方を学びながら、初心者の方がよく出会うエラーをまとめました。原因と解決方法を知っておくと、開発中に慌てずに対応できます。
テンプレートが見つからないエラー
例えば、「TemplateNotFoundException」というエラーは、指定したテンプレートファイルが見つからないときに出ます。このエラーが出たら、まずresources/templatesフォルダにHTMLファイルがあるかを確認してください。ファイル名のスペルミスも要注意です。
th:eachで空のリストエラー
th:eachを使ったとき、渡されたリストが空だと画面に何も表示されません。これはエラーではありませんが、画面が真っ白だと慌てることがあります。itemListがちゃんとデータを持っているかをコントローラ側で確認しましょう。
変数が見つからないエラー
画面に${message}などの値が表示されない場合は、コントローラでmodel.addAttribute("message", "こんにちは！")の設定が正しくされているか確認します。もし渡していなければ、HTMLでは空のままです。
解決のコツ
こうしたエラーを解決するには、Pleiadesのコンソールに表示されるメッセージをよく読むことが大切です。原因が書かれているので、落ち着いて読み進めてみましょう。
7. 開発を進めるときのコツ
Thymeleafの基本の使い方をしっかり覚えたら、次は実際の開発で役立つコツをいくつか紹介します。これらを意識すると、開発がずっとスムーズになります。
テンプレートをこまめに確認する
Pleiadesを使うと、テンプレートを編集したらすぐに結果をブラウザで確認できます。小さな変更でも、何度も確認しておくことで、間違いに早く気づけます。
命名規則をそろえる
例えば、コントローラでmodel.addAttribute("title", "タイトル")と渡したら、テンプレートでも${title}とそろえましょう。名前がずれると、うまく表示されないことがあります。
不要なコードを残さない
開発中に試したコードが残っていると、後からわかりにくくなります。完成した部分は整理して、不要なコードは消しておきましょう。Pleiadesのプロジェクトエクスプローラからも、ファイルやクラスを整理できます。
条件分岐や繰り返しは段階的に
最初から複雑な条件分岐や繰り返し処理を作ると混乱しやすいです。th:ifやth:eachはまず簡単な例から試して、少しずつ応用していくのがポイントです。
コメントアウトを活用
ThymeleafでもHTMLコメント<!-- -->を使えます。説明を書いたり、一時的に表示を止めたいときに便利です。
8. まとめとして学習の進め方のヒント
ここまで、Thymeleafの基本の使い方やポイント集を詳しく見てきました。最後に、学習を続けるときのヒントをまとめます。
焦らず基本を大切に
初心者のうちは、th:textやth:eachなど、よく使う部分をしっかり覚えるのが大事です。最初からすべてを完璧に覚えようとせず、少しずつ進めていきましょう。
実際に手を動かす
学んだ内容は、実際にPleiadesでサンプルを作りながら覚えると効果的です。自分で画面に表示を出せると、自信にもつながります。
公式ドキュメントを活用
Thymeleafの公式ドキュメントも役に立ちます。わからないところが出てきたら、公式の例を参考にしてみるのもおすすめです。
チームメンバーと相談する
わからないことがあったら、周りの先輩やチームメンバーに質問してみましょう。みんなで情報を共有すると、新しい発見が増えていきます。
これからThymeleafを使った開発を進める中で、基本の使い方を忘れずに、少しずつステップアップしていってください。Pleiadesを使った開発はとても便利なので、楽しく学習を続けましょう。
この記事を読んだ人からの質問
