ThymeleafとAlpine.jsの簡単な連携

ThymeleafとAlpine.jsの簡単な連携の小ネタです。Thymeleafには、th:inlineというインライン処理というものがあり、指定した形式に加工してくれる便利なものがあります。

例えば、下記のようなJavaのMapデータがあります。

@Controller
@RequestMapping("sample")
class SampleController {
    @GetMapping
    public String index(Model model){
        Map<String,String> userMap = Map.of("user", "Taro");
        model.addAttribute("user" , userMap);
        return "index";
    }
}

Thymeleafの方でJSに渡したいとしたときに下記のような記述でJSで使えるように展開してくれます。(JSONにしてくれます)

<script th:inline="javascript">
   const userMap = /* [[ ${user} ]] */  { user: 'Taro'};
</script>

Alpine.jsで使用するときに、x-dataの中にThymeleafから直接データを入れようとすると、相性があんまりよくないので、このThymeleafのインライン処理を経由してバックエンドのデータを渡します。

<script th:inline="javascript">
   const userMap = /* [[ ${user} ]] */  { user: 'Taro'};
</script>

<div x-data="{data: userMap}"></div>

Alpine.js側のx-dataは、JS経由でデータをもらいます。Alpine.jsとの連携に割と便利なので、サクッと使い時にはよさそうです。