Thymeleafのth:actionの使い方を徹底解説！初心者向けフォーム処理の基本
Javaの基礎を体系的に整理しながら学習したい方には、 資格対策としても定評のある定番教材が参考になります。
Javaプログラマ Silver SE 17 教科書をAmazonで見る※ Amazon広告リンク
生徒
「Thymeleafを使ってフォームを送信したいんですが、どのように書けばいいんですか？」
先生
「フォームの送信先を指定するには、th:action属性を使います。これを利用することで、Spring MVCと連携してデータを簡単に処理できます。」
生徒
「具体的にどんなコードを書けばいいか、教えてください！」
先生
「それでは、th:actionの基本的な使い方を見ていきましょう！」
1. th:actionとは？
Thymeleafのth:action属性は、フォームの送信先URLを動的に指定するための属性です。Spring MVCと連携して、データをコントローラーに送信する際に非常に便利です。
通常、HTMLのaction属性にURLを指定しますが、th:actionを使うと、テンプレートエンジンが適切なURLに置き換えてくれます。例えば、ユーザー登録フォームなどで使用します。
2. th:actionの基本的な使い方
以下はth:actionを使ったシンプルな例です。フォームが送信されると、指定されたURLのコントローラーメソッドが呼び出されます。
<form th:action="@{/submit}" method="post">
<input type="text" name="username" placeholder="ユーザー名" />
<button type="submit">送信</button>
</form>
このコードでは、フォームが送信されると/submitというURLにPOSTリクエストが送られます。
3. Spring MVCとの連携
Spring MVCのコントローラーとth:actionを連携させる方法を見てみましょう。以下は、フォームデータを処理するコントローラーの例です。
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class FormController {
@PostMapping("/submit")
public String handleForm(String username, Model model) {
model.addAttribute("message", "ユーザー名は " + username + " です。");
return "result";
}
}
このコントローラーでは、フォームから送信されたusernameの値を受け取り、ビューに表示します。
Spring FrameworkやThymeleafを使った Webアプリ開発の全体像をやさしく理解したい人には、 この入門書が定番です。
Spring Framework超入門をAmazonで見る※ Amazon広告リンク
4. th:actionを使った実践例
ここでは、Spring MVCの設定とth:actionを使った具体的なフォーム処理を見ていきます。
フォームテンプレート
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>フォーム送信</title>
</head>
<body>
<h1>ユーザー登録</h1>
<form th:action="@{/submit}" method="post">
<label for="username">ユーザー名:</label>
<input id="username" type="text" name="username" placeholder="ユーザー名" /><br/>
<button type="submit">登録</button>
</form>
</body>
</html>
処理結果テンプレート
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>結果表示</title>
</head>
<body>
<h1>フォーム送信結果</h1>
<p th:text="${message}"></p>
</body>
</html>
この例では、フォームを送信すると/submitエンドポイントが呼び出され、送信されたデータを基に動的な結果が表示されます。
5. th:actionに動的パス変数を埋め込む（パス・クエリの両対応）
フォーム送信先が利用者ごとに変わる場合はパス変数やクエリパラメータを組み合わせてth:actionへ埋め込む。Spring MVCの@PostMappingと自然に対応し、ユーザー詳細・編集・検索などの場面で扱いやすい。
基本：パス変数を差し込む
<form th:action="@{/users/{id}/edit(id=${user.id})}" method="post">
<button type="submit" class="btn btn-primary">保存</button>
</form>
複数のパス変数とクエリ併用
<form th:action="@{/shops/{shopId}/orders/{orderId}(shopId=${shop.id},orderId=${order.id},mode=${mode})}" method="post">
<button type="submit" class="btn btn-outline-secondary">更新</button>
</form>
検索フォーム：クエリだけ差し込む
<form th:action="@{/search(q=${keyword},page=${page})}" method="get">
<input type="text" name="q" th:value="${keyword}" placeholder="キーワード">
<button type="submit">検索</button>
</form>
ポイント：
- コンテキストパスは
@{...}が自動で解決する。 - パス変数とクエリは
(...)内で名前=値の形式にそろえる。
6. @を使わずに書く：文字列URLを直接渡して送信先を固定／可変にする
既に完全なURLやコンテキスト相対パスをサーバ側で用意できる場合は@なしで文字列をそのまま渡す方法も選べる。th:actionやth:attr="action=..."で生のURLを設定する。
固定パスを直接指定（簡易）
<form th:action="'/submit'" method="post"> <!-- 先頭スラッシュに注意 -->
<button type="submit">送信</button>
</form>
サーバ側でURLをモデルに用意して流し込む
// コントローラーで組み立てておく例
model.addAttribute("postUrl", request.getContextPath() + "/accounts/register");
<form th:action="${postUrl}" method="post">
<button type="submit" class="btn btn-success">登録</button>
</form>
th:attrを用いた明示的な属性設定
<form th:attr="action=${#httpServletRequest.contextPath + '/submit'}" method="post">
<button type="submit">送信</button>
</form>
注意：
@{...}を使わない場合、コンテキストパスは自動付与されないため、必要に応じて#httpServletRequest.contextPathで補う。
7. 変数を文字連結してth:actionへ設定（@なし・式連結・リテラル置換）
画面側だけでIDやスラッグを連結して送信先を組み立てたいときは、式の連結やリテラル置換で文字列URLを作る。@を使わずに柔軟なパスを構成できる。
式の連結（+）で組み立て
<form th:action="${#httpServletRequest.contextPath + '/users/' + ${user.id} + '/profile'}" method="post">
<button type="submit">プロフィール保存</button>
</form>
リテラル置換（|...|）で読みやすく
<form th:attr="action=|${#httpServletRequest.contextPath}/users/${user.id}/orders/${order.code}|"
method="post">
<button type="submit" class="btn btn-outline-primary">注文確定</button>
</form>
クエリ文字列も連結で付与
<form th:attr="action=|${#httpServletRequest.contextPath}/search?q=${keyword}&page=${page}|"
method="get">
<input type="text" name="q" th:value="${keyword}" placeholder="キーワード">
<button type="submit">再検索</button>
</form>
ヒント：
- 相対パス解決のゆらぎを避けるため、先頭にコンテキストパスを明示する。
- 連結は読みやすさのため
|...|（リテラル置換）を優先し、特殊文字は自動的にエスケープされるテンプレートの規則に従う。
まとめ
本記事では、Thymeleafのth:action属性を使ったフォームの送信方法について解説しました。th:actionは、Spring MVCと連携する際に非常に便利で、テンプレートエンジンが提供する動的URLの生成機能を活用することで、コードの保守性が向上します。また、具体的な例を通じて、フォームテンプレートとコントローラーの設定方法について学びました。
特に、Spring MVCでデータを送受信する際、th:actionを活用することでURLの指定が簡単になり、コードの可読性も向上します。これにより、Webアプリケーション開発で効率的にフォームデータを処理することができます。
以下は、今回学んだ内容を振り返るためのもう一つのサンプルコードです。このコードでは、異なるエンドポイントを指定する場合のth:actionの使い方を示しています。
複数のフォーム処理例
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>複数フォーム処理</title>
</head>
<body>
<h1>複数フォーム例</h1>
<form th:action="@{/form1}" method="post">
<label for="name">名前:</label>
<input id="name" type="text" name="name" placeholder="名前を入力" /><br/>
<button type="submit">送信1</button>
</form>
<form th:action="@{/form2}" method="post">
<label for="email">メール:</label>
<input id="email" type="email" name="email" placeholder="メールを入力" /><br/>
<button type="submit">送信2</button>
</form>
</body>
</html>
このように、異なるエンドポイントを動的に指定することで、複数のフォームを管理することも容易になります。
生徒
「th:actionを使うことで、URLを動的に管理できるのは便利ですね！」
先生
「そうですね。この機能を使えば、コントローラーとの連携が簡単になりますし、URLの変更にも柔軟に対応できます。」
生徒
「実践例を見て、Spring MVCとThymeleafの組み合わせがわかりやすくなりました！」
先生
「それはよかったです。ぜひこれを基に、実際のプロジェクトでも活用してみてくださいね。」
この記事を読んだ人からの質問
