入力内容を画面に戻して表示する方法を初心者向けに解説！Spring MVCでのフォーム入力保持

入力内容を画面に戻して表示する方法

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

新人

「フォームに入力した内容って、送信後に画面に戻して表示することはできますか？」

先輩

「もちろんです。フォームの入力内容を画面に戻すことで、ユーザーは入力ミスの修正がしやすくなります。Spring MVCではこの処理が簡単にできますよ。」

新人

「具体的にはどのような仕組みで実現しているんですか？」

先輩

「Spring MVCのControllerがフォームの入力データをJavaのオブジェクトとして受け取り、そのままモデルに戻して画面に表示する形で実装します。」

1. 入力内容を画面に戻すとはどういうことか？基本的な概要

入力内容を画面に戻すとは、ユーザーがフォームに入力したデータを送信後、サーバー側で受け取った内容を再び同じフォームにセットして表示することです。これによりユーザーは誤入力を見つけて修正しやすくなります。

特にバリデーションエラーなどで入力内容を保持しつつエラーメッセージを表示する場合に有効な技術です。

この機能はユーザー体験の向上につながり、入力の手間を省くためSEOの評価にも間接的に良い影響を与えます。

2. Spring MVCでフォーム入力を受け取る仕組みの説明

Spring MVCでは、HTMLフォームから送信されたデータをControllerのメソッドで@ModelAttributeを使ってJavaオブジェクトにマッピングして受け取ります。

例えば、ユーザーの名前を受け取る簡単なControllerは以下のようになります。


@Controller
public class SampleController {

    @GetMapping("/input")
    public String showForm(Model model) {
        model.addAttribute("formData", new FormData());
        return "inputForm";
    }

    @PostMapping("/input")
    public String submitForm(@ModelAttribute FormData formData, Model model) {
        // 入力内容をモデルに戻すことで画面に再表示可能
        model.addAttribute("formData", formData);
        return "inputForm";
    }
}

この例ではFormDataというJavaクラスにフォームの入力を受け取り、model.addAttributeで画面に戻しています。

HTMLのフォームは以下のようにth:objectやth:fieldを使ってデータバインドします。


<form th:action="@{/input}" th:object="${formData}" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" th:field="*{name}" />
  <button type="submit">送信</button>
</form>

このように、送信された内容がControllerで受け取られ、再び同じ画面に返すことで入力内容が保持されます。

3. フォーム送信後に入力内容を再表示するためのThymeleafでの設定方法

Spring MVCで受け取ったフォームの入力内容を画面に戻すためには、Thymeleafのテンプレート側で適切にデータをバインドする必要があります。th:object属性を使い、Controllerから渡されたモデルオブジェクトとフォームを紐付けます。

フォームの入力欄には、th:field属性を用いてモデルのプロパティと連携させることで、送信されたデータを自動的にフォームに反映させられます。

これにより、ユーザーが入力した内容が送信後にそのままフォームに表示されるため、修正が簡単にできます。

以下は、名前とメールアドレスを入力するフォームの例です。送信後に入力内容が戻って表示される仕組みを持っています。


<form th:action="@{/input}" th:object="${formData}" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" th:field="*{name}" placeholder="名前を入力してください" required />
  <br>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" th:field="*{email}" placeholder="メールアドレスを入力してください" required />
  <br>
  <button type="submit">送信</button>
</form>

この例では、formDataというオブジェクトのnameとemailプロパティがそれぞれ対応し、送信後に入力内容が画面に戻ってきます。

4. th:fieldやth:valueを使った入力値のバインド例

Thymeleafのth:field属性は、フォームの入力欄をモデルのフィールドにバインドするために使われます。これにより送信された値を自動的にフォームに表示し、入力保持が実現します。

一方、th:valueは単純な値の設定に使い、特定の入力欄の初期値などを指定できます。ただし、入力値の双方向バインドにはth:fieldを使うのが一般的です。

以下はテキスト入力とラジオボタンの例で、th:fieldを使ったバインドを示します。


<form th:action="@{/input}" th:object="${formData}" method="post">
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" th:field="*{username}" required />
  <br>

  <p>性別：</p>
  <input type="radio" id="male" th:field="*{gender}" value="male" />
  <label for="male">男性</label>
  <input type="radio" id="female" th:field="*{gender}" value="female" />
  <label for="female">女性</label>
  <br>

  <button type="submit">送信</button>
</form>

このようにすると、送信されたusernameやgenderの値が自動的にフォームの各入力欄に反映されます。ユーザーは画面を再表示しても前回の入力値が残るので、誤入力の修正がスムーズです。

また、th:valueは以下のように単純に初期値を設定したい時に使います。


<input type="text" th:value="${formData.username}" />

ただし、この方法は入力保持としてはth:fieldより劣るため、通常はth:fieldを使うことを推奨します。

このようにThymeleafのフォームタグを正しく使いこなすことで、フォーム再表示や入力バインドが簡単に実装でき、ユーザーに優しいWebアプリケーションが作れます。

5. バリデーションエラー時に入力内容を保持してエラーメッセージを表示する方法

フォーム送信時にユーザーが入力した内容が正しいかどうかをチェックすることをバリデーションと言います。Spring MVCでは、javax.validationのアノテーションを使い簡単に入力チェックができます。

バリデーションエラーがあった場合でも、入力内容を保持したままフォーム画面に戻し、ユーザーにわかりやすくエラーメッセージを表示するのが一般的です。

以下は、バリデーションを利用したControllerの例です。@Validアノテーションを使い、入力チェックを実行します。BindingResultでエラーの有無を確認し、エラーがあればフォームに戻します。


@PostMapping("/input")
public String submitForm(@Valid @ModelAttribute FormData formData,
                         BindingResult bindingResult,
                         Model model) {
    if (bindingResult.hasErrors()) {
        // エラーありの場合、入力内容を保持してフォーム画面に戻る
        return "inputForm";
    }
    // エラーなしの場合は次の処理へ
    model.addAttribute("message", "送信が成功しました！");
    return "result";
}

このようにすることで、ユーザーが間違った入力をした場合も、入力内容を保持したままエラーメッセージを表示でき、ユーザーの負担を軽減します。

次に、Thymeleafでのエラーメッセージ表示の方法を見てみましょう。


<form th:action="@{/input}" th:object="${formData}" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" th:field="*{name}" required />
  <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="text-danger"></div>
  
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" th:field="*{email}" required />
  <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="text-danger"></div>
  
  <button type="submit">送信</button>
</form>

th:errors属性を使うことで、特定のフィールドに関連するエラーメッセージを自動的に表示します。th:ifでエラーがある場合のみメッセージを表示するように制御しています。

6. 画面に戻す処理で注意するポイントとよくあるトラブル対策

フォームの入力内容を画面に戻す処理では、いくつか注意すべきポイントがあります。

モデル属性の名称を統一すること：ControllerとThymeleafのth:objectで使用するモデル名が一致していないと入力値が反映されません。
バリデーション結果を正しく扱うこと：バリデーションの結果をBindingResultでチェックし、エラーがある場合はフォーム画面に戻す処理を忘れないこと。
送信先URLの指定ミスを防ぐ：フォームのth:action属性で指定するURLは、Controllerのメソッドに対応しているか確認しましょう。
入力値の型の不一致に注意：Javaのオブジェクトのフィールド型とフォームの入力値が合わないとバインドエラーになることがあります。

また、よくあるトラブルとしては、以下のようなものがあります。