SpringBootにおけるテンプレートエンジンの活用

2023.5.12 Xiao
SpringBootにおける
テンプレートエンジンの活用
ー Thymeleafの基本的な使い方ー

目次
• まえがき
• テンプレートエンジンとは
• テンプレートエンジン Thymeleaf の基本的な使い方
• まとめ

まえがき
• 今回の発表資料の参考文献
・掌田津耶乃「SpringBoot3 プログラミング入門」秀和システム（2023）
第3章「テンプレートエンジンの活用」より、
3-1「Thymeleafテンプレートエンジン」の内容を取り上げる。
※ 第3章「テンプレートエンジンの活用」には、Thymeleafの他に、
Mustache, Groovy templates の内容もあるが、
今回の発表では、Thymeleafのみの説明とする。

テンプレートエンジンとは
SpringBootにおけるMVCモデル
• SpringBootのWebアプリケーションでは、「MVCモデル」をベースに設計されている。
＜MVCモデル＞
クライアント
Controller
Model
View データベース
Controller : 全体の処理の制御を行うもの
Model: アプリケーションで使うデータを管理するもの
View: 画面の表示を扱うもの

テンプレートエンジンとは
SpringBootにおけるMVCモデル
• テンプレートエンジン： MVCモデルの中の ”View” の部分を担当するもの。
• テンプレートとなるテキスト（HTML etc..）を元に、データを組み込んでWebページを生成する。
• テキストのコードを出力するだけでなく、値や式を埋め込んで、実行時に演算処理して画面に表示す
ることもできる。
• テンプレートエンジンには種類がある。（Thymeleaf, Groovy templates etc..）
• Thymeleaf：JavaのWebアプリケーション開発での利用を前提に開発されているテンプレートエンジン。

Thymeleafの基本的な使い方
値の受け渡し（テンプレート側の書き方）
• テンプレート内に変数を埋め込んでおき、コントローラ側で必要な値を渡して表示させる。
<〇〇 th:text=“値”>
例1）テンプレートHTMLの<body>内
<body class="container">
<h1 class="display-4 mb-4">Hello page</h1>
<p class="h6 alert alert-primary" th:text="${msg}"></p>
</body>
${ 変数名 } → 変数を埋め込む時の基本的な書き方

値の受け渡し（コントローラ側の書き方）
例1）コントローラ側（Modelの利用）
@Controller
public class EventschedulerController {
@RequestMapping("/")
public String index(Model model) {
model.addAttribute("msg", “This is a sample message.”);
return "index";
}
}
※ indexメソッドの引数 Model → 後ほど説明
・値にコメントを入れる場合

値の受け渡し（画面表示）
例1）画面表示
※受け渡した値 ”This is a sample message.” が表示される。

例2）コントローラ側（Modelの利用）
@Controller
@RequestMapping("/{num}")
public String index(@PathVariable int num, Model model) {
int res = 0;
for(int i = 1; i <= num; i++) {
res += i;
}
model.addAttribute("msg", "total: " + res);
return "index";
}
}
・値にパラメータ変数を入れる場合

例2）画面表示
※受け渡した値 ”total” + res が表示される。
/22 → num = 22;
int res = 0;
for(int i = 1; i <= num; i++) {
res += i;
}

例3）コントローラ側（ModelAndViewの利用）
@Controller
@RequestMapping("/{num}")
public ModelAndView index(@PathVariable int num, ModelAndView mav) {
int res = 0;
for(int i = 1; i <= num; i++) {
res += i;
}
mav.addObject("msg", "total: " + res);
mav.setViewName("index");
return mav;
}
}
・例2のindexメソッドの引数をModel → ModelAndViewに書き換える。

例3）画面表示
・Modelを使った時と結果は同じ。

値の受け渡し（ModelとModelAndView）
・ModelとModelAndViewの違い
@Controller
//<省略>
model.addAttribute("msg", "total: " + res);
return “index";
}
}
・Model
・ModelAndView
@Controller
//<省略>
mav.addObject("msg", "total: " + res);
return mav;
}
}
Model
→テンプレート側に渡す情報をまとめて管理する。
（今回は変数msgのみである。）
実際に表示するテンプレートは、
returnで名前を返すことで指定する。
ModelAndView
→使用するテンプレートとそこで使われるデータを、
まとめて一つの戻り値で返すことができる。

フォームを利用する
• クライアント側で入力した値を受け渡す。(form)
例4）テンプレートHTMLの<body>内
<p th:text="${msg}"></p>
<div class="h6 alert alert-primary">
<form method="post" action=".">
<div class="input-group">
<input type="text" class="form-control me-1" name="text1" th:value="${value}" />
<span class="input-group-btn">
<input type="submit" class="btn btn-primary px-4" value="Click" />
</span>
</div>
</form>
</div>
</body>

