1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Thymeleafをちょっとだけまとめてみた

Last updated at Posted at 2024-01-23

SpringでWebアプリケーションを開発するにあたって
Thymeleafというテンプレートエンジンを使っています。
こちらについてまとめました。

1. Thymeleafについて

既に書きましたがSpringで主流のテンプレートエンジンです。
Laravelでいうbladeみたいなものです。
公式サイトでは日本語対応しています。やさしいですね。

2. コードを見てみる

Thymeleaf

<p th:text="${message}"></p>
<table border="1">
 <tr>
    <th>名前</th>
    <th>年齢</th>
 </tr>
 <tr th:each="user : ${users}">
    <td th:text="${user.id}"></td>
    <td th:text="${user.name}"></td>
    <td th:text="${user.age}"></td>
 </tr>
</table>
  

HTMLでは見慣れない「th」や「"$~~~~"」などの記述がみられます。
これらはサーバから受け取ったデータを出力する場所になります。
${message}ではコントローラで以下のコードを動かすことで

java
model.addAttribute("message", "タイムリーフ");

このように表示されます!

tmp.PNG

このようにしてサーバからの情報を画面上に表示することができます。
そして実際の自社開発でもこのような方法で画面上にDB上から抽出した情報を表示しています。

なによりすっごく簡単です。
画面に情報を渡す、画面上に受け取った情報を表示する、
これらは上記にあるように書くだけで実装することができます。

Thymeleafに限った話ではありませんがテンプレートエンジンは偉大です。
Web開発の味方。

3. Thymeleafを使えるようにする

ここではWeb上でSpringプロジェクトを作る方法から進めます
Eclipceからでもプロジェクトを作成できるらしいですが自分で試したことが無いので割愛

↓にアクセスすると

↓のような画面が表示されます。
画面上左上の「ADD DEPENDENCIES」を押下

キャプチャspring.PNG

↓検索用の画面が表示されるので「Thymeleaf」と検索し、結果を押下する

thy.PNG

↓そうするとこれから作られるSpringプロジェクトでThymeleafを使うとことができます!

init.PNG

4. もうちょい深堀してみる

Thymeleafの主な属性をまとめてみました!
(ちゃっかり個人的なメモの役割も果たしている)

属性名 詳細
th:each ループを作成してリストや配列の各要素を処理する
th:if, th:unless 条件に基づいて要素を表示または非表示にする
th:object フォームのバインディングオブジェクトを指定する
th:text 要素のテキストコンテンツを設定する
th:src, th:href 画像やリンクのソースやリンク先を設定する
th:attr HTML属性を設定する
th:class, th:id 要素のクラスやIDを動的に設定します
th:style 要素のスタイルを設定する

↑の記事ですがタイトルにあるようにThymeleafの使い方が綺麗にまとめられています。
めっちゃ感謝です。これからの開発に重宝する予定です!!

5. 終わりに

テンプレートエンジンはWeb開発するにあたって必須(だよね!?)なのでしっかり身に付けようと思います。

6. 予告

次回の投稿は2月2日の予定です!
Googleでのログインについて書こうかな

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?