新卒が選ぶ「初めに抑えておくべきThymeleaf のポイント」

はじめに

この投稿は[アイスタイル Advent Calendar 2017] (https://qiita.com/advent-calendar/2017/istyle)の20日目の記事です。
皆さんこんにちは。皆さんは『Thymeleaf』使っていますか？

本記事は今年度4月に入社したjavaも初めましてな17新卒の私が、一からjavaを学び、Springを覚え、その最中に出会った『Thymeleaf』を「初めにこれだけ理解しておくといいよ！」と噛み砕いて紹介します！

そもそもThymeleafって？

ざっと紹介しますと、

• 読み方：「タイムリーフ」
• Javaで作られたテンプレートエンジン
• Spring Bootで使用推奨されている
• JSPの代替技術として近年注目されている
• 純粋なHTMLとしてテンプレート記述可

ググると「チートシート」として書かれているサイトがたくさん出てきます。Thymeleafは多機能且つチートシートもボリューム盛りだくさんです。

ですので、著者を始めとして、初めて学習する人にはちょっと重たいなあと感じた為、そんな方向けに本記事を執筆することに致しました。

【 4点の記法 】

初めに、具体的なテンプレート記述に入ります。
大きく4点の記法があります。

1. メッセージ式　#{...}

sample.properties

backToTop = Back to top
nothingToShow = No users to show.

sample.html

<p th:text="#{nothingToShow}">表示するユーザーがありません</p>

<a href="../../index.html" th:href = "@{/}" th:text = "#{backToTop}">トップページに戻る</a>

あらかじめ用意しておいたメッセージをVIEWへ表示するために使われます。
th:text 属性は、画面にメッセージを表示するために使われる属性です。

因みに、hello.htmlに記述されている「表示するユーザーがありません」や「トップページに戻る」などのメッセージは、ブラウザで直接開いた時のための仮のメッセージで、サーバーで実行時はプロパティファイルのメッセージで上書きされます。

2. 変数式　${...}

sample.html

<tr th:each = "user : ${userList}">
    <td th:text = "${user.id}">55</td>
    <td th:text = "${user.name}">Shunsuke Matsui</td>
</tr>

Controllerから値を変数に設定して、Viewからその変数の値を表示します。
${...}の部分が変数式です。
ここも th:text を使っているので、タグで挟まれた部分（「55」など）は、サーバー上で実行されたときには置き換えられます。あくまでも仮置きです。

3. 選択変数式　{...}

sample.html

<tr th:each = "user : ${userList}" th:object="${user}">
    <td th:text = "*{id}">55</td>
    <td th:text = "*{name}">Shunsuke Matsui</td>
</tr>

先程の変数式では${...}でuserと2回記述していた作業を <tr> 開始タグで挟んでいる部分では、${user.id} ではなく *{id} と簡略化して書くことができます。

4. リンク式　@{...}

HTMLなどを書いていてけっこう面倒なのが、リンク/CSS/JS/画像などの「パスの記述」ではないでしょうか。

絶対パスで指定するためにコンテキストパスを毎回書いたり、相対パスで書くとプロジェクトのフォルダ構造と、サーバー上で実行される時のパスが違っていて、うまくパスを指定するのが難しかったりします。

こういった問題の対策として、Thymeleafにはリンク式という記法があります。

sample.html

<link rel = "stylesheet" href = "../../css/style.css" th:href = "@{/css/style.css}">
<link rel = "stylesheet" href = "../../css/style.css" th:href = "@{/css/style.css}">

なぜ、上書きされて消えてしまうhref属性を書くのかというと、直接ブラウザでHTMLを開いてもCSSが適用されるようにするためです。

【テンプレートの記述】

条件分岐（th:if、th:unless)

sample.html

<table border = "1" th:unless = "${#lists.isEmpty(userList)}">
    ...
</table>

<p th:if = "${#lists.isEmpty(userList)}">表示するユーザーがありません。</p>

listsの部分はユーティリティオブジェクトというもの（後述）なのですが、ざっくり言うと、userListが空でなかったら

要素の部分のみが、空だったら <p> 要素の部分のみが出力されます。

th:unless は変数式で指定した条件がfalseの時に出力され、th:if は変数式で指に定した条件がtrueの時に出力されます。

繰り返し（th:each）

sample.html

<tr th:each = "user : ${userList}" th:object = "${user}">
    <td th:text = "*{id}">111</td>
    <td th:text = "*{name}">Yumi Wakatsuki</td>
</tr>

上記の場合だと、th:each属性を記述している <tr> 要素自体が繰り返し出力されます。

構文は th:each="コレクションから取り出した要素の変数名 : ${コレクションの変数名}">です。

その他の記法

コメント（）

癖で普通のHTMLのコメントをしてしまうとレスポンスに含まれて返ってきてしまうので気をつけましょう。

まとめ

以上、Thymeleafちゃんを理解するのに最低限必須な部分の紹介でした！
デザイナーさんにも余白の優しさを担保でき、双方が円滑に作業を進めることができるやさしい世界がThymeleafちゃんだということがわかりました。少しでもご参考になれれば幸いです！

明日は17卒同期の [@nagais] (https://qiita.com/nagais1711)　の記事です。
お楽しみに！！