Thymeleafで文字列を結合する方法は？初心者向けガイド

1. Thymeleafで文字列を結合する基本的な方法

1. Thymeleafで文字列を結合する基本的な方法

Thymeleafで文字列を結合するには、文字列演算子を使います。具体的には、+演算子を使用します。以下の例を見てください。

<p th:text="'Hello, ' + ${userName} + '!'"></p>

このコードでは、文字列 "Hello, " と変数 ${userName}、そして文字列 "!" を結合しています。

2. 変数を使った文字列結合の応用

2. 変数を使った文字列結合の応用

Thymeleafでは、式を使って動的に文字列を作ることができます。例えば、以下のようにします。

<p th:text="${greeting} + ', ' + ${userName} + '!'"></p>

ここでは、${greeting}や${userName}などの変数を使って文字列を組み立てています。これにより、動的なメッセージを簡単に作成できます。

3. 順序を考慮した文字列結合

3. 順序を考慮した文字列結合

文字列を結合する際に注意したいのは、結合する順序です。例えば、以下の例では、結合の順序によって結果が変わることがあります。

<p th:text="'Result: ' + (${value1} + ${value2})"></p>

このように括弧を使うことで、計算の順序を明確にできます。

4. 条件を使った文字列結合

4. 条件を使った文字列結合

条件を使った文字列結合も可能です。たとえば、ユーザーの状態によって異なるメッセージを表示したい場合、以下のように記述します。

<p th:text="${isLoggedIn} ? 'Welcome back, ' + ${userName} : 'Hello, Guest!'"></p>

ここでは、${isLoggedIn}がtrueの場合とfalseの場合で異なる文字列を表示しています。

5. 繰り返し処理の中での文字列結合

5. 繰り返し処理の中での文字列結合

Thymeleafのth:eachを使ったループ内で文字列を結合することもできます。以下の例では、商品のリストを表示しながら文字列を結合しています。

<ul>
    <li th:each="item : ${items}" th:text="'Item: ' + ${item.name}"></li>
</ul>

このようにして、リストの各要素を結合して表示することができます。

6. JavaScriptとの連携による文字列結合

6. JavaScriptとの連携による文字列結合

ThymeleafはJavaScriptとの連携も得意です。以下の例では、JavaScript内でThymeleafの変数を使用して文字列を結合しています。

<script th:inline="javascript">
    var message = /*[[${greeting} + ', ' + ${userName}]]*/ '';
    console.log(message);
</script>

このように、JavaScript内でThymeleafの式を使用して文字列を結合することも可能です。

7. リテラル置換を使ったシンプルな文字列結合

7. リテラル置換を使ったシンプルな文字列結合

Thymeleafには、リテラル置換という便利な機能があり、これを使うと文字列結合を直感的に書くことができます。|（パイプ）で囲んだ中に変数を埋め込むだけで、複数の文字列をひとまとめのメッセージとして扱えます。

<p th:text="|Hello, ${userName}!|"></p>

この例では、'Hello, 'と${userName}、'!'を+演算子で結合する代わりに、|...|の中にそのまま書いています。見た目がスッキリするので、固定の文字列と変数を組み合わせたいときにおすすめの書き方です。

また、複数の変数を含めることもできます。

<p th:text="|${greeting}, ${userName}. Today is ${todayLabel}.|"></p>

このように、リテラル置換を使うと、文字列の結合や並び順を意識しながらも、テンプレートの可読性を保つことができます。+演算子による文字列結合と併せて使い分けると、Thymeleafでの文字列の扱いがより分かりやすくなります。

8. メッセージリソースと文字列結合を組み合わせる

8. メッセージリソースと文字列結合を組み合わせる

実際のWebアプリケーションでは、固定文言をテンプレートに直接書くのではなく、メッセージリソース（プロパティファイル）から読み込んで表示することがよくあります。Thymeleafでは、メッセージリソースの値にプレースホルダを用意しておくことで、文字列結合と同じように動的なメッセージを作ることができます。

<p th:text="#{welcome.message(${userName})}"></p>

たとえば、メッセージファイル側にwelcome.message=Hello, {0}!という定義があるとします。この場合、${userName}の値が{0}に差し込まれ、結果として「Hello, ユーザー名!」という文字列が表示されます。

この仕組みを使うと、多言語対応（日本語・英語など）を行う際にも、Thymeleafのテンプレート側ではth:textとメッセージキーを書くだけで、画面ごとに文字列結合のパターンを変えずに済みます。

<p th:text="#{greeting.message(${greeting}, ${userName})}"></p>

ここでは、${greeting}と${userName}をメッセージリソースのプレースホルダに渡すことで、複数の値を組み合わせたメッセージを表示しています。+演算子での文字列結合に慣れてきたら、メッセージリソースと組み合わせた書き方も意識すると、Thymeleafならではの柔軟な文字列処理ができるようになります。

まとめ

まとめ

今回の記事では、Thymeleafを使った文字列結合のさまざまな方法について解説しました。基本的な文字列演算子+の使い方から、変数や条件を利用した動的な文字列結合、繰り返し処理内での結合、さらにはJavaScriptとの連携まで幅広くカバーしました。これにより、Thymeleafを使用したテンプレートの作成がより柔軟で強力になるはずです。

また、結合の順序を明確にするための括弧の使用や、条件付きでの表示方法も実践的なスキルとして役立ちます。初心者の方でも、これらの方法を活用することで、より豊かなテンプレート設計が可能になります。以下に、今回の記事を基にしたサンプルコードをもう一度確認しておきましょう。

<p th:text="'Welcome, ' + ${userName} + '! You have ' + ${notificationCount} + ' new messages.'"></p>
<ul>
    <li th:each="product : ${products}" th:text="'Product: ' + ${product.name}"></li>
</ul>
<script th:inline="javascript">
    var userStatus = /*[[${isLoggedIn} ? 'Logged In' : 'Guest']]*/ '';
    console.log(userStatus);
</script>

これらのサンプルを活用することで、さまざまなケースに応じた文字列操作ができるようになります。

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

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

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

Thymeleafで文字列を結合する基本的な方法は何ですか？

Thymeleafでは文字列の結合に「+」演算子を使うのが基本です。たとえば、'Hello, ' + ${userName} のように文字列と変数を結合できます。