【Sprint Boot2】Modelを使ってサーバサイドからフロントエンドへのデータの受け渡し

Sprint Boot2.3の入門ページです。Modelクラスを使ってサーバサイドからクライアント側へデータの受け渡しをしています。Spring Bootの初心者・入門者の方は、参考にしてください。

環境と今回の目的

最終更新日:2021/4/20

以前にEclipseでSpring Bootのプロジェクトを作成し、"Hello,world!"をブラウザに表示する 簡単なウェブアプリを作りました。
Sprint Boot2で初めてのJavaのウェブアプリ開発

今回は、サーバサイドからフロントエンド(クライアント側)へのデータの受け渡しをやっていきます。

・開発環境やバージョンは以下の通りです。
OS:macOS Catalina(バージョン10.15.5)
開発環境:Eclipse(Pleiades All in One、4.16(2020-06)、Java Full Edition版)、(*2020/8/28時点の最新安定版です)
Spring Boot:バージョン2.3.3
Java:11

◾️Eclipse(Pleiades All in One、Java Full Edition版)
Eclipse(Pleiades All in One、Java Full Edition版)は、最初からEclipseの日本語化がされていますし、STS(Spring Tool Suite)やLombokなどの複数の有用なプラグインも入っていて設定済みなので、開発環境構築の手間が省けます。
Eclipseの導入については別ページに書いていますので、参考にしてください。

【Java初心者】Eclipse(Pleiades All in One)をインスールしてJava開発ができるようにする【macOS版】

サーバサイドのControllerクラスの作成、Modelクラスでデータの受け渡しをする

EclipseでのSpring Bootプロジェクトのひな形の作成や新規Javaクラスの作成については、前回の記事を参考にしてください。

前回、TestControllerクラスを作成しましたが、TestControllerクラスに"test2"という新しいメソッドを追加します。
test2メソッドを追加したTestController.javaクラスのコードです。

package com.example.demo.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {

	@RequestMapping("/test")
	public String test() {
		return "test";
	}

	//今回追加したメソッド
	@RequestMapping("/test2")
	public String test2(Model model) {
		model.addAttribute("data", "レスポンステスト");
		model.addAttribute("data2", 100);
		return "test2";
	}
}

test2メソッドは、@RequestMapping("/test2")を付与していますので、「http://localhost:8080/test2」にアクセスした時に呼び出されるメソッドです。
また、引数にModelクラスを指定しています。このModelクラスのaddAttributeメソッドを使う事で、クライアント(フロントエンド)側へデータを返す事ができます。

上のコードでは、"レスポンステスト"というString文字列と"100"というint型の2つのデータをクライアント側へ返すようにしています。"data"と"data2"は、変数というかデータを呼び出す時のキーになる名称です。

フロントエンド(HTML)の作成

次に、フロントエンドのhtmlファイルを作成します。htmlファイルの作成手順も前回の記事を参考にしてください。

作成するファイル名はtest2.htmlです(上で作成したTestControllerクラスのtest2メソッドの戻り値「return "test2"」に合わせています)。作成場所は「src/main/resources」ディレクトリの「templates」ディレクトリです。

test2.htmlを編集します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>サーバサイド(コントローラクラス)から受け取ったデータの表示</h3>
<p th:text="${data}"/>
<p th:text="${data2}"/>
<h3>thymeleafは、この形式でも表示できる</h3>
<div>[[${data}]]</div>
<div>[[${data2}]]</div>
</body>
</html>

TestControllerクラスでは、フロントエンドへ返すデータを"data"と"data2"というキーにセットしました。

そして、Spring Bootのフロントエンド(HTML)は、thymeleafというテンプレートエンジンがよく使われます。
thymeleafでデータを表示する書式は主に、"th:text=${...}"と"[[${...}]]"の2つです。
下の2行は同じ表示になります。どちらもpタグ内にdataの値を表示します。

<p th:text="${data}"/>
<p>[[${data}]]</p>
"[[${...}]]"の方は、データ以外にも文字列なども一緒にpタグ内に書く事が可能です。

また、"th:text=${...}"と"[[${...}]]"は両方とも、javascriptなどのコードのエスケープ処理もしてくれるので、クロスサイトスクリプティング(XSS)などのセキュリティ面でも問題ありません。

アプリの実行と動作確認

それでは、実際にSpring Bootウェブアプリを起動して、ブラウザで動作確認をします。アプリの起動方法については、前回の記事を参考にしてください。

アプリを起動したら、ブラウザで表示確認をしてみましょう。 TestControllerクラスの作成で、test2メソッドには@RequestMapping("/test2")アノテーションを付与しましたので、アクセスするurlは「http://localhost:8080/test2」です。
下のブラウザ画面のように、TestControllerクラスで"data"と"data2"にセットした"レスポンステスト"と"100"という値が2つずつ表示されれば正常に動作しています。
Spring BootでModelの動作確認

最後に

今回は、Modelクラスを使ってサーバサイド(コントローラクラス)からフロントエンドへの簡単なデータの受け渡しをしました。
実際のアプリでは、サーバサイドで色々とデータを加工したり、DBから取得したりして、もっと複雑で多くのデータをModelクラスを使ってフロントエンドへ返す事になると思います。

その他のSpring Bootの記事

Spring Boot2で日記投稿ウェブアプリ開発入門トップページ
Spring Boot2.3,2.4でシンプルな日記投稿ウェブアプリの開発しながら、入門者・初心者にもわかりやすいように説明しています。DBを使用して、新規投稿、編集、削除、一覧表示という基本的なCRUD機能を備えたアプリです。

【Sprint Boot2】GETリクエストでクライアントからサーバサイドへデータ送信【クエリストリング】
【Sprint Boot2】POSTリクエストでクライアント側からサーバサイドへデータ送信