【Java開発】SpringでWebアプリを作成しよう!(入力チェックの活用)

Java入門
スポンサーリンク

こんにちは!しーま(@s59shima)です。

いつもブログをご覧いただきありがとうございます。

今回は、こんな悩みや疑問のある方に向けて記事を書きました。

読者
読者

画面入力で不正な値を防ぎたいけど、Springではどうやるの!?

Springで入力チェックを簡単に実装したい方にはおすすめの記事です。

  • OS:Windows 10
  • JDK:OpenJDK 8
  • IDE:Spring Tools 4
  • Spring Boot:2.3

SpringでのWebアプリの作成手順

Webアプリの作成手順
  • STEP1

    無料で使用できる SpringTools4 について紹介します。ダウンロードから始まり各種設定(日本語化)までを詳しく解説します。

  • STEP2

    Springプロジェクトを作成し、Webアプリを実行するまでの手順を詳しく解説します。難しい設定などは特にありませんので、簡単に始められます。

  • STEP3

    Thymeleafというテンプレートを使用してhtmlファイルを作成します。Thymeleafを使用するための設定なども詳しく解説します。

  • STEP4
    入力チェックの活用本記事はココ!

    Springで用意されている入力チェックを使用します。アノテーションを使用することで簡単に実装ができます。

  • STEP5

    DI(依存性の注入)の有・無パターン2つを比較しながら詳しく解説します。

Springで入力チェックを実現するには

Springの環境構築・Thymeleafで画面作成が完了したら、入力チェックを行いましょう。

Bean Validationという仕組みを使います。

アノテーション(@XXXXX)を使用すれば、簡単に入力チェックが実現できます。

まずは、入力チェックを実現するための手順についてです。

  1. pom.xmlの編集
  2. Formクラスの追加
  3. Controllerクラスの変更
  4. htmlの変更

pom.xmlの編集

Bean Validationという仕組みを使うには、以下のライブラリが必要になります。

  • validation-api-2.0.1.Final.jar
  • hibernate-validator-6.1.2.Final.jar
  • javax.el-3.0.1-b09.jar

Mavenを利用している場合、pom.xmlを編集して必要なライブラリを取得します。

下記は【pom.xml】に定義する内容です。

<dependency>
  <groupId>javax.validation</groupId>
  <artifactId>validation-api</artifactId>
  <version>2.0.1.Final</version>
</dependency>
<dependency>
  <groupId>org.hibernate.validator</groupId>
  <artifactId>hibernate-validator</artifactId>
  <version>6.1.2.Final</version>
</dependency>
<dependency>
  <groupId>org.glassfish</groupId>
  <artifactId>javax.el</artifactId>
  <version>3.0.1-b09</version>
</dependency>

追加後、プロジェクトを更新し、Maven依存関係を確認してみます。

Formクラスの作成

HTMLとの値を受け渡しするためにFormクラスを使用します。

そして、このFormクラスに入力チェックの実装をしていきます。

入力チェックは下記のようにアットマーク(@)+チェックの種類で実現できます。

@NotEmpty(message="顧客番号を入力してください")
private String number;

主に使用するチェックの種類について見ていきましょう。

Noアノテーション説明使用例
1@NotNullNullでないことをチェック@NotNull
private String number;
2@NotEmptyNull、または空でないことをチェック@NotEmpty
private String number;
3@Min値が、最小値以上であるかチェック@Min(5)
private String number;
4@Max値が、最大値以下であるかチェック@Max(10)
private String number;
5@Size値が、最小値・最大値の間かチェック@Size(min=5, max=10)
private String number;
6@Pattern正規表現にマッチするかチェック@Pattern(regexp = “^[0-9]*$”)
private String number;
7@Emailメールアドレスかどうかチェック@Email
private String email;
8@URLURLアドレスかどうかチェック@URL
private String email;
入力チェックの一覧

上記を使用してFormクラスを作成していきます。

Formクラスの名前を「ClientForm」とします。

package com.example.demo;

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

public class ClientForm {

  @NotEmpty(message="顧客番号を入力してください")
  @Size(min = 5, max = 5, message="顧客番号は5桁で入力してください")
  @Pattern(regexp = "^[0-9]*$", message="顧客番号は数字で入力してください")
  private String number;

  public String getNumber() {
    return number;
  }

  public void setNumber(String number) {
    this.number = number;
  }

}

上記のコードでは、顧客番号のフィールド numberを用意し、

  • Null・空チェック(@NotEmpty)
  • 桁数チェック(@Size)
  • 数値チェック(@Pattern)

の実装(アノテーションを付与)をしています。

Controllerクラスの作成

Controllerクラスを作成します。

サンプルコードは下記になります。

package com.example.demo;


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

@Controller
public class ClientController {

  @ModelAttribute
  public ClientForm setUpForm() {
    return new ClientForm();
  }

  @RequestMapping("/input")
  public String index() {
    return "index.html";
  }

  @RequestMapping("/output")
  public String result(@Validated ClientForm clientForm, 
    BindingResult bindingResult, Model model) {

    if (bindingResult.hasErrors()) {
      return "index.html";
    }
		
    model.addAttribute("number", clientForm.getNumber());
    return "output.html";
  }
}

@ModelAttributeアノテーションを定義して、ClientFormクラスを初期化・呼び出します。

次に、@Validatedアノテーションを定義し、clientFormをチェック対象とします。

最後に、BindingResultクラスを利用して、入力チェックの結果を受け取ります。

HTMLの作成

下記3つの属性を定義し、Formクラスとの連携や入力チェックエラー時のメッセージを表示します。

  • th:object
  • th:field
  • th:errors

サンプルコードは以下になります。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <title>顧客入力</title>
  </head>
  <body>
    <h1>顧客の入力</h1>
    <form method="POST" action="output.html" th:action="@{output}" th:object="${clientForm}" >
      <p>顧客番号</p>
      <input type="text" name="number" th:field="*{number}">
      <p style="color:red;" th:errors="${clientForm.number}" class="error">顧客番号の入力チェック</p>
      <br>
      <input type="submit" name="登録">
    </form>
  </body>
</html>

Webアプリ実行

それでは、Webアプリの実行をして入力チェックの実装を確認してみましょう。

確認するパターンは以下の3つです。

  1. 顧客番号に何も入力しない
  2. 顧客番号に数値以外を入力(あいうえお)
  3. 顧客番号に5桁の数値を入力(12345)

まず、ブラウザにアドレスを入力して、初期画面を表示させます。

顧客番号を入力する項目があるか確認です。

まずはパターン1【何も入力しない】で「送信」ボタンをクリックします。

結果はこのようになります。

入力チェックが正常に処理され、エラーメッセージが表示されました!パチパチ!

次に、パターン2【数値以外を入力(あいうえお)】で「送信」ボタンをクリックします。

結果はこのようになります。

入力チェックが正常に処理され、エラーメッセージが表示されました!パチパチ!

最後に、パターン3【5桁の数値を入力(12345)】で「送信」ボタンをクリックします。

無事、次画面に遷移できました(^^♪

まとめ

入力チェックを実現するには

  • Bean Validationという仕組みで効率化
  • pom.xmlを編集して必要なライブラリを取得
  • 既に用意されているアノテーションが豊富

作成するファイル

  • Formクラス
  • Contollerクラス
  • Htmlクラス

関連記事

しーま
しーま

プログラミングスクールの【Raise Tech】では、Spring Frameworkを使った実践コースが受講できます。今すぐスキルを身に付けたい方は必見ですね!

Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
タイトルとURLをコピーしました