Weitere ähnliche Inhalte Ähnlich wie 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
3. 発表者について (1/2)
伊賀 敏樹 (いがぴょん) 古くからの Java エンジニア
2003年
於: いがぴょんの⽇記v2
2018年
於: オーケストラ本番直前
15年後
=>
4. 発表者について (2/2)
本業では アピリオ という会社で Heroku + Spring Boot + Thymeleaf を使って
⼤規模エンタープライズシステム開発してます
最近の(強制)マイブームは Classic ASP + VB6
字句解析器や構⽂解析器と戯れています
5. NEKOGET スライド⽀援サービス (仮称)
本スライドは NEKOGETさんによる有償のスライド⽀援
サービスを受けています。
猫イラストなどは NEKOGET さんの著作物であり、この
発表に限定して有償で NEKOGET さんから使⽤を許
諾されたものです。
猫イラストによる⽀援を受けたい⽅は、NEKOGETさん
に連絡してくださいね。
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 に対応
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
20. Thymeleaf を使ってみよう (普通は コレジャナイ)
● https://www.thymeleaf.org/download.html
●だがしかし、⼤抵の⼈はここからはダウンロード操作しない
●「Java SE 6 以降」って書いてある!
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 コンソールから簡単オートスケーリング!
35. このセッションで知って欲しいこと (再掲)
● Thymeleaf を知るためのヒントと道筋を理解する
○ Webサイトの読み解き⽅を知り、セッションの後にも⾃⼒で調べられるように
● Thymeleaf を採⽤する利点
○ 後発 OSS テンプレートエンジンとしての優秀さ
○ 動的Webページ サーバレンダリングでのテンプレート⽅式の優位性
○ 共通化・再利⽤を強⼒に⽀援する各種機能
● セッションの前提知識 : Java、HTMLを多少は知っていること
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 以降…
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
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
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 から
基本形
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