Java

Spring Bootでバリデーションチェックを実装する

uhablog

こんにちは、大学時代にプログラミングの勉強を始め現在はエンジニアをしているuhablogです。
当ブログでは現役エンジニアがプログラミング初学者の方向けにプログラミングの学習法を発信しています。

uhablogではSpring Bootで簡単なWebアプリを開発する方法を発信しています。

Javaの基礎学習が終わった方へ

今回の記事ではSpring Bootでバリデーションチェックを実装する方法について解説していきます。

今回の記事を実践していただくことで

  • 入力値のチェック
  • エラーメッセージの表示
  • エラーメッセージの設定

を学習することができます!

バリデーションチェックを実装することで、ぐっとアプリの完成度が高まるのでぜひチャレンジしてみてください。

前回、SpringBootでフォームから値を受け取って、データベースに登録する記事を書きました。

新規登録の記事はこちら

上記の記事の内容にバリデーションチェックを追加していきます。

\\今ならセール開催中!//

UdemyでSpring Bootを学ぶ!!

返金保証付き

バリデーションなしの挙動

現在はバリデーションチェックがされていません。
このままアプリを起動して、何も入力せずに「新規登録」ボタンを押すとどうなるでしょうか?

何も入力されていない空のデータが作成されてしまいます。

今回はこの入力が何もされていない場合にエラーとして、入力画面にエラーメッセージを表示するようにしていきます。

また本の値段がマイナスの値になることはおかしいので、プラスの値のみ設定できるようにチェックしましょう。

依存関係の追加

初めに依存関係の追加をしていきます。
pom.xmlに以下の記述を追加します。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

これでアノテーションを使って、簡単にバリデーションを実装することができます。

コードの修正

次にコードの修正を行なっていきます。

Formクラスにアノテーションを追加

まずは画面からの入力値を管理するBookFormのフィールドにアノテーションを追加していきます。

本のタイトルには空でないことをチェックする「NotBlank」を設定しました。

値段にはNullでないことを確認する「NotNull」とプラスであることを確認する「Positive」を追加しました。

注意点として、Integerのフィールドに対して「NotBlank」や「NotEmpty」は使用することができません。

他のアノテーションについて知りたいという方はこちらの方の記事が参考になります。
【Spring Boot】バリデーション

package com.uhablog.form;

import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Positive;

import lombok.Data;

@Data
public class BookForm {

    /**
     * 本のタイトルを保持する
     * チェック内容:空でないこと
     */
    @NotBlank
    private String title;
	
    /**
     * 本の値段を保持する
     * チェック内容:Nullでないこと、プラスであること
     */
    @NotNull
    @Positive
    private Integer price;
}

@NotBlank、@NotNull、@Positiveなどを使ってバリデーションをする

Controllerクラスでバリデーションエラーの際の対応を追加

Controllerクラスでバリデーションエラーがあった場合の対応を追加します。

データベースへの新規登録を行うsaveBookメソッドを変更します。
ここでのポイントは2つです。

  1. BindingResultを受け取る
  2. BookFormに@Validatedアノテーションをつける

BindingResultを受け取ることで、エラーの内容を取得することができます。
今回はエラーがあった場合は新規登録画面を再表示する処理としました。

package com.uhablog.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.validation.BindingResult;
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.PostMapping;

import com.uhablog.form.BookForm;
import com.uhablog.model.Book;
import com.uhablog.service.BookService;

@Controller
public class BookController {
	
    @Autowired
    BookService service;
	
    @GetMapping("/book-list")
    public String bookList(Model model) {
		
        // serviceを使って、本の一覧をDBから取得する
        List<Book> bookList = service.findAll();
        // modelに本の一覧を設定して、画面に渡す
        model.addAttribute("bookList", bookList);
        // bookList.htmlの表示
        return "bookList";
    }
	
    /**
     * 新規登録画面を表示
     * @param model
     * @return 新規登録画面
     */
    @GetMapping("/book-create")
    public String createBook(Model model) {

        model.addAttribute("bookForm", new BookForm());
		
        return "add";
    }
	
