Spring Boot View編

Spring Bootのビュークラスについて

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

主な役割

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

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

ビューの２つの実装方法

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

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

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

基本的な記述方法

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

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

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

コントローラーメソッドの呼び出し

<ビューの記述例>

<form action="/hello" method="get">
    <!-- inputタグを利用してフォーム送信 -->
<form>

コントローラークラスに記述したメソッドはHTTPリクエストによって呼び出される．form要素によるフォーム送信を行うことでHTTPリクエストを送信し，コントローラーメソッドを呼び出す．

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

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

<コントローラーの記述例>

//記述例１
@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="〇〇"で指定

コントローラーへのデータの送信

<ビューの記述例>

<form action="/hello" method="get">
    <input type="text" name="hello">
    <input type="submit" value="送信">
<form>

formタグ内のinput要素でリクエストパラメータの名前を指定する．記述例では，name属性を指定している．

<コントローラーの記述例>

@getMapping("/hello")
public String hello(@RequestParam(name = "hello") String name){
    //コントローラーメソッドの処理を記述
    return "hello";
}   

form要素によって呼び出したコントローラメソッドの引数で，@RequestParamや@ModelAttributeを利用してinputタグに入力したデータを受け取ることができる．この際，input要素の属性に指定したリクエストパラメータ名とアノテーションの引数を一致させる必要がある．
(@RequestParamと@ModelAttributeに関する詳細は「Spring Boot Model編」をチェック)

コントローラーからのデータの受信

コントローラーからビューへデータを渡す場合は，基本的にThymeleafなどのテンプレートエンジンを用いる．
<ビューの記述例>

<p th:text="${message}"></p>

受け取るための要素を用意し，その属性としてth:text="${〇〇}"を指定する．この〇〇にはコントローラーと一致したもの(キー)を入れる．

<コントローラーの記述例>

@getMapping("/hello")
public String hello(Model model){
    model.addAttribute("message","渡したいテキスト");
    return "hello";
}   

コントローラーメソッドの引数にModel modelを記述し，このModelオブジェクトのメソッドaddAttributeを使用することでビューにデータを渡す．addAttributeには第一引数にキー，第二引数に渡すデータを指定し，ビューの記述例のように受け取る．

ModelとModelAndViewの違い

コントローラーからデータを送る際にModelオブジェクトと似ているModelAndViewオブジェクトを利用する場合がある．

@getMapping("/hello")
public String hello(ModelAndView modelAndView){
    modelAndView.setViewName("hello");
    modelAndView.addObject("message","渡したいテキスト");
    return modelAndView; //オブジェクトを返す
}   

• addObject
  ModelオブジェクトのaddAttributeの代わりとなるメソッド．これに関してはほぼ同じである．
• setViewName
  ModelAndViewオブジェクトにデータを渡すビューを指定するメソッド．このメソッドでビューを指定し，returnではオブジェクトを返す．

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