バナー画像

Spring フレームワークのテンプレートエンジンとして人気の Thymeleaf の使用方法について、前回に引き続き解説をします。

今回の記事では、Thymeleaf のフォームバインディングについて解説していきます。

バインディングとは?

Thymeleaf におけるバインディングとは、入力項目と Java オブジェクトのプロパティを連結させることを指します。

フォーム・バインディングをすることで、サーバー側で設定した値をブラウザに表示したり、逆に、ユーザーがブラウザで入力した値をサーバー側に送信することが容易になります。

フォームのバインド

入力画面などの開発では、入力項目に対応するプロパティを持つフォームクラスを作成し、入力項目とフォームクラスのプロパティをマッピングさせる方法で開発します。

フォームクラスは、以下のように、シンプルな Plain Old Java Object (POJO) として作成し、ビジネスロジックなどの機能は持たせないようにします。

public class Todo {
  private Integer taskId;

  public Integer getTaskId() { 
    return this.taskId; 
  }
  public Integer setTaskId(Integer taskId) { 
    return this.taskId = taskId; 
  }
  ...
}

また、Thymeleaf のバインディングとは直接関係はしませんが、Lombok(ロンボック) のようなライブラリを使用することで、getttersetter などを自動生成させて、冗長なコードを削減し、次のようなシンプルな形でフォームクラスを定義することも可能です。

@Data
public class Todo {
  private Integer taskId;

  //@Dataアノテーションにより、getter・setter は自動生成されるめ記述が不要
}
ポテパンダの一言メモ

上で挙げたフォームクラスは、企業やプロジェクトの文化によって、モデルやビューモデルなどとも呼ばれたりしますが、入力項目に対応するプロパティを POJO クラスで持つという意味では、どれも同じです。

タスクを登録する画面を作ってみよう

簡単なタスクを登録画面を作成し、Thymeleaf におけるフォーム・バインディングの方法について見ていきましょう。

フォームクラス

まずは、タスク入力画面に表示するフォームクラスの作成を行います。今回はタスク名と完了フラグ、期限の3つのプロパティを持つシンプルな構造とします。

public class TodoForm {
  private String taskName;            //タスク名
  private Boolean completeed;        //完了フラグ
  private Date limit;                        //期限

  //getter・setterの記載は省略
  ...
}

ビュー(Thymeleaf テンプレート)

次にビューの部分となる Thymeleaf のテンプレート を作成します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  </meta>
  <title>タスクの登録</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body class="p-3">
  <form method="post" th:action="@{/post}" th:object="${TaskForm}">
    <div class="mb-3">
      <label for="taskName" class="form-label">タスク</label>
      <input type="text" class="form-control" th:field="*{taskName}" />
    </div>
    <div class="mb-3">
      <label for="limit" class="form-label">期限</label>
      <input type="date" class="form-control" th:field="*{limit}" />
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" th:field="*{completeed}">
        <label class="form-check-label" for="completeed">
          完了
        </label>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">登録</button>
  </form>
</body>

</html>

コントローラ

最後にコントローラを作成します。

画面の初期表示と、登録ボタンがクリックされ、POST が行われた時に呼ばれるメソッドの2つを作成します。

@Controller
public class TodoController {

  @GetMapping(value = { "/", "" })
  public String index(Model model) throws ParseException {
    var form = new TodoForm();
    form.setLimit();    //期限の初期値は本日+5日にする

    //画面を表示
    model.addAttribute(form);
    return "index";
  }

  @PostMapping
  public void post(@ModelAttribute TodoForm todoForm) {
      System.out.pringln(taskForm.getTaskName());
      System.out.pringln(taskForm.getCompleteed());
      System.out.pringln(taskForm.getLimit());
  } 
}
ポテパンダの一言メモ

今回は、Thymeleaf におけるフォーム・バインディングを解説する記事であるため、本来であれば、post メソッドで入力されたタスクをデータベースなどへ登録する処理が必要ですが、その部分の記載については省略しています。

まとめ

これで、Thymeleaf を使った簡単なフォーム・バインディングのサンプルコードは完成です。

デバッグで動かしてみて、フォームに入力した値が、コントロクラスの引数に設定されているか、確認してみましょう。

【関連記事】
Java のWEBアプリでセッションを利用する方法を解説

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。