Spring Boot + Thymeleafで新規登録画面を作成する

2020年3月12日

1 はじめに
2 バックエンド（サーバー）側のソースコード
3 フロントエンド（クライアント）側のソースコード
- 3.1 HTML（add.html）
- 3.2 スタイルシート（add.css）
4 動作確認

はじめに

Javaの人気フレームワーク「Spring Boot」と「Spring Boot」と相性の良いテンプレートエンジン「Thymeleaf」を使用して登録画面を作成する方法を紹介します。

また、データベースへの登録はJPAを使用しています。

本記事で作成する画面のイメージは以下の通り。

「キャンセル」リンクまたは「登録」ボタン押下で一覧画面に戻るようにします。

一覧画面については「Spring Boot + Thymeleafで一覧画面を作成する」の記事を参照してください。

[テーブル定義]

物理名	論理名	データ型	NOT NULL	説明
id	ID	BIGINT(20)	〇	主キー（AUTO_INCREMENT）
name	名前	VARCHAR(100)	〇	ユーザーの名前
address	住所	VARCHAR(255)		ユーザーの住所
phone	電話番号	VARCHAR(50)		ユーザーの電話番号
update_date	更新日時	DATETIME	〇	最終更新日時
create_date	更新日時	DATETIME	〇	登録日時
delete_date	更新日時	DATETIME		論理削除した日時

バックエンド（サーバー）側のソースコード

コントローラークラス（UserController.java）

「displayAdd」メソッドで登録画面に表示するオブジェクトを返却し登録画面を表示

登録画面から「登録」ボタンを押下された時に「create」メソッドが動き出し、入力チェックとデータ登録処理を行っています。

package com.example.demo.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.ObjectError;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.example.demo.dto.UserRequest;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;

/**
 * ユーザー情報 Controller
 */
@Controller
public class UserController {

  /**
   * ユーザー情報 Service
   */
  @Autowired
  UserService userService;

  /**
   * ユーザー情報一覧画面を表示
   * @param model Model
   * @return ユーザー情報一覧画面
   */
  @GetMapping(value = "/user/list")
  public String displayList(Model model) {
    List<User> userlist = userService.searchAll();
    model.addAttribute("userlist", userlist);
    return "user/list";
  }

  /**
   * ユーザー新規登録画面を表示
   * @param model Model
   * @return ユーザー情報一覧画面
   */
  @GetMapping(value = "/user/add")
  public String displayAdd(Model model) {
    model.addAttribute("userRequest", new UserRequest());
    return "user/add";
  }

  /**
   * ユーザー新規登録
   * @param userRequest リクエストデータ
   * @param model Model
   * @return ユーザー情報一覧画面
   */
  @RequestMapping(value = "/user/create", method = RequestMethod.POST)
  public String create(@Validated @ModelAttribute UserRequest userRequest, BindingResult result, Model model) {
    if (result.hasErrors()) {
      List<String> errorList = new ArrayList<String>();
      for (ObjectError error : result.getAllErrors()) {
        errorList.add(error.getDefaultMessage());
      }

      model.addAttribute("validationError", errorList);
      return "user/add";
    }

    // ユーザー情報の登録
    userService.create(userRequest);
    return "redirect:/user/list";
  }
}

サービスクラス（UserService.java）

データベース接続はJPA、トランザクション管理は@Transactionalのアノテーションを使用しています。@Transactionalを使う事で「create」メソッドの登録に成功すればコミット、失敗してExceptionが発生すればロールバックを自動で行ってくれます。

ただ@Transactionalは、非検査例外(RuntimeException及びそのサブクラス)が発生した場合はロールバックされるが、検査例外(Exception及びそのサブクラス)が発生した場合はロールバックされずコミットされるので、「@Transactional(rollbackOn = Exception.class)」と定義することで、検査例外もロールバックされるようにしています。

package com.example.demo.service;

import java.util.Date;
import java.util.List;

import javax.transaction.Transactional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.demo.dto.UserRequest;
import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;

/**
 * ユーザー情報 Service
 */
@Service
@Transactional(rollbackOn = Exception.class)
public class UserService {

  /**
   * ユーザー情報 Repository
   */
  @Autowired
  private UserRepository userRepository;

  /**
   * ユーザー情報 全検索
   * @return 検索結果
   */
  public List<User> searchAll() {
    return userRepository.findAll();
  }

