Spring Bootでフォームを作る基本的な流れを完全解説！初心者でもわかるHTML画面作成

Spring Bootでフォームを作る基本的な流れ

新人と先輩の会話形式で理解しよう

新人

「先輩、Spring Bootでフォームを作る方法が知りたいんですが、何から始めればいいですか？」

先輩

「まずは、Spring Bootでフォームを作るというのは、ユーザーが入力した情報を受け取る画面を作成して、サーバー側でそのデータを処理するという意味なんだよ。」

新人

「なるほど。じゃあ、HTMLのフォームとSpring Bootってどうやってつながるんですか？」

先輩

「それを順番に解説していくから、一緒にやってみよう！」

1. Spring Bootでフォームを作るとは？その基本を理解しよう

Spring Bootでフォームを作るとは、ユーザーから情報を受け取るためのHTML画面と、その情報を受け取って処理するコントローラやJavaのクラスを連携させて、入力フォーム機能を作ることです。

例えば、名前やメールアドレスを入力して登録する画面を作成し、そのデータをサーバーで受け取り、確認したり保存したりするような仕組みが、Spring Bootでのフォーム機能です。

このようなフォーム処理は、企業のWebシステムでもよく使われており、「Spring Boot フォーム作り方」や「HTML フォーム Spring Boot」などのキーワードで検索する人が多いです。

フォーム作成の流れは大きく分けて以下の通りです：

① HTMLフォーム画面（Thymeleaf）を作成
② フォーム用のJavaクラス（DTO）を作成
③ コントローラでフォームとの連携処理を実装
④ 入力チェック（バリデーション）やエラー処理を追加
⑤ 入力データの保存・遷移処理

まずは、最初のステップであるHTML側のフォーム画面を作っていきましょう。

2. HTMLフォーム画面の作成方法【Thymeleafの使い方】

Spring Bootでは、フォーム画面をThymeleafというテンプレートエンジンを使って作成するのが一般的です。ThymeleafはHTMLに特別な属性を追加することで、Javaのデータをテンプレート内に反映できます。

ここでは、名前とメールアドレスを入力するシンプルなフォームを作ってみましょう。ファイルは以下のようにsrc/main/resources/templatesフォルダ内に配置します。

ファイル名は例としてform.htmlとします。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登録フォーム</title>
</head>
<body>
    <h2>ユーザー登録フォーム</h2>
    <form th:action="@{/submit}" th:object="${userForm}" method="post">
        <label for="name">名前：</label>
        <input type="text" th:field="*{name}" id="name"/><br><br>

        <label for="email">メールアドレス：</label>
        <input type="email" th:field="*{email}" id="email"/><br><br>

        <button type="submit">登録</button>
    </form>
</body>
</html>

このテンプレートでは、th:action属性でフォームの送信先URLを指定し、th:objectでJava側のオブジェクトをバインドしています。各入力欄にはth:fieldを使い、Javaクラスのプロパティと関連付けをしています。

このようにThymeleafを使えば、HTML フォームとSpring Bootの連携が簡単に行えます。初心者がつまずきやすいのはth:fieldの使い方や、th:objectのバインドミスなので注意しましょう。

次回は、このフォームと連携するコントローラの作成方法や、フォームの値をどうやって受け取るのかについて詳しく解説していきます。

3. コントローラの作成とフォームとの連携方法

前回作成したHTMLフォームとSpring BootのJavaコードを連携させるには、@Controllerアノテーションを使ったコントローラクラスを作成します。Spring Bootでは、フォームから送られたデータを受け取る役割をこのクラスが担います。

まずは、PleiadesでSpring Bootのプロジェクトを作成しておき、フォーム処理専用のUserFormというDTOクラスを用意しておくとよいでしょう。

以下は、フォームとの連携を行う基本的なコントローラの構成例です。


@Controller
public class UserController {

    @GetMapping("/form")
    public String showForm(Model model) {
        model.addAttribute("userForm", new UserForm());
        return "form";
    }

    @PostMapping("/submit")
    public String submitForm(@ModelAttribute("userForm") UserForm formData) {
        // フォームからの入力値をここで処理
        System.out.println("名前：" + formData.getName());
        System.out.println("メール：" + formData.getEmail());
        return "result";
    }
}

ここでのポイントは2つあります。

① @GetMapping("/form")でフォーム画面を表示する処理
② @PostMapping("/submit")でフォームからの送信データを受け取る処理

Modelを使ってテンプレートにuserFormという名前で空のオブジェクトを渡し、テンプレートのth:objectと連携させています。これにより、HTMLフォームの各th:fieldがこのオブジェクトと結びつきます。

次に、受け取った値を処理するために@ModelAttributeを使います。これについては次のセクションで詳しく解説します。

4. @ModelAttributeでフォームデータを受け取る方法

Spring Bootでは、フォームから送信されたデータをJavaクラスに自動でマッピングするために、@ModelAttributeというアノテーションを使います。これはフォームバインディングの要となる仕組みです。

@ModelAttributeを使うと、HTMLフォームに入力された値が、対応するJavaのオブジェクトに自動的に格納されます。以下はその使い方の基本です。


@PostMapping("/submit")
public String submitForm(@ModelAttribute("userForm") UserForm formData) {
    // 入力された値は formData に格納されている
    System.out.println("入力された名前：" + formData.getName());
    System.out.println("入力されたメール：" + formData.getEmail());
    return "result";
}

