Spring Boot View編

# Spring Bootのビュークラスについて
本記事は，Spring Bootのビューについて，主な役割や基本的な記述方法について説明する．
「Spring Boot」とは何かについては，以下の記事にまとめたのでそちらを参照してください．

https://qiita.com/thirai67/items/0944561dd46da84abdfa

# 主な役割
ビューはユーザに表示する情報を生成する役割を持つ．具体的には，サーバサイド(コントローラーやモデル)で処理されたデータをテンプレートエンジンを使用して，<ins>ブラウザに表示するための画面を生成する</ins>．

:::note info
テンプレートエンジンとは
テンプレートとなる雛形とデータモデルで表現される入力データを合成し，ドキュメントを出力するソフトウェアのこと．雛形はView，入力データはControllerということができる．
:::

# ビューの２つの実装方法
Webアプリケーションにおけるビューの実装方法は２つのパターンがある．
**１．クライアントサイドで生成するパターン**
サーバからはデータのみを受け取り，クライアント側のJavScriptを使用してHTMLを生成する．コントローラは``@RestContoller``を指定し，JSON形式のデータを受け取ってビューを生成する．

**２．サーバサイドで生成するパターン**
サーバ側でテンプレートエンジンを使用し，テンプレートに処理したデータを埋め込むことで最終的なHTMLを生成する．コントローラは``@Controller``を指定し，HTMLドキュメント自体をクライアント側に送信する．

Spring Bootを利用する場合は，基本的に**サーバーサイドで生成するパターン**でビューを実装する．

# 基本的な記述方法
Spring Bootにおけるビューの記述方法は基本的にHTMLと一緒であるが，テンプレートエンジンを利用することによって，コントローラからのデータを表示させることができる．本記事ではコントローラとのやりとりを行うために記述すべきことについて扱う．

ビューがコントローラーとやりとりを行うために以下の機能を実装する必要がある．
１．コントローラーメソッドの呼び出し
２．コントローラーへのデータの送信
３．コントローラーからのデータの受信

Spring Bootではテンプレートエンジンとして基本的にThymeleafを利用する．通常のHTMLの記述方法にThymeleafの記述を加えるだけなので，Thymeleafの詳細に関してはここでは触れない．


## コントローラーメソッドの呼び出し
**<ビューの記述例>**
```html
<form action="/hello" method="get">
    <!-- inputタグを利用してフォーム送信 -->
<form>
```
コントローラークラスに記述したメソッドはHTTPリクエストによって呼び出される．form要素によるフォーム送信を行うことでHTTPリクエストを送信し，コントローラーメソッドを呼び出す．

呼び出すコントローラーメソッドを指定するには，form要素内に以下の２つの属性を設定する．
１．action属性
フォームに入力された情報の**送信先**を指定するための属性．Thymeleafを利用する場合は，``th:action="@{/hello}"``となる．

２．method属性
データの**送信方法**(HTTPメソッド)を指定するための属性．リクエストの目的に応じて``get``や``post``を使い分けるために指定する．

**<コントローラーの記述例>**
```Java
//記述例１
@getMapping("/hello")
public String hello(...){
    //コントローラーメソッドの処理を記述
    return "hello";
}
//記述例２
@RequestMapping(value="/hello", method=RequestMethod.GET)
public String hello(...){
    //コントローラーメソッドの処理を記述
    return "hello";
}
    
```
form要素の属性とMappingアノテーションの引数を共通させることで結びつけることができる．Mappingアノテーションには記述例で示した通り2種類の記述方法がある．

**記述例１:**``〇〇Mapping``
method属性→``getMapping``または``postMapping``を使い分ける．
action属性→``getMapping("/~~")``のようにアノテーションの引数として指定する．

**記述例2:**``RequestMapping``
どちらもアノテーションの引数として記述する．
method属性→``method=RequestMethod.〇〇``で指定
action属性→``value="〇〇"``で指定

## コントローラーへのデータの送信
**<ビューの記述例>**
```html
<form action="/hello" method="get">
    <input type="text" name="hello">
    <input type="submit" value="送信">
<form>
```
formタグ内のinput要素でリクエストパラメータの名前を指定する．記述例では，name属性を指定している．

**<コントローラーの記述例>**
```Java
@getMapping("/hello")
public String hello(@RequestParam(name = "hello") String name){
    //コントローラーメソッドの処理を記述
    return "hello";
}   
```
form要素によって呼び出したコントローラメソッドの引数で，``@RequestParam``や``@ModelAttribute``を利用してinputタグに入力したデータを受け取ることができる．この際，input要素の属性に指定したリクエストパラメータ名とアノテーションの引数を一致させる必要がある．
(``@RequestParam``と``@ModelAttribute``に関する詳細は「Spring Boot Model編」をチェック)

## コントローラーからのデータの受信
コントローラーからビューへデータを渡す場合は，基本的にThymeleafなどのテンプレートエンジンを用いる．
**<ビューの記述例>**
```html
<p th:text="${message}"></p>
```
受け取るための要素を用意し，その属性として``th:text="${〇〇}"``を指定する．この〇〇にはコントローラーと一致したもの(キー)を入れる．

**<コントローラーの記述例>**
```Java
@getMapping("/hello")
public String hello(Model model){
    model.addAttribute("message","渡したいテキスト");
    return "hello";
}   
```
コントローラーメソッドの引数に``Model model``を記述し，このModelオブジェクトのメソッド``addAttribute``を使用することでビューにデータを渡す．``addAttribute``には第一引数にキー，第二引数に渡すデータを指定し，ビューの記述例のように受け取る．

## ModelとModelAndViewの違い
コントローラーからデータを送る際にModelオブジェクトと似ている**ModelAndViewオブジェクト**を利用する場合がある．
```Java
@getMapping("/hello")
public String hello(ModelAndView modelAndView){
    modelAndView.setViewName("hello");
    modelAndView.addObject("message","渡したいテキスト");
    return modelAndView; //オブジェクトを返す
}   
```
* ``addObject``
Modelオブジェクトの``addAttribute``の代わりとなるメソッド．これに関してはほぼ同じである．
* ``setViewName``
ModelAndViewオブジェクトにデータを渡すビューを指定するメソッド．このメソッドでビューを指定し，returnではオブジェクトを返す．

modelAndViewを利用することのメリットは，ビューに渡すデータだけでなく，<ins>表示するビュー自体も制御することができる</ins>ため，条件によって表示するビューを切り替えることも可能である．