Thymeleaf

エキサイト株式会社メディアプラットフォーム事業部エンジニアの佐々木です。テンプレートエンジンの関数のみだと足りないのでSpringBootの@Componentを使用して拡張します。 コード まとめ コード 現在時刻を返すだけの簡単なヘルパー関数を作ってみます。コードはJavaで書きます。SpringBootのDIコンテナは、@Componentがつけられたクラス名のlowerCamelで、DIコンテナに格納する暗黙のルールがあります。なので、@Componentの宣言時に命名もセットにすると視認性が高くなるかなと思います。 @Component("dateTimeComponent") pu…

各コンポーネントの説明 +------------+ calls +------------+ calls +------------+ | Controller| ------------> | Service | ----------> | Repository | +------------+ +------------+ +------------+ | | | | Business Logic | | | | | | v v +------------> Handles Requests <------------------> Accesses Data 1. Controller…

はじめに こんにちは、新卒2年目の岡崎です。エキサイトHDアドベントカレンダー2024の5日目を担当します。 今までの記事はこちらをご覧ください。 qiita.com さて。今回は、SpringBoot + Thymeleafで、JavaScriptに変数を埋め込む方法を紹介します。 環境 Java 試しに23を使っていますが、21でも問題ないです。 openjdk version "23.0.1" 2024-10-15 OpenJDK Runtime Environment Corretto-23.0.1.8.1 (build 23.0.1+8-FR) OpenJDK 64-Bit Serv…

thymeleaf-layout-dialectとは 主な機能 基本的な使用方法 Maven依存関係の追加 レイアウトの定義 ページテンプレートの定義 thymeleaf-layout-dialectとは thymeleaf-layout-dialectは、Thymeleafテンプレートエンジンの拡張機能で、レイアウトやテンプレートの再利用を簡単にするためのライブラリです。 ThymeleafはJavaベースのテンプレートエンジンで、サーバーサイドでHTMLテンプレートを生成するために広く使われています。 主な機能 1. レイアウトの継承: thymeleaf-layout-dialectは、…

ThymeleafでJavaScriptの変数に値を埋め込む方法 1. 直接埋め込み 2. データ属性を使った埋め込み まとめ ThymeleafでJavaScriptの変数に値を埋め込む方法 Thymeleafを使ってJavaScriptの変数にサーバーサイドの値を埋め込む方法を説明します。 使用場面は結構多いと思いますが、ついついやり方を忘れてしまいがちですよね。 備忘のためにも記しておきたいと思います。以下は、埋め込むための基本的な例です。 1. 直接埋め込み 最も基本的な方法は、th:text属性を使って、直接JavaScriptの変数に値を埋め込むことです。 <script th:i…

はじめに こんにちは、新卒2年目の岡崎です。今回は、Thymeleafでハイパーリンクを実装する方法を紹介します。 環境 Thymeleaf 3.3.0 前提 以下のようなオブジェクトが存在することを仮定します。 @Data public class Test { private Long id; private String name; // 以下略 } オブジェクトのリストを表示する場合、以下のコントローラーを使います。 @GetMapping("list/test") public String getTestList( Model model ) { final List<Test> …

Thymeleafの[*{birth}]と[${birth}]の違い [*{birth}]: [*{...}]は、プレースホルダー式（Placeholder Expression）として知られています。 プレースホルダー式は、Thymeleafがデータをテンプレートに表示する際に、対応するモデルオブジェクトから属性を動的に解決します。 この式は、コンテキスト内のオブジェクトのプロパティを参照するために使用されます。*は現在のオブジェクトを指します。 例えば、[*{birth}]は、現在のオブジェクトのbirthプロパティを取得し、それを表示します。 [${birth}]: ${...}は、変数…