(第8回) 日記の削除機能を追加、CRUDのD(Delete、削除)【Spring Boot2で日記ウェブアプリ】

動作環境と今回の目的

前回は、Spring Boot2の日記投稿ウェブアプリのフロントエンドに、CSSフレームワークのBootstrapを導入しました。
(第7回) Spring Boot2にBootstrap4を導入、CDNとWebjarsの2つの方法【Spring Boot2で日記ウェブアプリ】

今回は、日記投稿ウェブアプリの開発に戻り、日記の削除機能を作っていきます。CRUDでいうと、D（Delete、データ削除）の部分にあたります。
フロントエンド（HTML、Thymeleaf）の方はすでに作ってあるので、コントローラクラスに日記の削除処理をするメソッドを追加していきます。

◾️動作環境やバージョン情報です。
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
Bootstrap5.2.2

コントローラクラスに日記の削除処理メソッドを追加、削除処理後にリダイレクト

第5回のページでコントローラクラスDiaryController.javaを作成し、日記の一覧情報を取得するsummaryメソッドを作成しました。
今回は同じDiaryController.java内に、日記の削除処理を行うdeleteメソッドを追加します。

package com.example.demo;

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.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("diary")
public class DiaryController {
  @Autowired
  DiaryRepository diaryRepository;
  
  //日記一覧情報の取得
  @GetMapping("summary")
  public String summary(Model model) {
    Iterable<Diary> diarys = diaryRepository.findAll();
    model.addAttribute("diarys", diarys);
    return "summary";
  }

  //指定されたidの日記を削除する
  @PostMapping("delete")
  public String delete(@RequestParam Integer id) {
    diaryRepository.deleteById(id);
    return "redirect:/diary/summary";
  }
}

deleteメソッドには、@PostMapping("delete")が付いています。@PostMappingは、HTTPのPOSTリクエストのみ受け付けます。GETリクエストは受け付けません。
ですのでdeleteメソッドは、このURLにPOSTリクエストされた時に実行されます。

http://localhost:8080/diary/delete

次に、deleteメソッドの引数は"(@RequestParam Integer id)"としていますが、これでHTTPのPOSTリクエストのリクエストパラメータidを受け取る事ができます。また、@RequestParamの変数名のidは、HTMLフォームのname属性と一致させる必要があります。

前回のページから、Thymeleafのsummary.htmlの一部を抜粋して確認してみます。

<td>
<form th:action="@{/diary/delete}" method="post">
<input type="hidden" name="id" th:value="${diary.id}"/>
<input type="submit" class="btn btn-danger" value="削除"/>
</form>
</td>

hiddenタグで投稿された日記のid情報を保持させて、そのデータがidという名前(name属性)でPOSTリクエストで送信されてくるのがわかると思います。

◾️@RequestParamについて
@RequestParamの扱い方については別ページで詳しく説明していますので、そちらも参考にしてください。参考サイトはHTTPのGETリクエスト時を例にしていますが、POSTリクエスト時でも@RequestParamの使い方は同じです。
【Sprint Boot2】GETリクエストでクライアント側からサーバサイドへデータ送信。サーバサイドのControllerクラスの作成、@RequestParam、@GetMapping

次に、deleteメソッド内の1行目ですが、これで指定したidの日記データをDBのdiaryテーブルから削除します。

diaryRepository.deleteById(id);

diaryテーブルからのレコード削除処理は、第4回ページで作成したリポジトリインタフェースDiaryRepositoryを使用しています。deleteByIdメソッドは、Spring Data JPAのCrudRepositoryが宣言しているメソッドで、実装はSimpleJpaRepositoryクラスにあります。

そして、deleteメソッドの2行目（というか最後の行）は、画面をリダイレクトしています。

return "redirect:/diary/summary";

このコードは、以下のURLにリダイレクトさせています。日記の削除処理が完了したら、日記一覧データを再表示するためです。

http://localhost:8080/diary/summary

アプリの実行とブラウザで動作確認

それではSpring Bootアプリを起動して、ブラウザで動作確認をしてみます。
アクセスするURLは前回と同じで「http://localhost:8080/diary/summary」です。

日記一覧データが表示されたら、どれでもいいので削除ボタンを押してみて下さい。日記一覧データが再表示されますが、削除ボタンを押した日記は消えるはずです。

ブラウザの動作確認だけでなく、EclipseのコンソールビューでSQLログや、H2 Consoleでdiaryテーブルのデータなどでも確認できるはずです。
コンソールビューではdelete SQLが実行されていますし、H2 Consoleではdiaryテーブルの対象日記データが削除されている事がわかるはずです。

最後に、次回

以上今回は、日記投稿ウェブアプリのサーバサイド（コントローラクラス）の削除機能を追加しました。

次回は、サーバサイドの日記の新規投稿機能を追加していきます。CRUDでいうと、C（Create、データ作成）の部分にあたります。

(第9回) 日記の新規登録機能を追加、CRUDのC(Create、作成)【Spring Boot2で日記ウェブアプリ】
Spring Bootの日記投稿ウェブアプリ開発入門トップ