Thymeleafのすすめ
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Thymeleafのすすめ

  • 1,534 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,534
On Slideshare
1,290
From Embeds
244
Number of Embeds
6

Actions

Shares
Downloads
3
Comments
0
Likes
2

Embeds 244

http://d.hatena.ne.jp 191
http://eiryu.hatenablog.com 29
http://hatenatunnel.appspot.com 12
https://twitter.com 9
http://webcache.googleusercontent.com 2
http://cache.yahoofs.jp 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. ご静聴ありがとうございました。