Your SlideShare is downloading. ×
Thymeleafのすすめ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Thymeleafのすすめ

1,659
views

Published on

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

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

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,659
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

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

×