独学でJavaを学んでいる方向け

「実務レベルに到達できるか不安」「1人だと詰まることが多い」場合は、実践重視で学べる環境を一度確認しておくのも一つの手です。

EBAエデュケーション｜学習内容・サポートを見る

Thymeleafのth:actionの使い方を徹底解説！初心者向けフォーム処理の基本

Thymeleafのth:actionの使い方

先生と生徒の会話形式で理解しよう

生徒

「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リクエストが送られます。

将来を見据えて、＋αのスキルを身につけたい方へ

JavaやLinuxを学んでいても、「このままで市場価値は上がるのか」「キャリアの選択肢を広げたい」と感じる方は少なくありません。

AIを学ぶならアイデミープレミアム

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の値を受け取り、ビューに表示します。

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の組み合わせがわかりやすくなりました！」

先生

「それはよかったです。ぜひこれを基に、実際のプロジェクトでも活用してみてくださいね。」

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Thymeleafのth:actionとは何ですか？

Thymeleafのth:actionは、フォームの送信先URLを動的に指定するための属性です。Spring MVCと連携してフォームデータを効率的に処理する際に使われます。

th:actionと通常のaction属性の違いは何ですか？

通常のaction属性は固定のURLを指定しますが、th:actionはテンプレートエンジンを使って動的にURLを生成することができます。

th:actionを使ったフォームをどのように作成しますか？

フォームタグにth:action属性を追加し、送信先のURLを指定します。例えば、`th:action="@{/submit}"`と記述すると、/submitにフォームデータが送信されます。

Spring MVCのコントローラーとth:actionはどう連携しますか？

Spring MVCのコントローラーで、th:actionで指定したURLに対応するメソッドを作成します。このメソッドでフォームデータを受け取り、処理します。

th:actionを使ってPOSTリクエストを送るにはどうすればいいですか？

フォームタグにmethod="post"を指定し、th:actionで送信先URLを設定します。これにより、フォームデータがPOSTリクエストとして送信されます。

Spring MVCでフォーム送信後にデータを表示する方法は？

コントローラーでフォームデータを受け取り、モデルにデータを追加してビューに渡します。ビュー側でth:textを使ってデータを表示します。

th:actionを使って複数のフォームを処理する方法は？

各フォームタグに異なるth:actionを指定します。例えば、一つのフォームには@{/form1}を、別のフォームには@{/form2}を指定して処理を分けます。

th:actionの動的URL生成はどのように機能しますか？

テンプレートエンジンが@{/url}形式を解釈し、アプリケーションの設定に応じた完全なURLを生成します。これにより、コードの保守性が向上します。

初心者がth:actionを学ぶ際の注意点はありますか？

まずは簡単なフォームでth:actionを使い、URLの生成とコントローラーの連携を理解することが重要です。その後、POSTやGETの違いを学び、応用例に進むと良いでしょう。

フォーム送信後にエラーメッセージを表示するにはどうすればいいですか？

フォーム送信時にバリデーションを行い、エラーがあればモデルにエラーメッセージを追加します。ビュー側でth:ifを使い、条件に応じてエラーメッセージを表示します。

Spring FrameworkやThymeleafを使った Webアプリ開発の全体像をやさしく理解したい人には、この入門書が定番です。

Spring Framework超入門をAmazonで見る

※ Amazonアソシエイト・プログラムを利用しています