何がしたいの？？
よく使うようなHTMLを部品化し、わざわざ毎回コードを書かなくても
使いまわしができるようにしたい。
どんな仕組み？
Thymeleafの機能
| th:fragment | 部品化する要素を定義 |
| th:insert，th:replace | 埋め込む場所に指定 |
Thymeleaf 3.0より、th:incude は非推奨となっています。
その代替として、th:remove=”tag” があるのかも？
※th:remove=”tag”については、別途後述します。
構文
フラグメント
部品化する内容を定義したもの。
th:fragment=”部品名”
insert，replace
実際に部品を挿入する方法です。
使用する際は、フラグメントで定義した”部品名”を指定して呼び出します。
th:insert=”部品を定義したHTMLパス(拡張子を除く) :: fragmentで定義した部品名”
th:replace=”部品を定義したHTMLパス(拡張子を除く) :: fragmentで定義した部品名”
フラグメントをルートに作成した場合は、”parts :: 部品名”
部品用等でフォルダを作成している場合は、”common/parts” というような指定になる
th:insert，th:replaceの違い
部品を挿入するか、部品で置き換えるかの違い。
th:insertなら、指定のタグの中に部品を挿入します。
th:replaceなら、指定のタグ自体を部品で置き換えます。
実装方法
th:insert を使用した場合のサンプル
フラグメントを、common/parts.html に定義した場合
<p class="fragment" th:fragment="fragment1">サンプル</p>使用箇所
<div class="insert" th:insert="common/parts :: fragment1"></div>結果（画面のソースを表示した場合）
<div class="insert"><p class="fragment">サンプル</p></div>th:insertを指定したタグの中に、フラグメントで定義した部品が追加されていることが確認できる。
th:replace を使用した場合のサンプル
フラグメントは、th:insertと同様のものを定義
使用箇所
<div class="insert" th:insert="common/parts :: fragment1"></div>結果（画面のソースを表示した場合）
<p class="fragment">サンプル</p>th:replaceを指定したタグは削除され、フラグメントで定義した部品に置き換わっていることが確認できる。
th:removeについて
部品化したタグに対し、タグ自体を削除して使用したり、ボディ部分を削除して使用したりするときに指定する。
ボディ部分の削除とは、フラグメントのページを直接ブラウザで開いた場合は、サンプルとして内容が表示されるが、
Thymeleafで部品として使用するときには、サンプル部分は削除されて出力されるような動作となる。
例えば、HTMLでプロトタイプを作成したときに、サンプルはそのままにして実装するようなときに使うことが多い…かも？
なお、th:remove で削除する範囲は、以下の値が設定することで指定できる。
| all | ボディ部分を含むタグすべて |
| body | タグのボディ部分のみ |
| tag | タグのみ（ボディを残す） |
| all-but-first | 自分自身とボディー部の最初のタグだけを残す |
| none | 何もしない（指定しない場合と同じ） |
サンプル
フラグメントを、common/parts.html に定義した場合
<p class="fragment" th:fragment="fragment1" th:remove="all">
<img src="1"/><img src="2"/><img src="3"/>
</p>
<p class="fragment" th:fragment="fragment2" th:remove="body">
<img src="1"/><img src="2"/><img src="3"/>
</p>
<p class="fragment" th:fragment="fragment3" th:remove="tag">
<img src="1"/><img src="2"/><img src="3"/>
</p>
<p class="fragment" th:fragment="fragment4" th:remove="all-but-first">
<img src="1"/><img src="2"/><img src="3"/>
</p>
<p class="fragment" th:fragment="fragment5" th:remove="none">
<img src="1"/><img src="2"/><img src="3"/>
</p>※結果がわかるように、imgタグを3つ入れてます。
使用箇所
<div class="all" th:insert="common/parts :: fragment1"></div>
<div class="body" th:insert="common/parts :: fragment2"></div>
<div class="tag" th:insert="common/parts :: fragment3"></div>
<div class="all-but-first" th:insert="common/parts :: fragment4"></div>
<div class="none" th:insert="common/parts :: fragment5"></div>結果（画面のソースを表示した場合）
<div class="all"></div>
<div class="body"><p class="fragment"></p></div>
<div class="tag"><img src="1"/><img src="2"/><img src="3"/></div>
<div class="all-but-first"><p class="fragment"><img src="1"/></p></div>
<div class="none"><p class="fragment"><img src="1"/><img src="2"/><img src="3"/></p></div>ざっくり解説
| all | 部品のボディ部分も含め、すべて出力されていない |
| body | タグ部分のみが出力され、ボディ部分は出力されていない |
| tag | bodyとは逆に、指定したタグが削除され、ボディ部分だけが出力される （非推奨となった、th:include と同様の動作） |
| all-but-first | ボディ部分の1件目のみが出力されている。 （プロトタイプなどで使うと便利） |
| none | 指定なしと同様、そのまま出力される。 （あえて指定する意味とは） |
おまけ
フラグメントページは、ただ部品の定義をしておくだけでなく、定義された部品を画面表示できるようにしておくと便利です。
ここでは部品だけを記載してましたが、画面としてHTMLファイルを書いておき、サンプルとしてまとめて表示できると、
実際のイメージを人に説明しやすく、どんな部品だったかをあとから確認しやすいのでおすすめです。
せっかく部品化するので、この先も活かせるように作成しておくことが、SEとして大事！
注意
フラグメントに同じ部品名を指定した場合、該当する部品がすべて出力されます。
それを都合よく使える場合もあるかもしれませんが、コードが煩雑になるので基本的にはやめましょう。
次にそのコードを見た人に怒られます笑
Spring-Bootについて勉強したいなら！
基本的にはインターネットで調べれば、参考文献はいくらでも見つかるとは思います。
ただ、辞書替わりに必要でしたら、以下の書籍がおすすめです。
とはいえ、数多く読んできたわけではないですが。。。
こちらは、Spring Frameworkの書籍ではありますが、幅広く知識を身につけたい方にはおすすめです
こちらは、実践的なことから注意すべきことまで記載されています。
コメント