Practical migration from JSP to Thymeleaf

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

まえおき
本⽇の発表は、発表者である伊賀敏樹が休暇を取得のうえ実施しています。
内容や⾒解は、私伊賀敏樹個⼈のものであり、Wipro および Appirio は当個⼈的⾒
解に⼀切責任を持ちません。

発表者について (1/2)
伊賀敏樹 (いがぴょん) 古くからの Java エンジニア
2003年
於: いがぴょんの⽇記v2
2018年
於: オーケストラ本番直前
15年後
=>

発表者について (2/2)
本業ではアピリオという会社で Heroku + Spring Boot + Thymeleaf を使って
⼤規模エンタープライズシステム開発してます
最近の(強制)マイブームは Classic ASP + VB6
字句解析器や構⽂解析器と戯れています

NEKOGET スライド⽀援サービス (仮称)
本スライドは NEKOGETさんによる有償のスライド⽀援
サービスを受けています。
猫イラストなどは NEKOGET さんの著作物であり、この
発表に限定して有償で NEKOGET さんから使⽤を許
諾されたものです。
猫イラストによる⽀援を受けたい⽅は、NEKOGETさん
に連絡してくださいね。

このセッションで知って欲しいこと
● Thymeleaf を知るためのヒントと道筋を理解する
○ Webサイトの読み解き⽅を知り、セッションの後にも⾃⼒で調べられるように
● Thymeleaf を採⽤する利点
○ 後発 OSS テンプレートエンジンとしての優秀さ
○ 動的Webページサーバレンダリングでのテンプレート⽅式の優位性
○ 共通化・再利⽤を強⼒に⽀援する各種機能
● セッションの前提知識 : Java、HTMLを多少は知っていること

Thymeleaf ってなあに (1/5)
● 汎⽤テンプレートエンジン
● ⽇本語としては「タイムリーフ」と記載・発⾳
● 現代的な設計のテンプレートエンジン
● OSS で開発・提供される
● 過去の様々な Java 向けの OSS テンプレートエンジンのどれよりも、
Thymeleaf が優れている (個⼈の感想です)
● Spring で動的Webページサーバレンダリングをおこなうなら、⼤抵の開発では
Thymeleaf の選択をおすすめしたい
● Thymeleaf はソースコードがとても綺麗です

● 汎⽤テンプレートエンジン
○ テンプレート（定型フォーマット）の内容の⼀部を書き換えることができる仕組み
テンプレート
エンジン処理
連想される、ありがちな例:
- メールの定型⽂の内容の⼀部を書き換え
- HTML の内容の⼀部を書き換え
テキストファイル
(テンプレート)
テキストファイル

● 動的Webページ Java テンプレートエンジン
○ Standard dialect を利⽤することにより HTML ⽤のタグ処理機能が利⽤可能
○ Thymeleaf - Spring 連携パッケージを利⽤することで Spring との連携が可能
テンプレート
エンジン処理
HTML ファイル
HTML ファイル

HTML ファイル
w/Standard dialect
テンプレート処理
Thymeleaf
w/Thymeleaf - Spring 連携
on/Spring Web
Web
Browser
Java
プログラム
HTML
HTTP(S) HTTP(S)

● 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 に対応

動的Webページ
サーバレンダリング

動的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
+ 独⾃属性

Thymeleaf を選択する動機
● Spring Boot による最新系技術を利⽤したい
● Spring との⾼い親和性
● テンプレートファイルが妥当な HTML となるため⾒通しが良い
● デフォルトの挙動がセキュア
● カスタムタグの開発しやすさ
WebLogic / WebSphere / Tomcat / Jboss / GlassFish
的なものを
Spring Boot + Spring Web + Thymeleaf 化

Thymeleaf を選択する動機 : JSP vs Thyemeleaf
● https://www.thymeleaf.org/doc/articles/thvsjsp.html
Thymeleaf なら…
● サーバ上で動作させないでもクライアントのWebブラウザでのレンダリングが可能
○ デザイナーとの分業が可能?
● Thymeleaf のテンプレート⽅式が現代的で有利
● ⾃然なセキュアさについて Thymeleaf のほうが有利
● Fragment 、カスタムタグライブラリの作り勝⼿にて断然有利

動的Webページサーバレンダリング以外 (参考)
● クライアントサイド Web レンダリング
● スマホ・タブレットアプリ
● サーバ間通信
● API
● etc…
⼤抵の場合は、REST/JSON や SOAP をもちいて
HTTP(S) アクセスを提供
そもそも動的Webページサーバレンダリングはレガシー⽅式(!?)…
マイブームは Vue.js / React で SPA

