HTMLフォームの記述とThymeleafの連携を初心者向けに解説！簡単に理解する方法

HTMLフォームの記述とThymeleafの連携

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

新人

「HTMLフォームって、具体的にどんな仕組みで作るんですか？」

先輩

「HTMLフォームは、ユーザーから情報を入力してもらうための要素で、フォームタグや入力欄で構成されています。例えば、名前やメールアドレスを入力してもらう時に使いますよ。」

新人

「なるほど。具体的なフォームの書き方を教えてください。」

先輩

「はい。まずは基本的なHTMLフォームの例を見てみましょう！」

1. HTMLフォームの基本的な構造と記述方法

HTMLフォームは、ユーザーがデータを入力して送信できるように作られた要素です。formタグで囲み、その中にinputやtextareaなどの入力欄を配置します。送信ボタンでフォームの内容をサーバーに送れます。

フォームの書き方はとてもシンプルで、action属性に送信先URL、method属性に送信方法（GETやPOST）を指定します。以下は名前とメールアドレスを入力する簡単なフォームの例です。


<form action="/submit" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email" required>
  <br>
  <button type="submit">送信</button>
</form>

このように、formタグの中に入力項目と送信ボタンを配置し、ユーザーからのデータを受け取る準備をします。name属性がサーバー側で値を受け取る際のキーになるため重要です。

2. Thymeleafとは何か、その役割の概要

ThymeleafはJavaのWebアプリケーションで使われるテンプレートエンジンです。HTMLファイルに特別な属性を追加して、動的に内容を書き換えたり、サーバーのデータを表示したりできます。

たとえば、Spring Frameworkのコントローラで作成したデータを画面に表示したり、フォームの入力値を簡単に受け渡す仕組みを助けてくれます。Thymeleafを使うと、普通のHTMLに近い形で書けるため、初心者でも扱いやすいです。

フォーム連携の際には、th:actionやth:objectなどの属性を使って、フォームの送信先やデータの紐付けを簡単に設定できます。

このように、HTMLフォームとThymeleafは連携してユーザーの入力を受け取り、Webアプリケーションで活用するための重要な役割を担っています。

3. ThymeleafでHTMLフォームのデータをSpringのControllerに送る仕組み

ThymeleafはSpring Frameworkと密接に連携して動作し、HTMLフォームのデータを簡単にSpringのControllerに送信できます。ユーザーがフォームに入力した値は、フォーム送信時にHTTPリクエストとしてサーバーに送られ、Controller側で受け取ります。

通常のHTMLフォームと違い、Thymeleafではth:action属性を使って送信先URLを指定し、th:objectでフォームと連携するオブジェクトを紐付けることができます。これにより、送信されたデータはSpringのモデル属性として自動的にマッピングされます。

この仕組みによって、ユーザーから送信されたフォームデータは自動的にJavaのオブジェクトにバインドされ、Controllerメソッドの引数として扱えるので、開発が非常にスムーズになります。

4. Thymeleafのフォームタグ（th:action、th:objectなど）の使い方

では、実際にThymeleafのフォームで使う主な属性の使い方を見てみましょう。

th:actionは、フォームの送信先URLを動的に指定します。普通のHTMLのaction属性と同じ役割ですが、ThymeleafではコントローラのURLにマッピングしやすいメリットがあります。

th:objectは、フォームと連携するJavaのオブジェクトを指定し、フォームの入力値をこのオブジェクトのフィールドにバインドします。これにより、フォーム内の各入力欄でth:fieldを使い、対応するオブジェクトのプロパティと簡単に連携できます。

以下は、Thymeleafのフォームタグの基本的な例です。


<form th:action="@{/submit}" th:object="${user}" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" th:field="*{name}" required>
  <br>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" th:field="*{email}" required>
  <br>
  <button type="submit">送信</button>
</form>

ここで、th:action="@{/submit}"は、/submitというURLにフォームデータを送信することを指定しています。th:object="${user}"は、モデルにあるuserオブジェクトとフォームを紐付けています。

また、各inputタグのth:field属性は、その入力欄がuserオブジェクトのどのプロパティと対応しているかを指定します。これにより、フォーム送信時に自動的にnameやemailの値がuserオブジェクトにセットされます。

このように、Thymeleafを使うことでHTMLフォームとSpring Controllerの連携が非常にシンプルに書けるため、開発効率が大幅に向上します。初心者でもフォームのデータ送信と受け取りが分かりやすくなるため、ぜひ活用してください。

5. Spring Controllerで受け取ったフォームデータの処理例（簡単なコード）

Spring FrameworkのControllerでは、Thymeleafのフォームから送信されたデータをJavaのオブジェクトとして受け取ることができます。@Controllerのメソッドに、フォームと紐付けたモデルオブジェクトを引数として用意するだけで簡単に処理できます。

以下は、ユーザーから送信された名前とメールアドレスを受け取って処理するControllerの例です。


@Controller
public class UserController {

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

    @PostMapping("/submit")
    public String submitForm(@ModelAttribute User user, Model model) {
        // 受け取ったユーザー情報を使った処理をここで行います
        System.out.println("名前: " + user.getName());
        System.out.println("メール: " + user.getEmail());

        model.addAttribute("message", "送信が成功しました！");
        return "result";
    }
}

この例では、@ModelAttributeでフォームのデータが自動的にUserオブジェクトにバインドされます。showFormメソッドで空のUserをモデルにセットし、Thymeleafのフォームで利用します。

送信後、submitFormメソッドでユーザー情報を受け取り、必要な処理（例えば保存や検証など）を行います。その後、結果画面を返す仕組みです。

6. バリデーションやエラーメッセージの連携の基本

Webアプリケーションでは、フォームに入力されたデータの正しさをチェックするバリデーションが重要です。Springではバリデーション機能を使って、入力内容が正しいか自動で確認し、エラーがあれば画面にエラーメッセージを表示できます。

バリデーションを使うには、Javaのモデルクラスにjavax.validation.constraintsのアノテーションを付けます。例えば、名前を必須にし、メールアドレスの形式をチェックする例です。


public class User {

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

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

    // getter/setter
}

次に、Controllerでバリデーションを実行し、エラーがあった場合はフォーム画面に戻してエラーメッセージを表示します。


@PostMapping("/submit")
public String submitForm(@Valid @ModelAttribute User user,
                         BindingResult bindingResult,
                         Model model) {
    if (bindingResult.hasErrors()) {
        return "form";
    }
    // バリデーション成功時の処理
    model.addAttribute("message", "送信が成功しました！");
    return "result";
}

ここで、@Validがバリデーションの実行を示し、BindingResultがエラー情報を保持します。エラーがあればフォームを再表示し、修正を促します。

最後に、Thymeleafのテンプレート側でエラーメッセージを表示する方法です。th:errors属性を使うと、対応する入力欄のエラーを簡単に表示できます。


<form th:action="@{/submit}" th:object="${user}" 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>

このようにすることで、ユーザーが誤った入力をした場合でも、どこが問題かをわかりやすく画面に表示でき、使いやすいフォームになります。

以上が、フォームデータ処理やバリデーション、エラーメッセージを含むThymeleaf連携の基本的な流れです。これらの知識を活用して、より安全で使いやすいWebフォームを作ってみましょう。