Thymeleafのすすめ

4,309 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,309
On SlideShare
0
From Embeds
0
Number of Embeds
418
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Thymeleafのすすめ

  1. 1. Thymeleafのすすめ 2013/11/16 第4回 #渋谷java @eiryu
  2. 2. 自己紹介 ● Twitter @eiryu ● アプリケーションエンジニア ● Java, JavaScript, PostgreSQL, Opera ● つぶやき消化サービス TwFavView ○ http://twfavview.excale.net
  3. 3. Thymeleafとは
  4. 4. Thymeleafとは ● Javaのテンプレートエンジン ○ ○ ○ ○ 読みは「たいむりーふ」 現時点の最新版は2.1(2013/11/4) HTML5にも対応 サイト http://www.thymeleaf.org
  5. 5. Thymeleafとは ● HTMLの属性としてThymeleafの処理を記述す るため、ブラウザで見てもJSPのように崩れない ○ デザイナー、HTMLコーダーとのファイルのやりとりが手 軽にできる ○ この性質のため、最初にHTMLモックを作成してからロ ジック作成に進むという流れで開発するのがよいと思わ れる ● Spring統合用のモジュールが用意されている
  6. 6. 使い方
  7. 7. 使い方 ● 基本は属性にth:を付けるだけ ○ data-xxxみたいなのはth:attrで ● マニュアル短いので全部読む ● 公式サンプルが非常に参考になる ○ https://github.com/thymeleaf/thymeleafexamplesstsm
  8. 8. 使い方 th:textでテキストノードに出力するものを指定 <span th:text=”${user.name}”>佐藤太郎 </span>
  9. 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. 10. 使い方 th:if、th:unlessで条件分岐 <button th:if=”${exist}”>クリアする</button> <button th:unless=”${exist}”>設定する</button>
  11. 11. 使い方 JavaScript inlining <script th:inline=”javascript”> var endpoint = /*[[@{/user/remove}]]*/ ‘default’; . . . </script>
  12. 12. デモ
  13. 13. 使ってみて
  14. 14. 使ってみて ● 使い始め 2012年9月くらい ● 実際に使った期間 6ヶ月 ● Thymeleaf使い始めてからJSPは書いていない ● JSP書いてた人なら問題なく書けるはず ○ スクリプトレットもりもり使ってなければ。。
  15. 15. 使ってみて ● ブラウザで確認出来ることはかなり便利 ○ エンジニアでも今後はHTMLモックを起こしてからコー ディングする時代が来る? ■ Bootstrapの登場により、自分でデザインするという 手間は軽減 ■ 社内ツールならBootstrapで済むことが多いと思わ れる ● 実際に、自社のWebサービスの社内管理ツールはBootstrapで 作成した
  16. 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. 17. デメリット
  18. 18. デメリット ● th:ifなどで制御しているものはブラウザ上では 全部表示される ● ヘッダ、フッタなど、includeされるものが冗長に なる ● Springのように、Java EEと統合するモジュー ルは提供されていない
  19. 19. ご静聴ありがとうございました。

×