1. 序章

Thymeleaf は、Javaエコシステムで最も人気のあるテンプレートエンジンの1つです。 これにより、Javaアプリケーションのデータを簡単に使用してダイナミックHTMLページを作成できます。

このチュートリアルでは、SpringとThymeleafで非表示の入力を使用するいくつかの方法を見ていきます。

2. HTMLフォームを使用したThymeleaf

非表示フィールドの操作を検討する前に、一歩下がって、Thymeleafが一般的にHTMLフォームでどのように機能するかを見てみましょう。

最も一般的なユースケースは、アプリケーションでDTOに直接マップするHTMLフォームを使用することです。

たとえば、ブログアプリケーションを作成していて、単一のブログ投稿を表すDTOがあるとします。

class BlogDTO {
    long id;
    String title;
    String body;
    String category;
    String author;
    Date publishedDate;  
}

HTMLフォームを使用して、ThymeleafとJavaを使用してこのDTOの新しいインスタンスを作成できます。

<form action="#" method="post" th:action="@{/blog}" th:object="${blog}">
    <input type="text" th:field="*{title}">
    <input type="text" th:field="*{category}">
    <textarea th:field="*{body}"></textarea>
</form>

ブログ投稿DTOのフィールドは、HTMLフォームの単一の入力にマップされていることに注意してください。 これはほとんどの場合うまく機能しますが、編集できないフィールドはどれですか? これは、隠された入力が役立つ場合があります。

たとえば、各ブログ投稿には、ユーザーが編集できないようにする一意のIDフィールドがあります。 非表示の入力を使用して、IDフィールドを表示または編集せずにHTMLフォームに渡すことができます

3. th:field属性の使用

非表示の入力に値を割り当てる最も簡単な方法は、 th:field属性を使用することです。

<input type="hidden" th:field="*{blogId}" id="blogId">

value属性を指定する必要がないため、これが最も簡単な方法ですが、古いバージョンのThymeleafではサポートされていない可能性があります。

4. th:attr属性の使用

Thymeleafで非表示の入力を使用できる次の方法は、組み込みの th:attr属性を使用することです。

<input type="hidden" th:value="${blog.id}" th:attr="name='blogId'"/>

この場合、blogオブジェクトを使用してidフィールドを参照する必要があります。

5. name属性の使用

もう1つのそれほど冗長でないアプローチは、標準のHTML name属性を使用することです。

<input type="hidden" th:value="${blog.id}" name="blogId" />

標準のHTML属性のみに依存しています。 この場合、blogオブジェクトを使用してidフィールドも参照する必要があります。

6. 結論

このチュートリアルでは、Thymeleafで非表示の入力を使用するいくつかの方法を確認しました。 これは、読み取り専用フィールドをDTOからHTMLフォームに渡すための便利な手法です。

いつものように、このチュートリアルで使用されているすべてのコード例は、Githubにあります。