thymeleafはタイムリーフって読むみたいですよ！シソ科のハーブらしいですよ！何でこの名前にしたかは知りません！
はじめるよ！
変数の出力について
前回の振り返りとエスケープについて
前回の記事で書いた通り、変数は以下のように記述すると出力出来ます。
<p th:text="${hoge}">ダークフレイムマスター</p>
このとき、変数hogeの中身は自動的にエスケープした状態で表示されます。べんり。
でもそんなの余計なお世話ということもあるので、その場合は以下のようにします。
<p th:utext="${hoge}">闇の炎に抱かれて消えろ！</p>
textがutextになっただけです。かんたんですね！
ちなみに、このhogeの中身に「&」があった場合、th:textで出力した場合はエスケープされて「＆amp;」になるので問題ありませんが、
thymeleafは実体参照と判断し、この「&」で始まる文字列が実体参照として正しくなかった場合はSAXParseExceptionが発生するので注意しましょう。
前回の記事のSpringの設定ではtemplateModeをHTML5にしていましたが、これをLEGACYHTML5にすることで回避はできるみたいです。
ただ、その場合はnekoHtmlという別のライブラリに依存する形になってしまいます。
尚、閉じタグを忘れるなど、HTMLとして正しくない記述があった場合も同じようにSAXParseExceptionが発生するので、HTMLの記述にも注意が必要です。
記述の簡略化について
次に、thymeleafではBeanのフィールドを呼び出す記述を簡略化する方法があるのでそれをみてみます。
たとえばCharacterBeanというBeanがあり、このBeanがname、skill、imageUrlというフィールドを持っているとします。
普通に書くと以下のようになります。
<div> <img th:src="${characterBean.imageUrl}" src="http://tm8r.com/img/takanashi.png"/> <p th:text="${characterBean.name}">名前：小鳥遊六花</p> <p th:text="${characterBean.skill}">スキル：邪王真眼</p> </div>
これを以下のように簡略化することができます。
<div th:object="${characterBean}"> <img th:src="*{imageUrl}" src="http://tm8r.com/img/takanashi.png"/> <p th:text="*{name}">名前：小鳥遊六花</p> <p th:text="*{skill}">スキル：邪王真眼</p> </div>
親要素にth:objectとしてBeanをセットし、その子要素でBean名を省略、$を*に置き換えるだけです。
かんたん！らくちん！すてき！
thymeleafの記法
条件分岐
テンプレートエンジンなのでやっぱりifとかelseとか書きたいですよね。書きたいですよね。
なんとなく察しがつくと思いますが、やっぱりこれもタグの属性として書きます。
具体的には以下のようなかんじ。
<p th:if="${togashi != null}">眼が…眼が共鳴している…</p>
これで変数togashiがnullでない場合にpタグの中身が表示されます。
nullの場合はpタグごと表示されません。
比較演算子はjavaで普段使っているものが使えますが、「<」など、HTMLのタグとして使うようなものに関しては「lt」などに置き換える必要があります。
「<=」は「le」で実現できます。
「==」や「!=」は普通に使えますが、「eq」「neq」のように書くことも出来ます。ちょっとfreemarkerと違いますね。
また、比較演算子を記述せず、以下のような記述をした場合
<p th:if="${togashi != null}">ジャッジメントルシファー</p>
以下の時falseを返すようになります。
- 変数が文字列でかつ値が「no」
- 変数が文字列でかつ値が「off」
- 変数が文字列でかつ値が「false」
- 変数が数字でかつ値が「0」
- 変数がnull
うれしいような…そうでもないような…！
ifを書いたら今度はelseを書きたいところですが、th:elseとは書きません。
th:unlessを使います。
<p th:unless="${togashi == '中二病'}">生涯封印！！</p>
こんなかんじ。
これでtogashiが中二病じゃないときに「生涯封印！！」と表示されます。
あと、switch文も使えたりします。
<div th:switch="${num}"> <p th:case="0">0</p> <p th:case="10">10</p> <p th:case="*">*</p> </div>
javaのように明示的にbreakを書く必要はなく、numが0なら0が、10なら10が表示されます。
どれにも該当しない場合は*が表示されます。これはちょっと便利ですね。
中二病でも恋がしたいのネタが尽きましたね。六花ちゃんかわいいですね。
次はリストなんかを！
