JavaのフレームワークであるSpringBootを用いてアプリ開発について学習している過程で、HTMLをテンプレートを動的に生成するテンプレートエンジンであるThymeleafの参照プレフィックスをいくつか使用したので、備忘録として記録したいと思います。
参照プレフィックスとは
参照プレフィックスはテンプレート内で特定の種類のデータや機能を示すために使われる記号のことです。この記号を使うことで、参照プレフィックスの後に続く要素が特定のデータや機能を参照することができます。
具体的な参照プレフィックスの例
今回は学習の過程で使用した3つの参照プレフィックスについて説明します。
'@'：URLや静的リソースの参照
'@'プレフィックスはURLや静的リソースを参照するために使用します。下記のその2通りについて説明します。
URLの生成
下記は'@'を用いてURLを生成した例です。例では'@'プレフィックスを用いることで、'@{/home}'がテンプレート処理時に'/home'というURLに変換され、該当部をクリックすると生成したURLに遷移できるようになっています。
<a th:ref="@{/home}">Home</a>
静的リソースの参照
静的リソースとはWebアプリにおいて、サーバーから直接提供される固定のファイルやリソースのことを指し、主にHTMLやCSS、JavaScript、画像ファイルのことをいいます。
下記はlinkタグでは参照するCSSファイルのパスを指定する必要があり、そこで'@'プレフィックスを使用しています。
<link rel="stylesheet" th:href="@{/css/style.css}" />
'#'：ユーティリティオブジェクトやメソッドの参照
次に、'#'プレフィックスについて説明します。'#'プレフィックスはユーティリティオブジェクトやメッセージリソースを参照するために非常に便利です。これを使用することで、テンプレート内でのデータ操作や表示が簡単になり、コードの再利用性やメンテナンス性が向上します。
ユーティリティオブジェクトは数多く種類があり、日付操作や配列操作、メッセージ操作などがあります。
使用例は下記の通りです。下記のコードでは'#date.format'を用いて日付を特定の形式で表示しています。
<p th:text="${#dates.format(date, 'yyyy-MM-dd')}">2024-06-13</p>
また、メッセージ操作の例は下記の通りです。下記では、htmlファイルの他にmessage.propertiesファイルを用意し、そのファイルに命名規則を設定しておき、htmlでそれを参照します。
welcome.message=Welcome to our site!
<h1 th:text="#{welcome.message}">Default Welcome Message</h1>
'*'：テンプレート内のローカル変数やオブジェクトのプロパティ参照
''プレフィックスは主に選択式として使われます。このプレフィックスを使用すると、現在のコンテキストオブジェクトのプロパティにアクセスし易くなります。
コードの例は下記の通りです。Model.javaのようにフィールドが設定されているモデルがあったと仮定し、このフィールドの値をform.htmlで表示するというのが大まかな流れです。form.htmlへ遷移する前にController.javaでモデルクラスのインスタンス化とフィールドの値をセットし、model.addAttribute("user", new User());で値をセットし、form.htmlへ渡しています。form.htmlでは'${user}'でuserインスタンスを受け取り、そのインスタンス内のフィールドを''プレフィックスを用いて'{name}'と'{email}'の値を表示しています。
このように、'*'プレフィックスはコントローラかビューに渡したインスタンス内のデータを使用するのに役立ちます。
public class User {
private String name;
private String email;
// getters and setters
}
@Controller
public class Controller {
@GetMapping("/form")
public String showForm(Model model) {
model.addAttribute("user", new User());
return "form";
}
}
<div th:object="${user}">
<p th:text="*{name}">User Name</p>
<p th:text="*{email}">User Email</p>
</div>
まとめ
今回はThymeleaf式における以下3つのプレフィックスについて使い方を説明しました。
①'@'：URLや静的リソースの参照
②'#'：ユーティリティオブジェクトやメソッドの参照
③'*'：テンプレート内のローカル変数やオブジェクトのプロパティ参照
Thymeleaf式の導入によって、フロントエンド側でも汎用的にデータ操作が可能になる点がとても便利だなと感じました。特に②の一部である配列操作や③のプロパティ参照はJavaで学習した内容をそのまま流用できるので使いやすかったです。
また、プレフィックスという記号を用いることでこのコードがどのような使い方なのか一目で理解できるようになっている点も使いやすいなと感じました。
次回も開発過程で理解できかなった点を深堀りしたいと思います。