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

Thymeleafのすすめ

on

  • 1,174 views

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

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

Statistics

Views

Total Views
1,174
Views on SlideShare
943
Embed Views
231

Actions

Likes
1
Downloads
1
Comments
0

6 Embeds 231

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Thymeleafのすすめ Thymeleafのすすめ Presentation Transcript

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