先生と生徒の会話形式で理解しよう

生徒

「ThymeleafでJavaScriptやCSSにサーバーサイドの値を埋め込む方法ってありますか？」

先生

「はい、Thymeleafのth:inline属性を使うと、JavaScriptやCSS内にサーバーサイドの変数を埋め込むことができます。」

生徒

「具体的にはどのように使うんですか？」

先生

「それでは、基本的な使い方を見ていきましょう！」

1. th:inlineとは？

Thymeleafのth:inline属性は、HTMLテンプレート内でJavaScriptやCSSにサーバーサイドの変数を埋め込むために使用されます。これにより、動的なスクリプトやスタイルを簡単に生成することができます。th:inlineには以下のモードがあります：

text：テキストインラインモード。[[...]]や[(${...})]を使用して、HTML内に変数を埋め込むことができます。
javascript：JavaScriptインラインモード。/*[[...]]*/や/*[(${...})]*/を使用して、JavaScript内に変数を埋め込むことができます。
css：CSSインラインモード。/*[[...]]*/や/*[(${...})]*/を使用して、CSS内に変数を埋め込むことができます。

これらのモードを使用することで、テンプレート内で動的なコンテンツを簡単に生成できます。

2. textモードの使い方

textモードでは、HTML内に直接変数を埋め込むことができます。以下はその例です：


<p th:inline="text">こんにちは、[[${user.name}]]さん！</p>

この例では、user.nameの値が「太郎」の場合、以下のように出力されます：


<p>こんにちは、太郎さん！</p>

また、HTMLエスケープを無効にしたい場合は、[(${...})]を使用します：


<p th:inline="text">メッセージ： [(${message})]</p>

これにより、messageの内容がHTMLとして解釈されます。

3. javascriptモードの使い方

javascriptモードでは、JavaScript内にサーバーサイドの変数を埋め込むことができます。以下はその例です：


<script th:inline="javascript">
    var username = /*[[${user.name}]]*/ "デフォルトユーザー";
</script>

この例では、user.nameの値が「太郎」の場合、以下のように出力されます：


<script>
    var username = "太郎";
</script>

このように、JavaScript内でサーバーサイドの変数を簡単に使用できます。

4. cssモードの使い方

cssモードでは、CSS内にサーバーサイドの変数を埋め込むことができます。以下はその例です：


<style th:inline="css">
    .highlight {
        background-color: /*[[${highlightColor}]]*/ yellow;
    }
</style>

この例では、highlightColorの値が「lightblue」の場合、以下のように出力されます：


<style>
    .highlight {
        background-color: lightblue;
    }
</style>

このように、CSS内でサーバーサイドの変数を使用することで、動的なスタイルを実現できます。

5. 注意点とベストプラクティス

th:inlineを使用する際の注意点とベストプラクティスを以下に示します：

エスケープの適切な使用：HTMLエスケープが必要な場合は[[...]]、不要な場合は[(${...})]を使用します。
デフォルト値の設定：インライン式にはデフォルト値を設定することで、テンプレートの静的表示時にも意味のある内容を表示できます。
テンプレートの可読性：複雑なロジックはテンプレート内に書かず、コントローラーで処理してからテンプレートに渡すようにしましょう。

これらのポイントを押さえることで、th:inlineを効果的に活用できます。

6. 実践例：ユーザー情報の表示

以下は、ユーザー情報を表示する実践的な例です：


<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>ユーザー情報</title>
    <script th:inline="javascript">
        var user = /*[[${user}]]*/ {};
    </script>
    <style th:inline="css">
        .username {
            color: /*[[${usernameColor}]]*/ black;
        }
    </style>
</head>
<body>
    <p class="username" th:inline="text">こんにちは、[[${user.name}]]さん！</p>
</body>
</html>

この例では、JavaScriptとCSSの両方でth:inlineを使用し、ユーザー情報を動的に表示しています。

まとめ

この記事では、Thymeleafのth:inline属性を中心に、textモード・javascriptモード・cssモードを使って、サーバーサイドの値をテンプレート内へ動的に埋め込む方法を詳しく学びました。とくに、Thymeleaf特有の [[${...}]] や [(${...})] の構文が、HTML・JavaScript・CSS それぞれの文脈でどのように動くのかを理解することが、実際の開発において非常に重要になります。また、テンプレートの可読性を保つためにロジックをコントローラー側で整理することや、インライン式にデフォルト値を設定する工夫など、実務でも役立つポイントが数多くありました。さらに、JavaScript内へオブジェクトをそのまま埋め込んだり、CSSの色指定を動的に変更したりする具体例を見ることで、 Webアプリケーションの表現力を大きく広げられることが分かりました。特に、ユーザーごとの設定値や画面カスタマイズをサーバーサイドと連携させながら反映させたい場面では、th:inlineの柔軟さが大きな力を発揮します。ここでは、もう一度振り返りとして、Thymeleafのテンプレート内でよく使われる class やタグを使ったサンプルをまとめます。実際の開発でも参考にしやすいように、JavaScript・CSS・textの三つのインライン活用をひとつのセクションでシンプルに示しています。

動作イメージを深めるサンプルコード


<div class="card p-3" th:inline="text">
    <p class="username">ようこそ、[[${user.name}]]さん。</p>
</div>

<script th:inline="javascript">
    var userAge = /*[[${user.age}]]*/ 0;
    var themeColor = /*[[${themeColor}]]*/ "lightgray";
</script>

<style th:inline="css">
    .username {
        color: /*[[${usernameColor}]]*/ black;
    }
    .theme-bg {
        background-color: /*[[${themeColor}]]*/ lightgray;
    }
</style>

このサンプルのように、ThymeleafではひとつのHTMLテンプレートの中で、表示テキスト・スクリプト・スタイルをすべてサーバーサイドと連動させることが可能です。例えばユーザー名だけでなく、年齢やテーマカラーなどユーザー固有の情報を表示やデザインに組み込むことで、より親しみのある画面を構築できます。また、アプリケーションの規模が大きくなるほど、テンプレートの管理・変数の受け渡し・モードごとのエスケープ方法などを正しく扱うことが重要です。[[...]] と [(${...})] の挙動の違いを理解しておくことで、セキュリティ面でも安全なテンプレート構築ができるようになります。

先生と生徒の振り返り会話

生徒
「今日の内容で、JavaScriptやCSSの中にサーバーサイドの値を埋め込む仕組みがよく分かりました。 th:inlineって、こんなに便利なんですね。」

先生
「そうですね。特に、値を動的に変えたいときや、ユーザーごとに違う画面を作りたい場合には非常に役立ちます。 text・javascript・css の三つのモードをしっかり使い分けることが大切ですよ。」

生徒
「たしかに、JavaScriptの中で /*[[…]]*/ を使うところなどは最初は不思議でしたが、実際にどう展開されるのかを見ると理解が深まりました。CSSの色変更も簡単にできるのは便利です。」

先生
「テンプレートは見た目だけでなく、サーバーの値を使いながら柔軟に構成できるところが魅力です。今回の内容が理解できていれば、実務でも十分活かせますよ。自分の作るアプリにどう取り入れられるか考えてみてください。」

生徒
「はい！実際の画面でも使ってみます。ありがとうございました！」