  /**
   * ユーザー情報 新規登録
   * @param user ユーザー情報
   */
  public void create(UserRequest userRequest) {
    Date now = new Date();

    User user = new User();
    user.setName(userRequest.getName());
    user.setAddress(userRequest.getAddress());
    user.setPhone(userRequest.getPhone());
    user.setCreateDate(now);
    user.setUpdateDate(now);
    userRepository.save(user);
  }
}

エンティティクラス（User.java）

データベースから取得したデータを格納するエンティティクラスの内容は以下の通り。@Dataアノテーションを使用して、getter、setterの定義を省略しています。

package com.example.demo.entity;

import java.io.Serializable;
import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.Data;

/**
 * ユーザー情報 Entity
 */
@Entity
@Data
@Table(name="user")
public class User implements Serializable {

  /**
   * ID
   */
  @Id
  @Column(name="id")
    @GeneratedValue(strategy=GenerationType.IDENTITY)
  private Long id;

  /**
   * 名前
   */
  @Column(name="name")
  private String name;

  /**
   * 住所
   */
  @Column(name="address")
  private String address;

  /**
   * 電話番号
   */
  @Column(name="phone")
  private String phone;

  /**
   * 更新日時
   */
  @Column(name="update_date")
  private Date updateDate;

  /**
   * 登録日時
   */
  @Column(name="create_date")
  private Date createDate;

  /**
   * 削除日時
   */
  @Column(name="delete_date")
  private Date deleteDate;
}

リポジトリクラス（UserRepository.java）

データベースにアクセスする為のリポジトリクラスの内容は以下の通り。

package com.example.demo.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.example.demo.entity.User;

/**
 * ユーザー情報 Repository
 */
@Repository
public interface UserRepository extends JpaRepository<User, Long> {}

Data Transfer Object（UserRequest.java）

登録画面からのリクエストデータを格納するオブジェクトクラスは以下の通り。

入力チェックは「Bean Validation」を使用しています。@NotEmptyや@Sizeなどを定義することで簡単に入力チェックを実装することができます。

package com.example.demo.dto;

import java.io.Serializable;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.Pattern;
import javax.validation.constraints.Size;

import lombok.Data;

/**
 * ユーザー情報 リクエストデータ
 */
@Data
public class UserRequest implements Serializable {

  /**
   * 名前
   */
  @NotEmpty(message = "名前を入力してください")
  @Size(max = 100, message = "名前は100桁以内で入力してください")
  private String name;

  /**
   * 住所
   */
  @Size(max = 255, message = "住所は255桁以内で入力してください")
  private String address;

  /**
   * 電話番号
   */
  @Pattern(regexp = "0\d{1,4}-\d{1,4}-\d{4}", message = "電話番号の形式で入力してください")
  private String phone;
}

フロントエンド（クライアント）側のソースコード

HTML（add.html）

以下が登録画面のHTMLです。入力チェックエラーが発生した場合は、画面上部へエラー内容を表示するようにしています。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>ユーザー新規登録</title>
    <link href="/css/add.css" rel="stylesheet"></link>
    <meta charset="utf-8" />
  </head>
  <body>
  <table>
  	<tr th:if="${validationError}" th:each="error : ${validationError}">
  		<td style="color:red;" th:text="${error}"></td>
  	</tr>
  </table>
  	<h1>ユーザー新規登録</h1>
  	<form th:action="@{/user/create}" th:object="${userRequest}" th:method="post">
  		<a href="/user/list">キャンセル</a>
    <table>
      <tr>
        <th class="cell_title">名前</th>
        <th class="cell_required">※</th>
        <td><input type="text" th:field="*{name}"></td>
      </tr>
      <tr>
        <th class="cell_title">住所</th>
        <th class="cell_required"></th>
        <td><input type="text" th:field="*{address}"></td>
      </tr>
      <tr>
        <th class="cell_title">電話番号</th>
        <th class="cell_required">※</th>
        <td><input type="text" th:field="*{phone}"></td>
      </tr>
    </table>
    <div class="btn_area_center"><input type="submit" value="登録" class="btn"></div>
  </form>
  </body>
</html>

スタイルシート（add.css）

body {
  width: 80%;
}
table{
    width: 100%;
    border-collapse: collapse;
  font-size: 13px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 6px;
}

