目次
はじめに
前回の記事では「Spring Boot」と「Thymeleaf」を使用して詳細画面を作成しました。本記事では詳細画面から「削除」リンクを押下して、対象データを物理削除する方法を紹介します。
※論理削除をするのが一般的ですが、本記事では物理削除しています。
[ユーザー情報一覧画面]

[本記事で作成するユーザー詳細画面]

ユーザー情報一覧画面の「詳細」ボタン押下で、ユーザー詳細画面に遷移。
一覧画面の作成方法はこちら
今回は、ユーザー詳細画面の「削除」ボタンを押下 → 対象データを物理削除 → ユーザー情報一覧画面へ戻るまでの流れを紹介します。
スポンサーリンク
テーブル定義
今回の例で使用するテーブル定義は次のとおり。
[テーブル定義]
| 物理名 | 論理名 | データ型 | NOT NULL | 説明 | 
| id | ID | BIGINT | 〇 | 主キー(AUTO_INCREMENT) | 
| name | 名前 | VARCHAR(100) | 〇 | ユーザーの名前 | 
| address | 住所 | VARCHAR(255) | ユーザーの住所 | |
| phone | 電話番号 | VARCHAR(50) | ユーザーの電話番号 | |
| update_date | 更新日時 | DATETIME | 〇 | 最終更新日時 | 
| create_date | 作成日時 | DATETIME | 〇 | 登録日時 | 
| delete_date | 削除日時 | DATETIME | 論理削除した日時 | 
開発環境
開発環境は以下のとおり。
| 開発環境 | 名称 | 説明 | 
| 開発言語 | Java | 人気の開発言語 | 
| 開発ツール | Eclipse | Javaでの定番開発ツール | 
| フレームワーク | Spring Boot | 人気のSpringフレームワークをベースとしたフレームワーク | 
| テンプレートエンジン | Thymeleaf | Spring Bootと相性が良いテンプレートエンジン | 
| データベース | MySQL | フリーで利用できる人気データベース | 
その他 データベースへの接続は「Spring Data JPA」、画面のデザインには「Bootstrap」を使用しています。
ディレクトリ構成
ディレクトリ構成は次のとおり。
springSample
  |
  |___src.main.java
       |
       |___com.example.demo
       |    |
       |    |___controller
       |    |    |
       |    |    |__UserController.java
       |    |
       |    |___entity
       |    |    |
       |    |    |___User.java
       |    |
       |    |___repository
       |    |    |
       |    |    |___UserRepository.java
       |    |
       |    |___service
       |         |
       |         |___UserService.java
       |
       |___src.main.resources
            |
            |___templates
            |    |
            |    |___common
            |    |    |
            |    |    |___head.html 
            |    |
            |    |___user
            |         |
            |         |___add.html
            |         |
            |         |___list.html
            |         |
            |         |___view.html
            |
            |___application.propertiesバックエンド(サーバー)側のソースコード
コントローラークラス(UserController.java)
コントローラクラスの内容は以下のとおり。
package com.example.demo.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
/**
 * ユーザー情報 Controller
 */
@Controller
public class UserController {
  /**
   * ユーザー情報 Service
   */
  @Autowired
  private 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) {
    return "user/add";
  }
  /**
   * ユーザー情報詳細画面を表示
   * @param id 表示するユーザーID
   * @param model Model
   * @return ユーザー情報詳細画面
   */
  @GetMapping("/user/{id}")
  public String displayView(@PathVariable Long id, Model model) {
    User user = userService.findById(id);
    model.addAttribute("userData", user);
    return "user/view";
  }
  /**
   * ユーザー情報削除
   * @param id 表示するユーザーID
   * @param model Model
   * @return ユーザー情報詳細画面
   */
  @GetMapping("/user/{id}/delete")
  public String delete(@PathVariable Long id, Model model) {
    // ユーザー情報の削除
    userService.delete(id);
    return "redirect:/user/list";
  }
}ユーザー情報の削除は「delete」メソッドで実装。サービスクラスを呼び出し物理削除後、ユーザー情報一覧画面へリダイレクトしています。
ユーザー情報一覧画面へリダイレクトすると「displayList」メソッドが呼ばれます。「displayList」メソッドでは、一覧に表示する最新データを取得しています。
サービスクラス(UserService.java)
サービスクラスの内容は以下のとおり。
package com.example.demo.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.demo.entity.User;
import com.example.demo.repository.UserRepository;
/**
 * ユーザー情報 Service
 */
@Service
public class UserService {
  /**
   * ユーザー情報 Repository
   */
  @Autowired
  private UserRepository userRepository;
  /**
   * ユーザー情報 全検索
   * @return 検索結果
   */
  public List<User> searchAll() {
    return userRepository.findAll();
  }
  /**
   * ユーザー情報 主キー検索
   * @return 検索結果
   */
  public User findById(Long id) {
    return userRepository.findById(id).get();
  }
  /**
   * ユーザー情報 物理削除
   * @param id ユーザーID
   */
  public void delete(Long id) {
    User user = findById(id);
    userRepository.delete(user);
  }
}JPAが提供している「findById」で対象データを抽出後、「delete」関数を使用してユーザー情報を物理削除しています。
エンティティクラス(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> {}フロントエンド(クライアント)側のソースコード
スポンサーリンク
ユーザー情報詳細画面(view.html)
共通ヘッダ(head.html)、ユーザー情報一覧画面(list.html)のHTMLは一覧画面作成の記事で紹介していますので、そちらの記事をご覧ください。
一覧画面作成の記事はこちら
ユーザー情報詳細のHTMLは以下のとおり。画面のデザインにはBootstrapを使用しています。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
<head
  th:replace="common/head :: head_fragment(title = 'ユーザー情報詳細', scripts = ~{::script}, links = ~{::link})"></head>
<body>
  <div class="container">
    <h1>ユーザー情報詳細</h1>
    <div th:object="${userData}">
      <div class="row mx-md-n5">
        <div class="col-2 pt-3 border bg-light">名前</div>
        <div class="col pt-3 border">
          <p th:text="*{name}"></p>
        </div>
      </div>
      <div class="row mx-md-n5">
        <div class="col-2 pt-3 border bg-light">住所</div>
        <div class="col pt-3 border">
          <p th:text="*{address}"></p>
        </div>
      </div>
      <div class="row mx-md-n5">
        <div class="col-2 pt-3 border bg-light">電話番号</div>
        <div class="col pt-3 border">
          <p th:text="*{phone}"></p>
        </div>
      </div>
    </div>
    <br />
    <div class="text-center">
      <a th:href="@{/user/{id}/edit(id=*{id})}" class="btn btn-primary disabled" aria-disabled="true"> 編集 </a>
      <a th:href="@{/user/{id}/delete(id=*{id})}" class="btn btn-secondary"> 削除 </a>
      <a href="/user/list" class="btn btn-secondary">一覧に戻る</a>
    </div>
  </div>
</body>
</html>動作確認
Spring Bootプロジェクトを実行して http://localhost:8080/user/list へアクセスします。

ユーザー情報一覧画面が表示されるので、一覧から対象ユーザーの「詳細」ボタンを押下します。

ユーザー情報詳細画面が表示されるので「削除」ボタンを押下するとユーザー情報一覧画面へ戻ります。削除したデータがユーザー情報一覧画面に表示されていなければ完了です。
 