このUserFormクラスは、ユーザーの入力内容を受け取るためのDTOクラスです。以下のように定義します。


public class UserForm {
    private String name;
    private String email;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

このようにJavaBeanの形で作成することで、Spring Bootは自動的にnameやemailといったプロパティに、フォームからの値をバインドしてくれます。

実際に入力した情報がサーバーに送られたとき、どのようにマッピングされるのかは以下の通りです：

<input th:field="*{name}" /> → formData.setName() に値が入る
<input th:field="*{email}" /> → formData.setEmail() に値が入る

また、フォーム送信後に遷移するresult.htmlという画面を表示させたい場合は、次のようにテンプレートを作成します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登録結果</title>
</head>
<body>
    <h2>登録が完了しました！</h2>
    <p>入力された名前：<span th:text="${userForm.name}"></span></p>
    <p>入力されたメール：<span th:text="${userForm.email}"></span></p>
</body>
</html>

このように、Thymeleafテンプレートと@ModelAttributeの連携により、フォームの送信データを受け取って表示するまでの一連の流れがスムーズに実現できます。

「Spring Boot フォーム Controller 連携」や「Spring Boot @ModelAttribute 使い方」などで検索される内容は、今回の構成にほぼ該当します。初心者が学ぶ際は、コントローラとHTMLテンプレートの関係をしっかりと理解しておくことが大切です。

5. 入力チェックの実装方法（@ValidとBindingResultの使い方）

Spring Bootでは、フォームから送られたデータに対してサーバー側でバリデーション（入力チェック）を行うことができます。これにより、未入力や形式不正などの不備を防ぐことができます。バリデーションを実装するためには、@ValidアノテーションとBindingResultを使うのが一般的です。

まず、フォーム入力に対して制約を定義するDTOクラス（今回はUserForm）に、Javaのバリデーションアノテーションを追加します。


import jakarta.validation.constraints.Email;
import jakarta.validation.constraints.NotBlank;

public class UserForm {

    @NotBlank(message = "名前は必須項目です")
    private String name;

    @NotBlank(message = "メールアドレスは必須項目です")
    @Email(message = "正しい形式のメールアドレスを入力してください")
    private String email;

    // getter・setterは省略せず記述
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

@NotBlankは空欄禁止、@Emailはメール形式のチェックです。次に、コントローラ側でバリデーションを実行し、結果をBindingResultで受け取ります。


@PostMapping("/submit")
public String submitForm(@Valid @ModelAttribute("userForm") UserForm formData,
                         BindingResult bindingResult,
                         Model model) {
    if (bindingResult.hasErrors()) {
        return "form"; // 入力エラーがあればフォーム画面に戻す
    }
    model.addAttribute("userForm", formData); // 正常なら確認画面に渡す
    return "result";
}

@Validでバリデーションを有効化し、その直後にBindingResultを配置することで、エラーの有無を確認できます。エラーがある場合には同じフォーム画面を返し、再入力を促すことができます。

6. バリデーションエラー時のエラーメッセージ表示方法

バリデーションに失敗した場合、ユーザーがどの項目で間違っているかを画面上に明確に表示することが重要です。Thymeleafでは、th:errorsやth:ifを使ってエラー表示を行います。

以下は、バリデーションエラーを画面に表示するHTMLテンプレートの例です。


<form th:action="@{/submit}" th:object="${userForm}" method="post">
    <label for="name">名前：</label>
    <input type="text" th:field="*{name}" id="name" />
    <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></div>

    <br>

    <label for="email">メールアドレス：</label>
    <input type="email" th:field="*{email}" id="email" />
    <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></div>

    <br>
    <button type="submit">登録</button>
</form>

th:errorsで該当フィールドのエラーを表示し、#fields.hasErrors()でエラーの有無を判定しています。これにより、フォームに誤入力があった場合にどこが間違っているかがすぐにわかります。

特に初心者は、バリデーションが機能しているかどうかを視覚的に確認することが重要です。画面上にわかりやすくエラーを表示することはユーザー体験の向上にもつながります。

7. フォーム送信後の遷移と成功メッセージの表示方法

フォーム送信が成功した場合、入力内容の確認や完了メッセージを表示する画面に遷移させることで、ユーザーに安心感を与えることができます。

ここでは、フォームから送信されたデータをresult.htmlで表示する方法を紹介します。


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登録完了</title>
</head>
<body>
    <h2>登録が完了しました！</h2>
    <p>お名前：<span th:text="${userForm.name}"></span></p>
    <p>メールアドレス：<span th:text="${userForm.email}"></span></p>
</body>
</html>

コントローラでは、バリデーションに成功した場合にこのテンプレートを返すようにします。


@PostMapping("/submit")
public String submitForm(@Valid @ModelAttribute("userForm") UserForm formData,
                         BindingResult bindingResult,
                         Model model) {
    if (bindingResult.hasErrors()) {
        return "form";
    }
    model.addAttribute("userForm", formData);
    return "result";
}

また、再度フォーム入力に戻れるようにリンクを設置しておくと親切です。


<p><a th:href="@{/form}">フォームに戻る</a></p>

このように、バリデーションを通過した後に確認画面を表示し、入力内容と成功メッセージをユーザーに伝えることで、アプリケーションの完成度が大きく高まります。

「Spring Boot バリデーションフォーム」や「BindingResult 使い方」といった検索キーワードでもよく調べられる内容なので、学習時には特に重点を置いて理解しておきましょう。