Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à SpringBootにおけるテンプレートエンジンの活用
Similaire à SpringBootにおけるテンプレートエンジンの活用 (20)
Plus de iPride Co., Ltd.
Plus de iPride Co., Ltd. (20)
Dernier
Dernier (8)
SpringBootにおけるテンプレートエンジンの活用
- 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に書き換える。
- 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(“/”) ＊このように簡単に書くこともできる。
- 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. ご清聴ありがとうございました。