2013/11/16 第4回渋谷java の発表資料

1. Thymeleafのすすめ
2013/11/16 第4回 #渋谷java
@eiryu

2. 自己紹介
● Twitter @eiryu
● アプリケーションエンジニア
● Java, JavaScript, PostgreSQL, Opera
● つぶやき消化サービス TwFavView
○ http://twfavview.excale.net

3. Thymeleafとは

4. Thymeleafとは
● Javaのテンプレートエンジン
○
○
○
○
読みは「たいむりーふ」
現時点の最新版は2.1（2013/11/4）
HTML5にも対応
サイト http://www.thymeleaf.org

5. Thymeleafとは
● HTMLの属性としてThymeleafの処理を記述す
るため、ブラウザで見てもJSPのように崩れない
○ デザイナー、HTMLコーダーとのファイルのやりとりが手
軽にできる
○ この性質のため、最初にHTMLモックを作成してからロ
ジック作成に進むという流れで開発するのがよいと思わ
れる
● Spring統合用のモジュールが用意されている

6. 使い方

7. 使い方
● 基本は属性にth:を付けるだけ
○ data-xxxみたいなのはth:attrで
● マニュアル短いので全部読む
● 公式サンプルが非常に参考になる
○ https://github.com/thymeleaf/thymeleafexamplesstsm

8. 使い方
th:textでテキストノードに出力するものを指定
<span th:text=”${user.name}”>佐藤太郎
</span>

9. 使い方
th:eachで繰り返し
<table>
<thead><tr><td>名前</td></tr></thead>
<tbody th:remove=”all-but-first”>
<tr th:each=”user : ${users}”><td th:text=”${user.name}”>佐藤太郎</td></tr>
<tr><td>鈴木次郎</td></tr>
</tdoby>
</table>

10. 使い方
th:if、th:unlessで条件分岐
<button th:if=”${exist}”>クリアする</button>
<button th:unless=”${exist}”>設定する</button>

11. 使い方
JavaScript inlining
<script th:inline=”javascript”>
var endpoint = /*[[@{/user/remove}]]*/
‘default’;
.
.
.
</script>

12. デモ

13. 使ってみて

14. 使ってみて
● 使い始め 2012年9月くらい
● 実際に使った期間 6ヶ月
● Thymeleaf使い始めてからJSPは書いていない
● JSP書いてた人なら問題なく書けるはず
○ スクリプトレットもりもり使ってなければ。。

15. 使ってみて
● ブラウザで確認出来ることはかなり便利
○ エンジニアでも今後はHTMLモックを起こしてからコー
ディングする時代が来る？
■ Bootstrapの登場により、自分でデザインするという
手間は軽減
■ 社内ツールならBootstrapで済むことが多いと思わ
れる
●
実際に、自社のWebサービスの社内管理ツールはBootstrapで
作成した

16. 使ってみて
● デザイナーと協業してみた
○ 1からHTML起こすような新規Webサービス等場合は、
この作業から完全に解放される！
○ CSSの”細かい”調整（IE8の角丸とか）の面倒を見なくて
良い！
○ JavaScriptに関してはこちらで引き取り
○ ルール
■ XHTMLで記述する
■ JavaScriptで扱うためのclass名は、js-で始める
■ 極力デザイナー作成部分は触らない。逆もしかり
●
●
<option value=”1”>1</option>
→ <option value=”1” th:value=”${fooStat.count}”>1</option>

17. デメリット

18. デメリット
● th:ifなどで制御しているものはブラウザ上では
全部表示される
● ヘッダ、フッタなど、includeされるものが冗長に
なる
● Springのように、Java EEと統合するモジュー
ルは提供されていない

19. ご静聴ありがとうございました。