Webプログラミングの始め方（９）

ここでのゴール

HTMLで使われているthymeleafの調べ方や内容をざっくり理解する

ThymeLeafとは

Thymeleaf

Springと相性のよいサーバー側Javaのテンプレートエンジンとして利用されている。ざっくりいうと、JavaとHTMLのつなぎを上手いことやってくれる便利なもの位の感覚で良いかと思います。

ソースコード上では「th:」がついている箇所がthymeleaf固有の書き方になっています。HTMLはある程度勉強している前提で、thymeleaf固有の箇所を見ていきましょう。

リファレンスは上記リンクのdocsから行けますが、今回は非公式ですが、日本語訳も有るのでそちらを使って見ましょう。

Tutorial: Using Thymeleaf (ja)

いきなり出てきました。

「xmlns:th」こやつは何をしているか？を調べて行きたいと思います。

日本語ページにおいて「xmlns:th」を検索してみます。すると以下の様に記述があり、「おまじない」となっています。じゃあそんなもんだ！と思って貰っても結構ですし、もう一段理解しておきたい人は下段の「th:*属性の名前空間定義が無いことについて文句を言ってくるのを防ぐ」となっています。

xmlnsを調べてみると、通常は「http://www.w3.org/1999/xhtml」HTML5から省略可能、そして上記の記述より、thymeleaf用のタグを「th:*」理解するために必要な情報をURIから取得し、解釈させるために必要と考えられます。また、「・・th="http://・・」としていることより「th」がつくものはthymeleafとして解釈してねと類推します。

と上記の様に調べていきます。

以下に今回使ってるやつを調べた結果をざっくりと記述しておきます。

ざっくりリファレンス

th:href

hrefの属性変更、hrefと同時に指定する事で静的にページを開いてもリンク出来る

th:action

actionの属性変更

th:object

objectの属性変更

th:field

日本語版では引っかからないので、英語版の最新Springで検索します。バック側のプロパティにバインドしてくれるが、MVC対応との事、もしかすると今回のWebFlexではうまく行かないかもしれません。

th:errorclass

field指定時にエラーが起きた際のスタイルシートを指定。用意されているものを使っています。

th:if

条件判定

th:errors

エラー時に属性を変更する

th:each

オブジェクトを繰り返し実施

th:text

text属性の変更

th:value

value属性の変更