コード全文

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import com.example.demo.model.UserForm;

@Controller
public class UserController {

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

    @PostMapping("/register")
    public String processForm(@ModelAttribute UserForm userForm, Model model) {
        // 受け取ったデータをresult画面に渡す
        model.addAttribute("userForm", userForm);
        return "result";
    }
}

package com.example.demo.model;

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;
    }
}

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

        <label>Email:</label>
        <input type="email" th:field="*{email}" /><br/>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登録完了</title>
</head>
<body>
    <h1>ご登録ありがとうございます</h1>
    <p>ユーザー名：<span th:text="${userForm.name}">（名前）</span></p>
    <p>メールアドレス：<span th:text="${userForm.email}">（メール）</span></p>
</body>
</html>

今回は、「フォームからコントローラーに渡したいデータが増えてきて、リクエストパラメーターの管理が煩雑になってきた」と感じている方を対象に、「ユーザー登録フォームを作成し、入力された内容を確認画面に表示する」というシンプルなWebアプリの実装手順を一緒に確認していきましょう。

この例では、名前とメールアドレスだけを入力してユーザー登録をするという例ですが、項目数が増えるにつれ、あなたはこの方法の便利さに感謝するでしょう。

Spring Bootの基本を理解している新人エンジニアの方を対象にしています。

はじめに：このアプリでできること

まず、ざっくり全体像を整理しておきます。

URL機能
/ユーザー登録フォームの表示
/registerフォームで入力された名前・メールアドレスの表示

要するに、「名前とメールアドレスを入力 → 確認画面で表示」という流れです。

モデル：データの入れ物となる UserForm.java

役割

UserForm クラスは、「フォームに入力された情報（名前・メールアドレス）を一時的に保持する」ためのモデルクラスです。

コードのポイント

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

    // Getter / Setter（ゲッター・セッター）
}

フォームから送られた値をJavaのオブジェクトに変換するには、Spring MVCが「ゲッターとセッター（getter/setter）」を使います。

例え

これはちょうど、名前とメールを入れる箱のようなもので、Webから受け取ったデータをJava側で扱えるようにするための“橋渡し役”です。

コントローラー：UserController.java

1. フォーム画面の表示（GET /）

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

Model はHTMLに渡すデータを保持する入れ物です。ここで新しい UserForm を渡して、フォームとデータの「ひも付け」を行います。

2. 入力処理（POST /register）

@PostMapping("/register")
public String processForm(@ModelAttribute UserForm userForm, Model model) {
    model.addAttribute("userForm", userForm);
    return "result";
}

@ModelAttribute は、フォームから送られてきた値を UserForm クラスにマッピングしてくれる注釈です。これはフォームとJavaオブジェクトをつなぐ魔法の接着剤のようなものですね！

HTMLテンプレート①：registerForm.html

ポイント

<form th:action="@{/register}" th:object="${userForm}" method="post">
    <input type="text" th:field="*{name}" />
    <input type="email" th:field="*{email}" />
</form>

ここではThymeleafというテンプレートエンジンを使っています。

  • th:object はフォーム全体にひもづくオブジェクト（ここでは userForm）を指定
  • th:field="*{name}" のように書くことで、UserForm の name プロパティと自動的にバインドされます

注意点

<form> タグ内では、Springのバインドルールに従って適切な属性（th:fieldなど）を指定しないと、値が受け取れません。

HTMLテンプレート②：result.html

ポイント

<p>ユーザー名：<span th:text="${userForm.name}"></span></p>

登録された内容を表示するために、th:text を使って値を埋め込みます。HTML側で変数を展開する、Thymeleaf特有の記法です。

これはまるで「差し込み印刷」のようなイメージですね。テンプレートの穴に、Javaから渡されたデータを入れていく感覚です。

補足知識まとめ：重要なポイントの振り返り

項目内容
@ModelAttributeフォームの値を自動でオブジェクトにバインドしてくれる注釈
Model クラスコントローラーからテンプレートにデータを渡すためのクラス
th:fieldフォームとオブジェクトのプロパティをつなぐための属性
テンプレートの場所src/main/resources/templates に配置しないと表示できない
画面遷移/ → 入力 → /register → 結果表示という流れ

今後のステップ：学ぶべきポイント

ここまでできたら、次は以下の内容に進むと良いでしょう！

✅ 入力値のバリデーション

  • @NotNull や @Email などのアノテーションを使って、入力チェックを行う
  • Spring Bootの BindingResult を使ってエラー表示も学ぶ

✅ データベース連携（JPA）

  • 入力された値をデータベースに保存して、あとで一覧表示したりできるようにする

✅ フロントエンドとの連携

  • JavaScriptを使って、非同期（AJAX）で送信してみる
  • Bootstrapを使ってUIを整えるのもおすすめ！

何かつまずいたところや気になる点があれば、遠慮なく聞いてくださいね！

次回はバリデーション機能付きの入力フォームを作ってみましょう！



Webアプリケーション制作のための小ネタ集　目次に戻る

最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる