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

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

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

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

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

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

6. 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> ${ 変数名 } → 変数を埋め込む時の基本的な書き方

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

8. Thymeleafの基本的な使い方値の受け渡し（画面表示）例1）画面表示 ※受け渡した値 ”This is a sample message.” が表示される。

9. Thymeleafの基本的な使い方値の受け渡し（コントローラ側の書き方）例2）コントローラ側（Modelの利用） @Controller public class EventschedulerController { @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"; } } ・値にパラメータ変数を入れる場合

10. Thymeleafの基本的な使い方値の受け渡し（画面表示）例2）画面表示 ※受け渡した値 ”total” + res が表示される。 /22 → num = 22; int res = 0; for(int i = 1; i <= num; i++) { res += i; }

11. Thymeleafの基本的な使い方値の受け渡し（コントローラ側の書き方）例3）コントローラ側（ModelAndViewの利用） @Controller public class EventschedulerController { @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に書き換える。

12. Thymeleafの基本的な使い方値の受け渡し（画面表示）例3）画面表示・Modelを使った時と結果は同じ。

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

14. Thymeleafの基本的な使い方フォームを利用する • クライアント側で入力した値を受け渡す。(form) 例4）テンプレートHTMLの<body>内 <body class="container"> <h1 class="display-4 mb-4">Hello page</h1> <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>

15. Thymeleafの基本的な使い方フォームを利用する例4）コントローラ側（ModelAndView） @Controller public class EventschedulerController { @RequestMapping(value="/", method=RequestMethod.GET) public ModelAndView index(ModelAndView mav) { mav.addObject("msg", "Fill in your name, please."); mav.setViewName("index"); 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); mav.setViewName("index"); return mav; } } HTTPメソッド → アクセスの方法をメソッドとして用意している。 GET : 指定したURLにブラウザなどでアクセスした時。 POST : フォームに入力した内容などが送られてくる。 ※@RequestMapping(method=〇〇)と記載している。 ↓ GET : @GetMapping(“/”) POST : @PostMapping(“/”) ＊このように簡単に書くこともできる。

16. Thymeleafの基本的な使い方フォームを利用する（画面表示）例4）画面表示入力フォームに ”John Doe”と入力してClick

17. Thymeleafの基本的な使い方ページの利用（フォワードとリダイレクト） • あるアドレスにアクセスしたとき、必要に応じて別のアドレスに移動させたい場合に利用される。 • フォワード：サーバー内部で別のページを読み込み表示するもの。 • リダイレクト：クライアント側に送られた後で別のページに移動させるもの。アクセスしているアドレスそのものも移動先のものに変更される。例5）テンプレート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>

18. Thymeleafの基本的な使い方フォームを利用する例5）コントローラ側（ModelAndView） @Controller public class eventManageController { @RequestMapping(value="/", method=RequestMethod.GET) public ModelAndView index(ModelAndView mav) { mav.addObject("msg", "This is /index page."); mav.setViewName("index"); return mav; } @RequestMapping("/home") public String home() { return "forward:/"; } @RequestMapping("/other") public String other() { return "redirect:/"; } } http://localhost:8080/home でアクセス →フォワード http://localhost:8080/other でアクセス →リダイレクト

19. Thymeleafの基本的な使い方画面表示例5）画面表示・http://localhost:8080 でアクセス http://localhost:8080/other でアクセス・http://localhost:8080/home でアクセス・http://localhost:8080/other でアクセス後 forward redirect

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

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

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

23. Thymeleafの基本的な使い方スイッチ処理 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> …

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

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

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

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

Recommended

More Related Content

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

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

More from iPride Co., Ltd.

More from iPride Co., Ltd.(20)

Recently uploaded

Recently uploaded(10)

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