Thymeleaf を使ってみよう (普通はコレジャナイ)
● https://www.thymeleaf.org/download.html
●だがしかし、⼤抵の⼈はここからはダウンロード操作しない
●「Java SE 6 以降」って書いてある!

Thymeleaf を使ってみよう w/Spring Boot
● https://start.spring.io/
みんな⼤好き Spring Initializr
Maven / Java / 2.2.2
/ Web + Thymeleaf

Eclipseだと(1/5)
●みんな⼤好き Eclipse
●File -> Import...
●Eclipse IDE
for Java Developers
が私のお気に⼊り

Eclipseだと(2/5)
●Eclipse Initializr の
出⼒を選択

Eclipseだと(3/5)
●main のアプリケーションクラスを選択
●Run As で実⾏
mvn spring-boot:runmvn の代替記法でも可

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を再起動

Eclipseだと(5/5)
●http://localhost:8080/
●コントローラは使っていないけれど
Thymeleaf のテンプレート処理は動作している

テンプレートレイアウト機能による共通化
• th:fragment
• th:insert
• th:replace
画⾯共通化・標準化が助けられる
画⾯の⼀部共通化などに
⼤変役⽴つ

カスタムダイアレクト作成による共通化・再利⽤
中級者以上向け (シンプルなカスタムダイアレクトの作成向き)
l AbstractAttributeTagProcessor
l AbstractElementTagProcessor
上級者向け (⾼度ななカスタムダイアレクトの作成向き)
l AbstractElementModelProcessor
とてもパワフル
サンプル少ない...
難易度⾼い
https://www.thymeleaf.org/doc/tutorials/3.0/extendingthymeleaf.html#creating-our-own-dialect
Thymeleaf のレンダリング処理に、⾃作のダイアレクトを追加できる仕組み
JSP に対して圧倒的に優位なカスタムダイアレクト作成による共通化・再利⽤の効果

ここが気になる
Thymeleaf

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
詳しくは次ページ

依存関係 (抜粋)
[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

ちょっとインターネットに公開したいときは 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 コンソールから簡単オートスケーリング!

このセッションで知って欲しいこと (再掲)
● Thymeleaf を知るためのヒントと道筋を理解する
○ Webサイトの読み解き⽅を知り、セッションの後にも⾃⼒で調べられるように
● Thymeleaf を採⽤する利点
○ 後発 OSS テンプレートエンジンとしての優秀さ
○ 動的Webページサーバレンダリングでのテンプレート⽅式の優位性
○ 共通化・再利⽤を強⼒に⽀援する各種機能
● セッションの前提知識 : Java、HTMLを多少は知っていること

Appendix : HTMLパーサ、エスケープライブラリ
● attoparser
Thymeleaf が利⽤している HTML parser.
Thymeleaf 互換 html 処理が可能
● unbescape
Thymeleaf が利⽤しているエスケープライブラリ
ソースコードを読もう

Appendix : Maven 重要
● Maven そのもの
● Maven Repository !
みんな⼤好き Maven Repository!
みんなで作ろう Maven Repository!

Appendix : Spring Boot Actuator
groupId: org.springframework.boot
artifactId: spring-boot-starter-actuator
management.endpoints.web.exposure.include=*
本番環境ではこの記述は削除するなどoﬀ に
なにか変だと思ったら

Appendix : Java SE Development Kit 1.8 以降を強く推奨
● 開発環境でバージョン衝突などする場合は
VirtualBox や VMware などの活⽤検討もアリ
● ある程度は新しいバージョンの統合開発環境を利⽤しよう
JDK バージョンアップによって
Eclipse などのバージョンアップが必要に…
● Thymeleaf ⾃体は 1.6 以降…

Thymeleaf
さいしょの⼀歩
(抜粋再掲)
初⼼者向け Thymeleaf ⼊⾨。Thymeleaf はもちろん Spring もあまり知ら
ない⼈向けの Thymeleaf をもちいた Web アプリ開発⼊⾨。
前提条件︓HTML、⼀般的な Web アプリの仕組み、Java、Maven、そして
Spring についての最低限で基礎的な知識があること。
DBの話題は扱いません。
Spring Fest 2018
発表資料より

Initializer の
アウトプットを実⾏

コマンドラインから 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

この時点だと、接続してもエラー
エラーの確認も重要

ようやく
はじめての Thymeleaf
まずは静的コンテンツ

静的リソースによる Hello World.
.
├── src
│ ├── main
│ │ └── resources
│ │ ├── application.properties
│ │ ├── static
│ │ └── templates
│ │ └── index.html <html>
<head>
</head>
<body>
<p>Hello the Thymeleaf World!</p>
</body>
</html>
index.html

静的リソースによる Hello World.
ctrl+C
mvn spring-boot:run
とめる
うごかす

Bootstrap 付き静的 Hello World.
<!doctype html>
<html lang="ja">
<head>
<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>
<p>Hello the Thymeleaf World!</p>
</body>
</html>
index.html

はじめての
動的な Thymeleaf

はじめての動的な Hello World (1)
.
├── src
│ ├── main
│ │ ├── java
│ │ │ └── jp
│ │ │ └── igapyon
│ │ │ └── webdemo
│ │ │ ├── HelloController.java
│ │ │ └── WebdemoApplication.java
│ │ └── resources
│ │ └── templates
│ │ ├── hello.html
│ │ └── index.html
テンプレート
コントローラ
ファイルの配置パスを間違えると
動作しない

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

<!doctype html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<link rel="stylesheet" href="https://maxcdn.boots…(省略)...">
</head>
<body>
<p th:text="${message}"/>
</body>
</html>
hello.html

やった
Hello World だっ!
mvn spring-boot:run
ctrl+C で停⽌する⽅は適宜...

動的な Thymeleaf
のエラーの例

Thymeleaf の典型的なエラー例 (1) - マッピング無し
マッピングがない URL の場合のエラー例

@Controller
public class HelloController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("message", "Hello World from Thymeleaf.");
return "hello2";
}
Thymeleaf の典型的なエラー例 (2) - テンプレート無し
わざとテンプレートを存在させない例
エラー確認体験重要

