Thymeleafのth:inlineを完全ガイド！初心者でもわかるインライン式の使い方

Thymeleafのth:inlineの使い方

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

生徒

「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の色変更も簡単にできるのは便利です。」

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

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

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Thymeleafのth:inlineとは何ですか？どんな場面で使うのでしょうか？

Thymeleafのth:inlineとは、HTMLテンプレート内でサーバーサイドの変数をJavaScriptやCSS、テキスト内に埋め込むための属性です。動的にスタイルやスクリプトを生成したいときに使います。

Springの学習を効率化したい方へ

この記事の内容をもっと深く知るには、以下の入門書が最適です。

Spring Framework超入門をAmazonで見る

元・職業訓練講師が直接指導【Thymeleaf実践セミナー】

職業訓練講師が直伝！Thymeleaf実践。Spring Bootと連携する「保守性・UX最大化」の画面構築術。

累計120万PV超の技術メディア運営チームが贈る、商用開発基準の特別カリキュラム

職業訓練講師が直伝！Thymeleaf実践。Spring Bootと連携する「保守性・UX最大化」の画面構築術。

Spring Boot標準のテンプレートエンジンとして、Java開発の現場で不可欠なThymeleaf。本講座では、HTMLの構造を維持する「ナチュラルテンプレート」の利点を活かし、Controllerとのセキュアなデータ連携や、コンポーネント化による圧倒的な保守性を60分で濃縮習得します。