※ 本ページはプロモーションが含まれています。
環境と今回の目的
以前に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版）
Spring Boot：バージョン2.7.5
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クラスでデータの受け渡しをする
こちらの記事でHelloControllerというコントローラークラスを作成しましたが、今回はHelloControllerクラスに"test2"という新しいメソッドを追加します。
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 HelloController {
@RequestMapping("/hello")
public String hello() {
return "hello";
}
//今回追加したメソッド
@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です（上で作成したHelloControllerクラスのtest2メソッドの戻り値「return "test2"」に合わせています）。test2.htmlファイルの作成場所は「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>
HelloControllerクラスのtest2メソッドでは、フロントエンドへ返すデータを"data"と"data2"というキーにセットしました。
そして、Spring Bootのフロントエンド（HTML）は、thymeleafというテンプレートエンジンがよく使われます。
thymeleafでデータを表示する書式は主に、"th:text=${...}"と"[[${...}]]"の2つです。
下の2行は同じ表示になります。どちらもpタグ内にdataの値を表示します。
<p th:text="${data}"/>
<p>[[${data}]]</p>
また、"th:text=${...}"と"[[${...}]]"は両方とも、javascriptなどのコードのエスケープ処理もしてくれるので、クロスサイトスクリプティング(XSS)などのセキュリティ面でも問題ありません。
アプリの実行と動作確認
それでは、実際にSpring Bootウェブアプリを起動して、ブラウザで動作確認をします。
アプリを起動したら、ブラウザで表示確認をしてみましょう。 HelloControllerクラスの作成で、test2メソッドには@RequestMapping("/test2")アノテーションを付与しましたので、アクセスするurlは「http://localhost:8080/test2」です。
下のブラウザ画面のように、HelloControllerクラスで"data"と"data2"にセットした"レスポンステスト"と"100"という値が2つずつ表示されれば正常に動作しています。
最後に
今回は、Modelクラスを使ってサーバサイド（コントローラクラス）からフロントエンドへの簡単なデータの受け渡しをしました。
実際のアプリでは、サーバサイドで色々とデータを加工したり、DBから取得したりして、もっと複雑で多くのデータをModelクラスを使ってフロントエンドへ返す事になると思います。
その他のSpring Bootの記事
Spring Boot2で日記投稿ウェブアプリ開発入門トップページ
Spring Bootでシンプルな日記投稿ウェブアプリの開発しながら、入門者・初心者にもわかりやすいように説明しています。DBを使用して、新規投稿、編集、削除、一覧表示という基本的なCRUD機能を備えたアプリです。
【Sprint Boot2】GETリクエストでクライアントからサーバサイドへデータ送信【クエリストリング】
【Sprint Boot2】POSTリクエストでクライアント側からサーバサイドへデータ送信