例4）コントローラ側（ModelAndView）
@Controller
@RequestMapping(value="/", method=RequestMethod.GET)
public ModelAndView index(ModelAndView mav) {
mav.addObject("msg", "Fill in your name, please.");
return mav;
}
@RequestMapping(value="/", method=RequestMethod.POST)
public ModelAndView form(@RequestParam("text1") String str, ModelAndView mav) {
mav.addObject("msg", "Hi," + str +"!!");
mav.addObject("value", str);
return mav;
}
}
HTTPメソッド
→ アクセスの方法をメソッドとして用意している。
GET :
指定したURLにブラウザなどでアクセスした時。
POST :
フォームに入力した内容などが送られてくる。
※@RequestMapping(method=〇〇)と記載している。
↓
GET : @GetMapping(“/”)
POST : @PostMapping(“/”)
＊このように簡単に書くこともできる。

フォームを利用する（画面表示）
例4）画面表示
入力フォームに
”John Doe”と入力してClick

ページの利用（フォワードとリダイレクト）
• あるアドレスにアクセスしたとき、必要に応じて別のアドレスに移動させたい場合に利用される。
• フォワード：サーバー内部で別のページを読み込み表示するもの。
• リダイレクト：クライアント側に送られた後で別のページに移動させるもの。
アクセスしているアドレスそのものも移動先のものに変更される。
例5）テンプレートHTMLの<body>内（例１と同じ）
<p class="h6 alert alert-primary" th:text="${msg}"></p>
</body>

例5）コントローラ側（ModelAndView）
@Controller
public class eventManageController {
@RequestMapping(value="/", method=RequestMethod.GET)
public ModelAndView index(ModelAndView mav) {
mav.addObject("msg", "This is /index page.");
return mav;
}
@RequestMapping("/home")
public String home() {
return "forward:/";
}
@RequestMapping("/other")
public String other() {
return "redirect:/";
}
}
http://localhost:8080/home でアクセス
→フォワード
http://localhost:8080/other でアクセス
→リダイレクト

画面表示
例5）画面表示
・http://localhost:8080 でアクセス
http://localhost:8080/other でアクセス
・http://localhost:8080/home でアクセス
・http://localhost:8080/other でアクセス後
forward
redirect

• Thymeleafには、「値を受け渡して、その値を表示する( th:text )」という機能の他にも様々
な機能がある。
• 条件処理 th:if / th:unless
• 繰り返し処理 th:each
• スイッチ処理 th:switch
＊書き方と表示例を次ページより簡単に説明する。

条件処理 th:if / th:unless
• 条件による表示：「その要素を表示するかどうか。」を示す属性が用意されている。
・ <〇〇 th:if=“${ 値 }”> ：値が真だと表示
・ <〇〇 th:unless=“${ 値 }”> ：値が偽だと表示
例）アクセスするごとに表示が変わるサンプル
・boolean変数を用意
boolean
fl
ag = false;
・アクセスするごとに切り替え
fl
ag = !
fl
ag
真の表示偽の表示

繰り返し処理 th:each
• ${ コレクション }に複数の値を保管する。コレクションから値を順に取り出して変数に代入。
要素内に記述された内容を出力。
例）コレクションに指定した3つの値を
繰り返し表示させるサンプル
・コントローラ側
String[] data = new String[] {“a”, “bb”, “ccc”};
・テンプレート側
・ <〇〇 th:each=“変数名 : ${ コレクション }”>
…繰り返す表示内容…
<〇〇>
<ul th:each="item:${data}">
<li th:text="${item}"></li>
</ul>

スイッチ処理 th:switch
• 値に応じて表示を切り替える。例）パラメータ変数を用意し、その値に応じて表示する。
・テンプレート側
・ <〇〇 th:switch=“${ 変数 }”>
<△△ th:case=“ 値1 ”>
<△△ th:case=“ 値1 ”>
<〇〇>
<div th:switch="${number}">
<p th:case="1" th:text="One"></p>
<p th:case="2" th:text="Two"></p>
<p th:case="3" th:text="Three"></p>
</div>
…

まとめ
• テンプレートエンジン Thymeleaf の基本的な使い方（テンプレート・コント
ローラの書き方）について取り上げた。
• Thymeleafには取り上げた他にも、多くの機能が搭載されている。
• ${ }による変数の埋め込みさえ抑えれば、基本的なWebページの作成はでき
る。

ご清聴ありがとうございました。

SpringBootにおけるテンプレートエンジンの活用

More Related Content

What's hot (20)

Similar to SpringBootにおけるテンプレートエンジンの活用 (20)

More from iPride Co., Ltd. (20)

SpringBootにおけるテンプレートエンジンの活用