※ 本ページはプロモーションが含まれています。
動作環境と今回の目的
前回はコントローラクラスDiaryController.javaを作成し、サーバサイドで日記一覧データをDBから取得してフロントエンドへ返すメソッドを作成しました。
(第5回) コントローラクラスの作成、日記一覧データを取得【Spring Boot2で日記ウェブアプリ】
今回は、コントロールクラスで取得した日記一覧データをフロントエンドで表示するためのHTMLファイル（テンプレートエンジンのThymeleaf）を作成します。MVCモデルで言うとV(View)の部分です。
◾️動作環境やバージョンは以下の通りです。
OS：macOS Big Sur（バージョン11.7.1）
開発環境：Eclipse（Pleiades All in One、4.16(2020-06)、Java Full Edition版）
Spring Bootバージョン：2.7.5
->->2.4でも確認済み
Java：11
データベース：H2
今回作成するファイル
今回作成するファイルを先に書いておきます。
新規に作成するファイルは「summary.html」の1つです。
Thymeleaf、Spring Bootのフロントエンドで使用するテンプレートエンジン
日記一覧データを表示するためのフロントエンドの作成ですが、Spring Bootでは純粋なHTMLファイルではなくテンプレートエンジンのThymeleafを使用します。
テンプレートエンジンはHTMLのひな形がベースにあり、そのHTMLのひな形にデータを合成して、最終的に純粋なHTMLファイルを出力する事ができます。
別の言い方をすると、HTML内で簡単なプログラムとデータを埋め込むことで動的なHTMLが作れます。
今回開発しようとしている日記一覧データの表示では日記一覧データをHTML内で合成するので、その部分は簡単なプログラムのようなコードを書く必要があります。
- 変数のエスケープ
- 条件分岐や繰り返し操作
- 基本オブジェクトや日付・文字列・数値のユーティリティーオブジェクト
- HTMLの共通化テンプレート、フラグメント化
Thymeleafの詳細については、公式サイト等を参考にしてください。
Thymeleafの紹介、Thymeleafって何？
Thymeleaf.org
テンプレートファイルsummary.htmlを作成して、ブラウザ上に日記一覧データを表示する
それでは、日記一覧データを表示するためのテンプレートファイルのThymeleafを作成します。src/main/resources/templateディレクトリ下にsummary.htmlというファイル名で新規作成して編集します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>【Spring Boot】日記投稿ウェブアプリ【Thymeleaf】</title>
</head>
<body>
<h1>日記一覧</h1>
<table>
<tr><th></th><th>投稿日時</th><th></th><th></th></tr>
<tr th:each="diary : ${diarys}">
<td th:text="${diary.bodytext}"></td>
<td th:text="${diary.createDatetime}"></td>
<td><a th:href="@{/diary/edit(id=${diary.id})}" class="btn btn-primary">編集</a></td>
<td>
<form th:action="@{/diary/delete}" method="post">
<input type="hidden" name="id" th:value="${diary.id}"/>
<input type="submit" value="削除"/>
</form>
</td>
</tr>
</table>
<h3>新規投稿</h3>
<form th:action="@{/diary/add}" method="post">
<input type="text" name="newdiary">
<button type="submit">投稿する</button>
</form>
</body>
</html>
◾️テンプレートファイルのファイル名について
テンプレートファイルのファイル名は、コントローラクラスのメソッドの戻り値に合わせる必要があります。
前回のページで、コントローラクラスDiaryController.javaを作成して、日記の一覧データを取得するsummaryメソッドの戻り値で「return "summary";」と書きました。
これはフロントエンドにsummary.htmlファイルを返すという意味です。ですので、ファイル名はsummary.htmlでなければいけません。
まずThymeleafのファイルは、htmlタグで下のようにthの名前空間（ネームスペース）を宣言します。
<html xmlns:th="http://www.thymeleaf.org">
そして、日記の一覧データはtableタグを使って表示しています。投稿した日記の本文と投稿日時のデータを表示している箇所です。
<tr th:each="diary : ${diarys}">
<td th:text="${diary.bodytext}"></td>
<td th:text="${diary.createDatetime}"></td>
前回、コントローラクラスDiaryController.javaのsummaryメソッドで、Modelクラスを使って日記の一覧データをdiarysという変数に入れてフロントエンドに返しました。
ここではそのdiarysを使っています。diarysには日記データが複数入っていますから、'th:each'で繰り返し（ループ）処理をしています。
日記データを1件ずつdiaryという変数に入れ直し、「th:text="${diary.bodytext}"」で日記の本文を表示し、「th:text="${diary.createDatetime}"」で日記の投稿日時を表示しています。
上のテンプレートファイルsummary.htmlには、各日記に編集リンクと削除ボタンがあります。
また、日記一覧データの下には、日記の新規投稿フォームもあります。
この編集、削除、新規作成の3機能はまだサーバサイド（コントローラクラス）の処理を作っていませんので、ボタンを押して実行しようとしても現時点ではエラーになります。今はとりあえずフロントエンドのHTMLを作っているだけです。
サーバサイドの編集、削除、新規作成機能は、また今後作っていきます。
あと、編集リンクのaタグのリンクや削除ボタンのaction属性は、Thymeleafのth:href="@{}"やth:action="@{}"の形式で指定しています。
これはアプリを実行すると、ただのhref属性やaction属性に置き換えられますが、アプリのコンテキストパスを考慮したリンク先に置き換えてくれますし、@{}内では変数を指定する事もできます。
上の編集リンクのaタグも「th:href="@{/diary/edit(id=${diary.id})}"」というように、URLクエリパラメータの部分に変数名のdiary.idを指定しています。変数名をクエリパラメータで使用する時は「(パラメータキー=${'変数名'})」という形式です。
ですのでThymeleafでaタグのhrefやformタグのactionを指定する時は、th:href="@{}"やth:action="@{}"の形式で統一した方が良いと思います。
(広告)AmazonでSpring Boot3(バージョン3系)の初心者向け入門書を探す！本でSpring Bootプログラミング開発を体系的に勉強する！
アプリの実行とブラウザで動作確認
それではSpring Bootのアプリを起動して、ブラウザで動作確認をしてみます。
アクセスするURLは「http://localhost:8080/diary/summary」です。
第3回のページでdata.sqlファイルを作成し、diaryテーブルの初期データを3レコード分作りましたが、そのデータがしっかり表示されています。（編集・削除・新規投稿機能はまだ実装していないので、押してもエラーが出ます。）
EclipseでSpring Bootのサーバサイドのデバッグをする
JavaのWebアプリ(Webサイト)を開発する時にデバッグはやはり必須です。特に仕事ではそうだと思います。
これまではEclipseのコンソールログにSQLログを出力するようにしましたが、それだけでなくSpring Bootのサーバサイドのデバッグ作業もそろそろ確認しておきたいところです。例えば、DBから取得したデータが変数にしっかり入っているかなどのデバッグです。
EclipseでSpring Bootをデバッグする場合は、特別な事をする必要はなく、デバッグしたいコード部分にブレークポイントを付けて、あとは虫アイコンのデバッグボタンを押せばデバッグ起動できます。
デバッグ起動したら、あとはブラウザでアクセスするとEclipseがデバッグ用のパースペクティブ画面に切り替わるのでデバッグできるようになります。
最後に、次回
以上今回は、Spring Bootのウェブアプリで使用されるテンプレートエンジンThymeleafについての簡単な説明と、日記の一覧データを表示するThymeleafのファイルを作成をしました。
これでユーザがサーバにHTTPリクエストをする、サーバサイドでDBからデータを取得してフロントエンドに返す、フロントエンドでサーバから返されたデータを表示する、というウェブアプリの一連の流れの処理をSpring Bootで実現できた事になります。
次回は、ブラウザ上の日記データの一覧の表示結果がちょっと素っ気なさすぎるので、フロントエンドにCSSフレームワークのBootstrapを導入してみたいと思います。ですので次回はSpring Bootとは直接関係のない話となります。
(第7回) Spring Boot2にBootstrap4を導入、CDNとWebjarsの2つの方法【Spring Boot2で日記ウェブアプリ】
Spring Bootの日記投稿ウェブアプリ開発入門トップ