Practical migration from JSP to Thymeleaf
•
4 likes•1,150 views
Practical migration from JSP to Thymeleaf. This presentation was made for Spring Fest 2019.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Practical migration from JSP to Thymeleaf
Similar to Practical migration from JSP to Thymeleaf (20)
Practical migration from JSP to Thymeleaf
- 1. JSP/JSF から Spring Web + Thymeleaf への移⾏ 初⼼者向け JSP (+Struts) など古いタイプの動的Webページ サーバレンダリング開発から、 最新系 Web 開発環境の Spring Web + Thymeleaf によるレンダリングへ の移⾏に関⼼がある⽅向け。 ひとたび Spring Boot + Spring Web + Thymeleaf に乗り換えてしまえば、 幸せな開発環境が⼿に⼊ります。 前提知識︓Java、HTMLを多少は知っていること。 16:15-17:00 Room B Spring Fest 2019 #jsug 2019/12/18
- 2. まえおき 本⽇の発表は、発表者である 伊賀敏樹 が休暇を取得のうえ実施しています。 内容や⾒解は、私 伊賀敏樹 個⼈のものであり、Wipro および Appirio は当個⼈的⾒ 解に⼀切責任を持ちません。
- 3. 発表者について (1/2) 伊賀 敏樹 (いがぴょん) 古くからの Java エンジニア 2003年 於: いがぴょんの⽇記v2 2018年 於: オーケストラ本番直前 15年後 =>
- 4. 発表者について (2/2) 本業では アピリオ という会社で Heroku + Spring Boot + Thymeleaf を使って ⼤規模エンタープライズシステム開発してます 最近の(強制)マイブームは Classic ASP + VB6 字句解析器や構⽂解析器と戯れています
- 5. NEKOGET スライド⽀援サービス (仮称) 本スライドは NEKOGETさんによる有償のスライド⽀援 サービスを受けています。 猫イラストなどは NEKOGET さんの著作物であり、この 発表に限定して有償で NEKOGET さんから使⽤を許 諾されたものです。 猫イラストによる⽀援を受けたい⽅は、NEKOGETさん に連絡してくださいね。
- 6. はじめに
- 7. このセッションで知って欲しいこと ● Thymeleaf を知るためのヒントと道筋を理解する ○ Webサイトの読み解き⽅を知り、セッションの後にも⾃⼒で調べられるように ● Thymeleaf を採⽤する利点 ○ 後発 OSS テンプレートエンジンとしての優秀さ ○ 動的Webページ サーバレンダリングでのテンプレート⽅式の優位性 ○ 共通化・再利⽤を強⼒に⽀援する各種機能 ● セッションの前提知識 : Java、HTMLを多少は知っていること
- 9. Thymeleaf って なあに (1/5) ● 汎⽤テンプレートエンジン ● ⽇本語としては「タイムリーフ」と記載・発⾳ ● 現代的な設計のテンプレートエンジン ● OSS で開発・提供される ● 過去の様々な Java 向けの OSS テンプレートエンジンのどれよりも、 Thymeleaf が優れている (個⼈の感想です) ● Spring で 動的Webページ サーバレンダリングをおこなうなら、⼤抵の開発では Thymeleaf の選択をおすすめしたい ● Thymeleaf はソースコードがとても綺麗です
- 10. Thymeleaf って なあに (2/5) ● 汎⽤テンプレートエンジン ○ テンプレート（定型フォーマット）の内容の⼀部を書き換えることができる仕組み テンプレート エンジン処理 連想される、ありがちな例: - メールの定型⽂の内容の⼀部を書き換え - HTML の内容の⼀部を書き換え テキストファイル (テンプレート) テキストファイル
- 11. Thymeleaf って なあに (3/5) ● 動的Webページ Java テンプレートエンジン ○ Standard dialect を利⽤することにより HTML ⽤のタグ処理機能が利⽤可能 ○ Thymeleaf - Spring 連携パッケージを利⽤することで Spring との連携が可能 テンプレート エンジン処理 HTML ファイル (テンプレート) HTML ファイル
- 12. Thymeleaf って なあに (4/5) HTML ファイル (テンプレート) w/Standard dialect テンプレート処理 Thymeleaf w/Thymeleaf - Spring 連携 on/Spring Web Web Browser Java プログラム HTML HTTP(S) HTTP(S)
- 13. Thymeleaf って なあに (5/5) ● Thymeleaf 公式 (⽇本語訳) は以下 ○ https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#%E3%83%80%E3%82%A4%E3%82%A2 %E3%83%AC%E3%82%AF%E3%83%88%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%80%E3%83%BC %E3%83%89%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AC%E3%82%AF%E3%83%88 ○ このサイトをよく閲覧 ● ほとんどのThymeleafの記載は「スタンダードダイアレクト(standard dialect)」の説明 ● HTML5 に対応
- 15. 動的Webページ サーバレンダリングの種類 Java Servlet JavaServer Pages JavaServer Faces Thymeleaf 愛称 Servlet JSP JSF Thymeleaf JSR JSR-369 JSR-245 JSR-372 N/A Java EE 8 ◯ ◯ ◯ × 記法 Java でコーディング <% jsp: 独⾃タグ形式 <h:outputText jsfc属性形式 <span jsfc="h:outputText“ #{bean.name} <div th:text="${message}" <div>[[${message}]] 特徴 テンプレートなしで ⾃⼒で頑張る Classic ASP 似 jsfc属性形式は Thymeleaf 似 妥当な HTML + 独⾃属性
- 16. Thymeleaf を選択する動機 ● Spring Boot による最新系技術を利⽤したい ● Spring との⾼い親和性 ● テンプレートファイルが妥当な HTML となるため⾒通しが良い ● デフォルトの挙動がセキュア ● カスタムタグの開発しやすさ WebLogic / WebSphere / Tomcat / Jboss / GlassFish 的なものを Spring Boot + Spring Web + Thymeleaf 化
- 17. Thymeleaf を選択する動機 : JSP vs Thyemeleaf ● https://www.thymeleaf.org/doc/articles/thvsjsp.html Thymeleaf なら… ● サーバ上で動作させないでもクライアントのWebブラウザでのレンダリングが可能 ○ デザイナーとの分業が可能? ● Thymeleaf のテンプレート⽅式が現代的で有利 ● ⾃然なセキュアさについて Thymeleaf のほうが有利 ● Fragment 、カスタムタグライブラリの作り勝⼿にて断然有利
- 18. 動的Webページ サーバレンダリング以外 (参考) ● クライアントサイド Web レンダリング ● スマホ・タブレットアプリ ● サーバ間通信 ● API ● etc… ⼤抵の場合は、REST/JSON や SOAP をもちいて HTTP(S) アクセスを提供 そもそも 動的Webページ サーバレンダリングはレガシー⽅式(!?)… マイブームは Vue.js / React で SPA
- 19. 使ってみよう Thymeleaf
- 20. Thymeleaf を使ってみよう (普通は コレジャナイ) ● https://www.thymeleaf.org/download.html ●だがしかし、⼤抵の⼈はここからはダウンロード操作しない ●「Java SE 6 以降」って書いてある!
- 21. Thymeleaf を使ってみよう w/Spring Boot ● https://start.spring.io/ みんな⼤好き Spring Initializr Maven / Java / 2.2.2 / Web + Thymeleaf
- 22. Eclipseだと(1/5) ●みんな⼤好き Eclipse ●File -> Import... ●Eclipse IDE for Java Developers が私のお気に⼊り
- 24. Eclipseだと(3/5) ●main のアプリケーションクラスを選択 ●Run As で実⾏ mvn spring-boot:runmvn の代替記法でも可
- 25. Eclipseだと(4/5) index.html <!doctype html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <head> <title>Hello World!</title> <meta charset="utf-8"> </head> <body> <h1>Hello World.</h1> <p th:text="${'Hello World!'}"/> </body> </html> ●ファイル作成して Spring Bootを再起動
- 27. Thymeleaf の凄いところ
- 28. テンプレートレイアウト機能による共通化 • th:fragment • th:insert • th:replace 画⾯共通化・標準化が助けられる 画⾯の⼀部共通化などに ⼤変役⽴つ
- 29. カスタムダイアレクト作成による共通化・再利⽤ 中級者以上向け (シンプルなカスタムダイアレクトの作成向き) l AbstractAttributeTagProcessor l AbstractElementTagProcessor 上級者向け (⾼度ななカスタムダイアレクトの作成向き) l AbstractElementModelProcessor とてもパワフル サンプル少ない... 難易度⾼い https://www.thymeleaf.org/doc/tutorials/3.0/extendingthymeleaf.html#creating-our-own-dialect Thymeleaf のレンダリング処理に、⾃作のダイアレクトを追加できる仕組み JSP に対して圧倒的に優位なカスタムダイアレクト作成による共通化・再利⽤の効果
- 31. Thymeleaf 依存関係を知りたくなったら : 依存関係表⽰ ● [INFO] --- maven-dependency-plugin:3.1.1:tree (default-cli) @ demo --- ● [INFO] com.igapyon:demo:jar:0.0.1-SNAPSHOT ● [INFO] +- org.springframework.boot:spring-boot-starter-thymeleaf:jar:2.2.2.RELEASE:compile ● [INFO] | +- org.springframework.boot:spring-boot-starter:jar:2.2.2.RELEASE:compile ● [INFO] | | +- org.springframework.boot:spring-boot:jar:2.2.2.RELEASE:compile ● [INFO] | | +- org.springframework.boot:spring-boot-autoconfigure:jar:2.2.2.RELEASE:compile ● [INFO] | | +- org.springframework.boot:spring-boot-starter-logging:jar:2.2.2.RELEASE:compile ● [INFO] | | | +- ch.qos.logback:logback-classic:jar:1.2.3:compile ● [INFO] | | | | ¥- ch.qos.logback:logback-core:jar:1.2.3:compile ● [INFO] | | | +- org.apache.logging.log4j:log4j-to-slf4j:jar:2.12.1:compile ● [INFO] | | | | ¥- org.apache.logging.log4j:log4j-api:jar:2.12.1:compile ● [INFO] | | | ¥- org.slf4j:jul-to-slf4j:jar:1.7.29:compile ● [INFO] | | +- jakarta.annotation:jakarta.annotation-api:jar:1.3.5:compile ● [INFO] | | ¥- org.yaml:snakeyaml:jar:1.25:runtime ● [INFO] | +- org.thymeleaf:thymeleaf-spring5:jar:3.0.11.RELEASE:compile ● [INFO] | | +- org.thymeleaf:thymeleaf:jar:3.0.11.RELEASE:compile mvn dependency:tree 詳しくは次ページ
- 32. 依存関係 (抜粋) [INFO] | +- org.thymeleaf:thymeleaf-spring5:jar:3.0.11.RELEASE:compile [INFO] | | +- org.thymeleaf:thymeleaf:jar:3.0.11.RELEASE:compile [INFO] | | | +- org.attoparser:attoparser:jar:2.0.5.RELEASE:compile [INFO] | | | ¥- org.unbescape:unbescape:jar:1.1.6.RELEASE:compile [INFO] | | ¥- org.slf4j:slf4j-api:jar:1.7.29:compile [INFO] | ¥- org.thymeleaf.extras:thymeleaf-extras-java8time:jar:3.0.4.RELEASE:compile [INFO] +- org.springframework.boot:spring-boot-starter-web:jar:2.2.2.RELEASE:compile [INFO] | +- org.springframework.boot:spring-boot-starter-json:jar:2.2.2.RELEASE:compile [INFO] | +- org.springframework.boot:spring-boot-starter-tomcat:jar:2.2.2.RELEASE:compile [INFO] | | +- org.apache.tomcat.embed:tomcat-embed-core:jar:9.0.29:compile [INFO] | | +- org.apache.tomcat.embed:tomcat-embed-el:jar:9.0.29:compile [INFO] | | ¥- org.apache.tomcat.embed:tomcat-embed-websocket:jar:9.0.29:compile [INFO] | +- org.springframework:spring-web:jar:5.2.2.RELEASE:compile [INFO] | ¥- org.springframework:spring-webmvc:jar:5.2.2.RELEASE:compile mvn dependency:tree
- 33. ちょっとインターネットに公開したいときは Heroku がオススメ ● Spring Boot + Spring Web + Thymeleaf を ちょっとインターネット上に公開したりテストしたりしたいときには Spring Boot と親和性の⾼い Heroku の利⽤がオススメ ● https://jp.heroku.com/ 例えば... 1. オートスケールする Web システムを構築したい 2. でも スケールする Webアプリケーションサーバに重課⾦したくない 3. Spring + Spring Web + Thymeleaf を Heroku にデプロイにより微課⾦構成化 4. Heroku コンソールから簡単オートスケーリング!
- 34. まとめ
- 35. このセッションで知って欲しいこと (再掲) ● Thymeleaf を知るためのヒントと道筋を理解する ○ Webサイトの読み解き⽅を知り、セッションの後にも⾃⼒で調べられるように ● Thymeleaf を採⽤する利点 ○ 後発 OSS テンプレートエンジンとしての優秀さ ○ 動的Webページ サーバレンダリングでのテンプレート⽅式の優位性 ○ 共通化・再利⽤を強⼒に⽀援する各種機能 ● セッションの前提知識 : Java、HTMLを多少は知っていること
- 36. 中締め
- 37. Appendix その他⾊々
- 38. Appendix : HTMLパーサ、エスケープライブラリ ● attoparser Thymeleaf が利⽤している HTML parser. Thymeleaf 互換 html 処理が可能 ● unbescape Thymeleaf が利⽤しているエスケープライブラリ ソースコードを読もう
- 39. Appendix : Maven 重要 ● Maven そのもの ● Maven Repository ! みんな⼤好き Maven Repository! みんなで作ろう Maven Repository!
- 41. Appendix : Spring Boot Actuator groupId: org.springframework.boot artifactId: spring-boot-starter-actuator management.endpoints.web.exposure.include=* 本番環境ではこの記述は削除するなどoff に なにか変だと思ったら
- 42. Appendix : Java SE Development Kit 1.8 以降を強く推奨 ● 開発環境でバージョン衝突などする場合は VirtualBox や VMware などの活⽤検討もアリ ● ある程度は新しいバージョンの統合開発環境を利⽤しよう JDK バージョンアップによって Eclipse などのバージョンアップが必要に… ● Thymeleaf ⾃体は 1.6 以降…
- 43. 本締め
- 44. Thymeleaf さいしょの⼀歩 (抜粋再掲) 初⼼者向け Thymeleaf ⼊⾨。Thymeleaf はもちろん Spring もあまり知ら ない⼈向けの Thymeleaf をもちいた Web アプリ開発⼊⾨。 前提条件︓HTML、⼀般的な Web アプリの仕組み、Java、Maven、そして Spring についての最低限で基礎的な知識があること。 DBの話題は扱いません。 Spring Fest 2018 発表資料より
- 46. コマンドラインから Web アプリを実⾏ . ____ _ __ _ _ /¥¥ / ___'_ __ _ _(_)_ __ __ _ ¥ ¥ ¥ ¥ ( ( )¥___ | '_ | '_| | '_ ¥/ _` | ¥ ¥ ¥ ¥ ¥¥/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_¥__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.0.6.RELEASE) 2018-10-29 11:44:56.396 INFO 95896 --- [ main] jp.igapyon.webdemo.WebdemoApplication : Starting WebdemoApplication on pomegat- virtual-machine with PID 99999 (/.../webdemo/target/classes started by user1 in /.../webdemo) やった Hello World が近づいてきた! mvn spring-boot:run
- 49. 静的リソースによる Hello World. . ├── src │ ├── main │ │ └── resources │ │ ├── application.properties │ │ ├── static │ │ └── templates │ │ └── index.html <html> <head> <title>Hello World!</title> </head> <body> <p>Hello the Thymeleaf World!</p> </body> </html> index.html
- 50. 静的リソースによる Hello World. ctrl+C mvn spring-boot:run とめる うごかす
- 51. Bootstrap 付き 静的 Hello World. <!doctype html> <html lang="ja"> <head> <title>Hello World!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <h1>Hello World.</h1> <p>Hello the Thymeleaf World!</p> </body> </html> index.html
- 53. はじめての動的な Hello World (1) . ├── src │ ├── main │ │ ├── java │ │ │ └── jp │ │ │ └── igapyon │ │ │ └── webdemo │ │ │ ├── HelloController.java │ │ │ └── WebdemoApplication.java │ │ └── resources │ │ └── templates │ │ ├── hello.html │ │ └── index.html テンプレート コントローラ ファイルの配置パスを間違えると 動作しない
- 54. はじめての動的な Hello World (2) package jp.igapyon.webdemo; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HelloController { @GetMapping("/hello") public String hello(Model model) { model.addAttribute("message", "Hello World from Thymeleaf."); return "hello"; } } ← htmlテンプレートファイル名 ← アクセスパス HelloController.java
- 55. はじめての動的な Hello World (3) <!doctype html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <head> <title>Hello World!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no"> <link rel="stylesheet" href="https://maxcdn.boots…(省略)..."> </head> <body> <h1>Hello World.</h1> <p th:text="${message}"/> </body> </html> hello.html
- 56. はじめての動的な Hello World (4) やった Hello World だっ! mvn spring-boot:run ctrl+C で停⽌する⽅は適宜...
- 58. Thymeleaf の典型的なエラー例 (1) - マッピング無し マッピングがない URL の場合のエラー例
- 59. @Controller public class HelloController { @GetMapping("/hello") public String hello(Model model) { model.addAttribute("message", "Hello World from Thymeleaf."); return "hello2"; } Thymeleaf の典型的なエラー例 (2) - テンプレート無し わざとテンプレートを存在させない例 エラー確認体験重要
- 61. Thymeleaf でのテキスト出⼒⽅法 - 基本 <body> <h1>Hello World.</h1> <p th:text="${message}"/> </body> hello.html から 基本形
- 62. Thymeleaf でのテキスト出⼒⽅法 - 応⽤1 <body> <h1>Hello World.</h1> <p>[[${message}]]</p> </body> hello.html から 簡単系
- 63. Thymeleaf でのテキスト出⼒⽅法 - 応⽤2 <body> <h1>Hello World.</h1> <p><span th:text="${message}" th:remove="tag"/></p> </body> hello.html から th:remove 属性で タグ出⼒を制御 タグが不要な時に便利 困った時の特 効薬!?
- 65. $ って、なあに ${message} の箇所は Standard Expression と呼ばれるもの Java と Thymeleaf をつなぐ記法。 Simple expressions: ● ${...} : Variable expressions. ● *{...} : Selection expressions. ● #{...} : Message (i18n) expressions. ● @{...} : Link (URL) expressions. ● ~{...} : Fragment expressions. see: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax $ と * が、よく利⽤される
- 67. boolean の属性 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymelea f.html#fixed-value-boolean-attributes th:async, th:autofocus, th:autoplay, th:checked, th:controls, th:declare, th:default, th:defer, th:disabled, th:formnovalidate, th:hidden, th:ismap, th:loop, th:multiple, th:novalidate, th:nowrap, th:open, th:pubdate, th:readonly, th:required, th:reversed, th:scoped, th:seamless, th:selected
- 68. 繰り返し記法
- 70. 前回発表資料の終端