    /**
     * データベースに本を登録する
     * @param bookForm
     * @param model
     * @return
     */
    @PostMapping("/book-create")
    public String saveBook(@ModelAttribute @Validated BookForm bookForm, BindingResult result,Model model) {

        // バリデーションエラーの場合
        if(result.hasErrors()) {
            // 新規登録画面に遷移
            return "add";
        }

        // 本を登録する
        service.insert(bookForm);
		
        // 本の一覧表示画面にリダイレクト
        return "redirect:/book-list";
    }
}

BindingResultを受け取って、バリデーション結果を受け取る!

htmlでエラーメッセージの表示

最後のhtmlを編集して、バリデーションエラーがあった場合にエラーメッセージを表示するようにしましょう。

ポイントは<p>タグ内の次の2つです。

  1. th:ifではtrueの場合のみ画面に表示されます。
  2. th:errorで対象となるエラーを設定しています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本を新規登録する</title>
</head>
<body>
    <h1>本を新規で登録する</h1>
    <form th:action="@{/book-create}" th:object="${bookForm}" method="POST">
        <p th:if="${#fields.hasErrors('title')}" th:errors="*{title}">Title Error</p>
        タイトル:<input type="text" th:field="*{title}"><br>
        <p th:if="${#fields.hasErrors('price')}" th:errors="*{price}">Price Error</p>
        値段  :<input type="number" th:field="*{price}"><br>
        <input type="submit" value="新規登録">
    </form>
</body>
</html>

th:if、th:errorを駆使して、エラーメッセージを表示する!

バリデーション実装後の動作確認

ではアプリを起動して動作確認をしてみましょう。

新規登録画面で何も入力せずに、「新規登録」ボタンを押します。

新規登録画面のままで、エラーメッセージが表示されます。

エラーメッセージの変更

今のままではエラーメッセージが伝わりにくいので、エラーメッセージを変更してみます。

エラーメッセージの設定は、フォームクラスのフィールドに設定されている@NotBlankや@Positiveなどのアノテーションに(message="表示したいエラーメッセージ")で設定することができます。

BookFormを次のように変更します。

package com.uhablog.form;

import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Positive;

import lombok.Data;

@Data
public class BookForm {

    /**
     * 本のタイトルを保持する
     * チェック内容:空でないこと
     */
    @NotBlank(message="タイトルを入力してください。")
    private String title;
	
    /**
     * 本の値段を保持する
     * チェック内容:Nullでないこと、プラスであること
     */
    @NotNull(message="値段を入力してください。")
    @Positive(message="値段はプラスの値を入力際てください。")
    private Integer price;
}

アノテーションの後にmessageを指定することで、エラーメッセージを変更できる!

未入力で「新規登録」ボタンを押した結果、変更したエラーメッセージが表示されます。

今回はSpring Bootでバリデーションを実行する方法について解説しました。

次の記事はこちら

\\今ならセール開催中!//

UdemyでSpring Bootを学ぶ!!

返金保証付き

プログラミング学習はUdemyがおすすめ

私はプログラミングの学習はUdemyで行うのが一番おすすめです。
Udemyでは動画講座でプログラミングなどのスキルを身につけることができます。
現役エンジニアがUdemyをオススメする理由は
・動画で好きなときに学べる
・一流の講師に学ぶことができる
・講師の方に質問ができる
・返金保証もある
・セールを頻繁に開催している
といったたくさんの理由があります。

現在Udemyではセールを開催しています!
通常時1万円から2万円前後の価格で講座が販売されていますが、セール時には1500円前後(ランチ代くらい)で一つの講座を購入することができます。
UdemyにはSpring BootでWebアプリの開発を学べる講座iconもあるので、Javaの基礎を動画で学んでみたい!という方はチェックしてみてください。

独学が不安な人へ

独学で学んでいく意志がある方にはUdemyなどで学習するのがおすすめですが、プログラミングを独学するにはそれなりにハードルがあります。

  • プログラミングで一度挫折した経験がある
  • 一人で学習する自信がないので、サポートが欲しい

という方にはプログラミングスクールを検討してみるのがおすすめです。

まずは無料体験から!

-Java
-, , ,