エンジニア大学ではSpring Bootで簡単なWebアプリを開発する方法を発信しています。
Javaの基礎学習が終わった方へ
・Spring BootでWebアプリを開発する
・新規登録画面の開発･･････前回の記事
・GitHubに全コード上がっています！
今回の記事ではSpring Bootでバリデーションチェックを実装する方法について解説していきます。
今回の記事を実践していただくことで
- 入力値のチェック
- エラーメッセージの表示
- エラーメッセージの設定
を学習することができます！
バリデーションチェックを実装することで、ぐっとアプリの完成度が高まるのでぜひチャレンジしてみてください。
バリデーションなしの挙動
現在はバリデーションチェックがされていません。
このままアプリを起動して、何も入力せずに「新規登録」ボタンを押すとどうなるでしょうか？
何も入力されていない空のデータが作成されてしまいます。
今回はこの入力が何もされていない場合にエラーとして、入力画面にエラーメッセージを表示するようにしていきます。
また本の値段がマイナスの値になることはおかしいので、プラスの値のみ設定できるようにチェックしましょう。
2023/02/19にBootstrapの記事を公開しました。その影響で少し画面の表示が変わっています。詳しくはこちらの記事をご確認ください。
依存関係の追加
Springbootプロジェクトでバリデーションチェックを行うためにpom.xmlを編集して依存関係を追加する必要があります。
pom.xmlの<dependencies>タグと</dependencies>タグの間にさまざまな依存関係が追加されているはずです。
この間にさらに次のような記述を追加することで、SpringBootプロジェクトでバリデーションチェックを行うことが可能になります。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>これでアノテーションを使って、簡単にバリデーションを実装することができます。
コードの修正
次にコードの修正を行なっていきます。
Formクラスにアノテーションを追加
まずは画面からの入力値を管理するBookFormのフィールドにアノテーションを追加していきます。
本のタイトルを保持するtitleフィールドには空でないことをチェックする「NotBlank」を設定します。
本の値段にはNullでないことを確認する「NotNull」と、プラスであることを確認する「Positive」の2を追加してください。
アノテーションの後ろに指定したmessageがエラーの際に画面で表示されます。
他のアノテーションについて知りたいという方はこちらの方の記事が参考になります。
→【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(message="タイトルを入力してください。")
private String title;
/**
* 本の値段を保持する
* チェック内容：Nullでないこと、プラスであること
*/
@NotNull(message="値段を入力してください。")
@Positive(message="値段はプラスの値を入力してください。")
private Integer price;
}@NotBlank、@NotNull、@Positiveなどを使ってバリデーションをする
Controllerクラスでバリデーションエラーの際の対応を追加
Controllerクラスでバリデーションエラーがあった場合の対応を追加します。
データベースへの新規登録を行うsaveBookメソッドを変更します。
ここでのポイントは2つです。
- BindingResultを受け取る
- 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つです。
- th:ifではtrueの場合のみ画面に表示されます。
- th:errorで対象となるエラーを設定しています。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本を新規登録する</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.2.2/css/bootstrap.min.css}"/>
</head>
<body>
<div th:replace="share::header"></div>
<div class="container">
<h1>本を新規で登録する</h1>
<form th:action="@{/book-create}" th:object="${bookForm}" method="POST">
<div class="mb-3">
<p th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="text-danger">Title Error</p>
<label for="bookTitle" class="form-label">タイトル</label>
<input id="bookTitle" class="form-control" type="text" th:field="*{title}">
</div>
<div class="mb-3">
<p th:if="${#fields.hasErrors('price')}" th:errors="*{price}" class="text-danger">Price Error</p>
<label for="bookPrice" class="form-label">値段</label>
<input id="bookPrice" class="form-control" type="number" th:field="*{price}">
</div>
<input type="submit" class="btn btn-primary" value="新規登録">
</form>
</div>
</body>
</html>th:if、th:errorを駆使して、エラーメッセージを表示する！
2023/02/19にBootstrapの記事を公開しました。その影響で少しhtmlの内容が変わっています。詳しくはこちらの記事をご確認ください。
バリデーション実装後の動作確認
ではアプリを起動して動作確認をしてみましょう。
新規登録画面で何も入力せずに、「新規登録」ボタンを押します。
データの登録はされず、赤いエラーメッセージが画面に表示されます。
今回はSpring Bootでバリデーションを実行する方法について解説しました。
次の記事では一度登録したデータを編集して書き換える更新機能を実装していきます。
挫折せずにプログラミングを学ぶためには？
僕はプログラミングで挫折した経験があります。
エラーの連続やエラーが解消しても思った通りに動かないといったことが原因で、プログラミングが嫌いでした。
当時はパソコンの基礎すら分からず、Googleでの検索力もありませんでした。
「プログラミングって全然意味わからないし、全然楽しくない」そう思っていました。
そんな僕でも今はエンジニアとして働けています。
エンジニアとなった今、初心者の方は周りの人に聞ける環境というのがとても大切だと感じています。
周りに聞ける人がいない時は、学習環境を手に入れるためにお金を払うというのも一つの方法です。
それができるのが、プログラミングスクールのFreeksです。
Freeksは月額10,780円で現役エンジニアに質問する環境を手に入れることができるプログラミングスクールです。
多くのプログラミングスクールが数十万円払って通うところを月額10,780円から通うことができるのはコスパが良いです。
しかもサブスク制で、自分のペースで学ぶことができ嫌になったらすぐにやめることができます。
Freeksでは無料カウンセリングを行なっています。
「周りに誰も聞ける人がいなくて、エラーが解決できない」「プログラミング全然楽しくない」という方は、無料カウンセリングを受けてみて下さい。
【関連記事】Freeks評判、口コミ
