【Spring Boot】Thymeleafで「titleタグ」を条件分岐させる方法（三項演算子）

<!DOCTYPE html>
<html>
<head>
    <title data-th-text="#{tomuziso.title}"></title>
    <title data-th-text="#{tomuziso.another.title}"></title>

 // 条件によって2つのタイトル表示を出し分けさせたい

Thymeleafでは、

「th-text」と「メッセージ式#{}」

を使うと、予めpropertiesファイルに記述しておいたメッセージが表示出来ます。

上記テンプレートが使い回されている状態で

「条件によってtitleを変更させよう」というのが今回の話。

これが簡単にいくかと思ったらちょっとハマったのでメモ。

環境情報
head内のtitleで条件分岐
1. NG: th-ifを使う
2. NG: divで囲う
th-replaceの場合
1. NG: th-replace 動かない例
2. OK: th-replace 動く例
OK: titleを条件分岐させる三項演算子

環境情報

Thymeleaf: 3.0.2

head内のtitleで条件分岐

NG: th-ifを使う

変数valを使用してth-ifで、

「valがtrueだったらtomuziso.title」「 falseだったらtomuziso.another.title」

と、分岐させようとしたが、ダメ。うまく動いてくれません。

<!DOCTYPE html>
<html>
<head>
    <title data-th-if="${val}" data-th-text="#{tomuziso.title}"></title>
    <title data-th-unless="${val}" data-th-text="#{tomuziso.another.title}"></title>

// 略

NG: divで囲う

じゃあdivで囲ってみたらどうなるか・・・？

結果は残念ながら動きません。ちなみにこの方法、th-replaceを使うときはよく使います。

<!DOCTYPE html>
<html>
<head>
    <div data-th-if="${val}" data-th-remove="tag">
        <title data-th-text="#{tomuziso.title}"></title>
    </div>
    <div data-th-unless="${val}" data-th-remove="tag">
        <title data-th-text="#{tomuziso.another.title}"></title>
    </div>

th-replaceの場合

NG: th-replace 動かない例

本題から外れてth-replaceの話。

読み込むfragmentを条件分岐させたい場合、同じdiv内にifとth-replaceは共存出来ない。

<!DOCTYPE html>
<html>
<head>
<body>
    <div data-th-if="${val}" data-th-replace="fragments/hogehoge"></div>
    <div data-th-unless="${val}" data-th-replace="fragments/another"></div>

// 略

OK: th-replace 動く例

if用のdivを用意してあげるとうまく動きます。

th-remove="tag“で条件分岐用のdivを消すことも忘れずに。

<!DOCTYPE html>
<html>
<head>
<body>
    <div data-th-if="${val}" data-th-remove="tag">
        <div data-th-replace="fragments/hogehoge"></div>
    </div>
    <div data-th-unless="${val}" data-th-remove="tag">
        <div data-th-replace="fragments/another"></div>
    </div>

// 略

OK: titleを条件分岐させる三項演算子

本題に戻ります。「title」を変数valを用いて出し分けをしたい場合。


<!DOCTYPE html>
<html>
<head>
    <title data-th-text="#{tomuziso.title}"></title>
    <title data-th-text="#{tomuziso.another.title}"></title>

以下のようにすると、正しく条件分岐できました。

<!DOCTYPE html>
<html>
<head>
    <title data-th-text="${val} ? #{tomuziso.title} : #{tomuziso.another.title}"></title>

なんと、th-ifを別で使わずに、th-textの中で三項演算子を使って条件分岐が出来たのです。

これで、

「valがtrueだったらtomuziso.title」「 falseだったらtomuziso.another.title」

という条件分岐という目的を無事達成出来ました。

おわり！