Thymeleaf での
テキスト出⼒⽅法

Thymeleaf でのテキスト出⼒⽅法 - 基本
<body>
<p th:text="${message}"/>
</body>
hello.html から
基本形

Thymeleaf でのテキスト出⼒⽅法 - 応⽤1
<body>
<p>[[${message}]]</p>
</body>
hello.html から
簡単系

Thymeleaf でのテキスト出⼒⽅法 - 応⽤2
<body>
<p><span
th:text="${message}"
th:remove="tag"/></p>
</body>
hello.html から
th:remove 属性で
タグ出⼒を制御
タグが不要な時に便利
困った時の特
効薬!?

Standard Expression
について

$ って、なあに
${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
$ と * が、よく利⽤される

Standard Expression を使える属性
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-
value-to-specific-attributes
th:abbr、th:accept、th:accept-charset、th:accesskey、th:action、th:align、th:alt、th:archive、th:audio
th:autocomplete、th:axis、th:background、th:bgcolor、th:border、th:cellpadding、th:cellspacing、
th:challenge、th:charset、th:cite、th:class、th:classid、th:codebase、th:codetype、th:cols、th:colspan
th:compact、th:content、th:contenteditable、th:contextmenu、th:data、th:datetime、th:dir、th:draggable
th:dropzone、th:enctype、th:for、th:form、th:formaction、th:formenctype、th:formmethod、th:formtarget
th:fragment、th:frame、th:frameborder、th:headers、th:height、th:high、th:href、th:hreflang、th:hspace
th:http-equiv、th:icon、th:id、th:inline、th:keytype、th:kind、th:label、th:lang、th:list、th:longdesc
th:low、th:manifest、th:marginheight、th:marginwidth、th:max、th:maxlength、th:media、th:method
th:min、th:name、th:onabort、th:onafterprint、th:onbeforeprint、th:onbeforeunload、th:onblur
th:oncanplay、th:oncanplaythrough、th:onchange、th:onclick、th:oncontextmenu、th:ondblclick
th:ondrag、th:ondragend、th:ondragenter、th:ondragleave、th:ondragover、th:ondragstart、th:ondrop
th:ondurationchange、th:onemptied、th:onended、th:onerror、th:onfocus、th:onformchange
th:onforminput、th:onhashchange、th:oninput、th:oninvalid、th:onkeydown、th:onkeypress、th:onkeyup
th:onload、th:onloadeddata、th:onloadedmetadata、th:onloadstart、th:onmessage、th:onmousedown

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

Iteration
https://www.thymeleaf.org/doc/tutorials/3.0/u
singthymeleaf.html#iteration-basics

Practical migration from JSP to Thymeleaf

Recommended

More Related Content

What's hot (20)

Similar to Practical migration from JSP to Thymeleaf (20)

Practical migration from JSP to Thymeleaf