table th {
  background-color: #F2F2F2;
}

table input {
  width:90%;
}
.cell_title {
  border-right: 0;
}
.cell_required{
    color: red;
    font-size: 12px;
    width: 10px;
    border-left: 0;
}
.btn {
  width: 100px;
    text-align: center;
}
.btn_area_center {
  margin-top: 20px;
  text-align: center;
}

動作確認

Spring Bootプロジェクトを実行して http://localhost:8080/user/add へアクセスします。

登録画面が表示されます。データを入力し登録が完了できれば完成です。

＼いいね！・フォローをお願いします／

comment コメントをキャンセル

2020/2/11

OpenJDKのインストール手順 | 分かりやすく図解で説明

目次1 AdoptOpenJDKのインストール手順1.1 OpenJDKのダウンロード1.2 OpenJDKのインストール AdoptOpenJDKのインストール手順今まではJavaといえば、OracleのJavaを使用する事が当たり前でした。しかしJDK8(java8)の商用サポート期限が2019年1月で終了し、OracleのJavaは有償化されることになりました。スポンサーリンク OracleのJavaが有償化されたことにより、無料でJavaを利用する場合、OpenJDKというJavaを利用するこ ...

2020/8/13

【Java】Amazon Cognitoのユーザープールを使用する方法

目次1 はじめに（前準備）1.1 pom.xml2 AWSCognitoIdentityProviderの作成2.1 Profileを使用2.2 キー情報を直接指定3 認証処理（ユーザープールのAPIを呼び出す）はじめに（前準備） Java用のSDK（AWS SDK for Java 1.11）でAmazon Cognitoのユーザープールを使用する方法を紹介します。前準備として、AWS マネジメントコンソールからユーザープールを作成する必要があります。※本記事では、ユーザープールの作成は省略していま ...

2020/2/11

【Java】ディープコピーの実装方法

Javaで「ディープコピー」したいのですが、どう実装すればよいですか？ Javaの場合、「ディープコピー」の方法は様々なんだ。プロジェクトによって最適な方法で実装することをお勧めするよ。具体的にはどのような方法があるのですか？本記事では、Javaで「ディープコピー」する方法を紹介していきます。スポンサーリンク目次1 ディープコピーの実装方法1.1 [方法1] Cloneableを使ってディープコピー（clone）する1.2 [方法2] SerializationUtilsライブラリで、ディープコピ ...

2020/8/2

EclipseでSpring Bootの環境構築 | 分かりやすく図解で説明

目次1 EclipseでSpring Bootの環境構築手順2 事前準備2.1 Java、Eclipseのインストール2.2 MySQLのインストール2.3 Spring Tool Suite（STS）のインストール3 Spring Bootプロジェクトの作成3.1 1. 新規プロジェクトの作成3.2 2. Springスターター・プロジェクトの選択3.3 3. Spring Bootプロジェクトの基本設定3.4 4. Spring Bootバージョン、使用する機能の選択3.5 5. Spring Boo ...

2020/4/25

JavaのDateクラスで日付の比較をする方法

目次1 JavaのDateクラスで日付の比較をする方法1.1 DateクラスのcompareToメソッド1.2 Dateクラスのbeforeメソッド1.3 Dateクラスのafterメソッド JavaのDateクラスで日付の比較をする方法スポンサーリンク DateクラスのcompareToメソッド Dateクラスに用意されているcompareToメソッドで日付の比較をすることができます。引数Dateと等しい場合は 0 引数Dateより前の場合は -1 引数Dateより後の場合は 1 具体的な使い方は次 ...

2020/3/10

Spring Tool Suite（STS）のインストール手順 | 分かりやすく図解で説明

目次1 Spring Tool Suite（STS）のインストール手順1.1 1. Eclipseを起動1.2 2. Eclipseマーケットプレースの起動1.3 3. EclipseマーケットプレースでSpring Tool Suiteを検索する1.4 4. インストールする「Spring Tool Suite」を選択1.5 5. インストール内容の確認1.6 6. ライセンスの確認・同意1.7 7. Spring Tool Suite（STS）のインストールが完了するまで待機1.8 8. Eclips ...

PREV: Spring Boot + Thymeleafで詳細画面を作成する
NEXT: Spring Boot + Thymeleafで編集画面を作成する