目次12インライン化
12.1式のインライン化
標準的な方言では、タグ属性を使用してほとんどすべてを実行できますが、HTMLテキストに直接式を記述するほうがよい場合もあります。 たとえば、これを書くことを好むかもしれません：
<p>Hello, [[${session.user.name}]]!</p>
...代わりに：
<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
[[...]]または
[（...）]の間の式はインライン式と見なされ、その内部では
th：textまたは
th：utext属性でも有効な任意の式を使用でき
ます 。
[[...]]は th：テキストに一致し
ます （つまり、結果はHTMLエスケープ/ HTMLエスケープされます）が、
[（...）]は th：utextに一致し、HTMLエスケープを実行しないことに注意してください
。 / HTMLエスケープ。 このため、msg = 'This is <b> great！</ b>'のような変数では、次のスニペットが与えられます。
メッセージは「[（$ {msg}）]」です
その結果、<b>タグはエスケープされないため、結果は次のようになります。
<p>The message is "This is <b>great!</b>"</p>
これを回避するには：
<p>The message is "[[${msg}]]"</p>
結果はHTMLエスケープされます：
<p>The message is "This is <b>great!</b>"</p>
テキスト挿入は、タグ自体ではなく、マークアップの各タグの本文でデフォルトでアクティブになっていることに注意してください。したがって、有効にする（アクティブにする）ために行うことはありません。
挿入テンプレートと自然テンプレート/インライン化と自然テンプレートこのテキスト出力方法が標準である他のテンプレートエンジンを使用している場合は、次の質問をすることができます。 これは、すべての
th：テキスト属性よりも少ないコードです！
ただし、埋め込みはおもしろいかもしれませんが、静的に開くとインライン式がHTMLファイルに逐語的に表示されるので、デザインのプロトタイプとして使用できないことを常に覚えておく必要があります。
ブラウザが埋め込みを使用せずにコードを静的に表示する方法の違い：
Hello, Sebastian!
...および埋め込みを使用：
Hello, [[${session.user.name}]]!
...設計ユーティリティの面での違いは非常に明白です。
埋め込みを無効にするただし、コンテンツを式として処理せずにシーケンス
[[...]]または
[（...）]を出力したい場合があるため、このメカニズムをオフにすることができます。 このために、
th：inline = "none"を使用します。
<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
結果は次のようになります。
<p>A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
12.2テキストのインライン
テキスト挿入は、今見た式関数に非常に似ていますが、実際にはより強力になります。 テキストは
th：inline = "text"で明示的に含める必要があります。
テキストの挿入により、先ほど見たものと同じ組み込み式を使用できるようになるだけでなく、実際にタグをTEXTテンプレートモードで処理されたテンプレートであるかのように処理します。これにより、テンプレートのテキストロジック（および出力式だけでなく） 。
これについては、テキストテンプレートモードに関する次の章で詳しく説明します。
12.3 JavaScriptの埋め込み
JavaScriptのインライン化により、JavaScript <script>ブロックを、HTMLテンプレートモードで処理されるテンプレートに統合しやすくなります。
テキスト挿入の場合と同様に、これはスクリプトの内容をJAVASCRIPTテンプレートモードのテンプレートであるかのように処理するのと実質的に同等であるため、テキストテンプレートモードのフルパワー（次の章を参照）が手元にあります。 ただし、このセクションでは、モードを使用してThymeleaf式の出力をJavaScriptブロックに追加する方法に焦点を当てます。
このモードは、
th：inline = "javascript"を使用して明示的に有効にする必要があります。
<script th:inline="javascript"> ... var username = [[${session.user.name}]]; ... </script>
結果は次のようになります。
<script th:inline="javascript"> ... var username = "Sebastian \"Fruity\" Applejuice"; ... </script>
上記のコードで注意すべき2つの重要な点：
まず、このJavaScript挿入は、必要なテキストを表示するだけでなく、JavaScriptコンテンツを引用してエスケープするため、式の結果が整形式のJavaScriptリテラルとして表示されます。
第二に、これは式
$ {session.user.name}をエスケープされたものとして表示するためです。つまり、式を二重角括弧
[[$ {session.user.name}]]で使用します。 代わりにエスケープなしで使用した場合：
<script th:inline="javascript"> ... var username = [(${session.user.name})]; ... </script>
結果は次のようになります。
<script th:inline="javascript"> ... var username = Sebastian "Fruity" Applejuice; ... </script>
...これは間違ったJavaScriptコードです。 ただし、インライン式を追加してスクリプトの一部を作成する場合、非絶縁の結論が必要になる場合があるため、このツールを手元に置いておくと便利です。
自然なJavaScriptテンプレート前述のインテリジェントなJavaScript開発メカニズムは、JavaScript固有のエスケープを適用し、式の結果を有効なリテラルとして出力するだけではありません。
たとえば、次のようなJavaScriptコメントで（エスケープされた）インライン式をラップできます。
<script th:inline="javascript"> ... var username = "Gertrud Kiwifruit"; ... </script>
また、Thymeleafはコメントの後にセミコロン（この場合は「Gertrud Kiwifruit」）に書き込んだすべてを無視するため、この結果はコメントを使用していないかのようになります。
<script th:inline="javascript"> ... var username = "Sebastian \"Fruity\" Applejuice"; ... </script>
ただし、元のテンプレートコードをもう一度見てください。
<script th:inline="javascript"> ... var username = "Gertrud Kiwifruit"; ... </script>
この有効なJavaScriptコードをご覧ください。 また、テンプレートファイルを静的に開くと（サーバーで実行せずに）完全に実行されます。
ここにあるのは、自然なJavaScriptテンプレートを作成する方法です！
高度なJavaScriptの埋め込みとシリアル化JavaScriptインライン化では、この式の実行がインテリジェントであり、文字列に限定されないことに注意することが重要です。 Thymeleafは、JavaScript構文で次のタイプのオブジェクトを正しく書き込みます。
- ひも
- 数字
- ブール値
- 配列
- コレクション
- 地図
- Bean（ゲッターとセッターを持つオブジェクト）
たとえば、次のコード：
<script th:inline="javascript"> ... var user = null; ... </script>
式
$ {session.user}は Userオブジェクトに変換され、ThymeleafはそれをJavascript構文に正しく変換します。
<script th:inline="javascript"> ... var user = {"age":null,"firstName":"John","lastName":"Apricot", "name":"John Apricot","nationality":"Antarctica"}; ... </script>
このJavaScriptシリアル化の実行方法は、org.thymeleaf.standard.serializer.IStandardJavaScriptSerializerインターフェースの実装です。これは、テンプレートエンジンで使用されるStandardDialectのインスタンスで構成できます。
デフォルトでは、このシリアル化エンジンJSの実装はクラスパスで
Jacksonライブラリを探し、存在する場合はそれを使用します。 そうでない場合は、組み込みのシリアル化メカニズムを使用します。これにより、ほとんどのシナリオのニーズが満たされ、同様の結果が得られます（ただし、柔軟性は低くなります）。
12.4 CSS貼り付け
Thymeleafでは、次のように、CSS <style>タグへの挿入を使用することもできます。
<style th:inline="css"> ... </style>
たとえば、2つの異なる文字列値に設定された2つの変数があるとします。
classname = 'main elems' align = 'center'
それらを使用できます：
<style th:inline="css"> .[[${classname}]] { text-align: [[${align}]]; } </style>
結果は次のようになります。
<style th:inline="css"> .main\ elems { text-align: center; } </style>
CSS埋め込みには、JavaScript埋め込みなどのインテリジェンスもあることに注意してください。 特に、
[[$ {classname}]]のようなエスケープされた式を使用した出力は、CSS識別子としてエスケープされます。 これが、上のコードスニペットでclass = 'main elems'がmain \ elemsに変わった理由です。
高度な機能：Natural CSSテンプレートなどJavaScriptについて前述した同等の方法で、CSSインライン化により、<style>タグを静的および動的に、つまり、コメントでインライン式をラップすることにより、自然なCSSテンプレートとして機能させることもできます。 参照：
<style th:inline="css"> .main\ elems { text-align: left; } </style>