Thymeleaf if文での否定条件の書き方を完全解説!初心者でも理解できる使い方
新人
「Thymeleafで条件分岐の書き方ってどうなっているんですか?」
先輩
「Thymeleafでは、th:if属性を使って条件分岐ができます。表示したい要素にth:ifを指定すると、条件に応じてその要素が表示されたり非表示になります。」
新人
「なるほど。具体的にはどんな書き方になるんですか?」
先輩
「それでは、まず基本的な書き方から解説していくね!」
1. Thymeleafのif文とは?
Thymeleafは、Spring Bootアプリケーションのビューとして利用されるテンプレートエンジンです。HTMLの中に埋め込む形で、条件分岐やループなどの処理を記述できます。その中でも条件分岐は、表示する要素を条件に応じて出し分けたいときに役立ちます。
Thymeleafの条件分岐は、th:if属性を使うことで簡単に実現できます。例えば、ある値がtrueのときに特定のHTML要素を表示したい場合に使います。これは、PleiadesのEclipse環境でSpring Bootの開発をしているときにもとても便利です。
Javaのサーバーサイドの値を使って条件分岐を行うため、サーバーで処理された結果に応じてビューを切り替えることができます。
2. Thymeleafで条件分岐をする基本構文
それでは、基本的な条件分岐の書き方を見ていきましょう。th:if属性をHTMLタグに記述することで、その条件がtrueの場合に要素が表示されます。例えば、次のようなHTMLを書きます。
<div th:if="${isVisible}">この部分は条件がtrueのときだけ表示されます。</div>
ここで、${isVisible}は、Spring Bootの@Controllerでモデルに渡された変数です。条件がtrueなら、この<div>がブラウザに表示されます。逆にfalseなら、表示されません。
実際に、PleiadesのEclipse環境でGradleを使ったプロジェクトに、このようなHTMLファイルを作成し、コントローラから変数を渡すことで、動作を確認できます。
コントローラの例を見てみましょう。下記のように@Controllerクラスを作成し、Modelに値を設定して渡します。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SampleController {
@GetMapping("/example")
public String showExample(Model model) {
boolean isVisible = true; // 条件に応じてtrue/falseを切り替える
model.addAttribute("isVisible", isVisible);
return "example";
}
}
この例では、example.htmlを表示するときに、isVisibleという変数をtrueに設定しています。ビューの中のth:ifに${isVisible}を指定することで、条件が成立したときだけ要素が表示されます。
このようにThymeleafのth:ifは、HTMLタグに属性として書けるので、初心者の方でもとても直感的に条件分岐の処理を記述できます。
次の記事では、いよいよThymeleafの条件分岐で「否定条件」を使う方法を詳しく解説していきます。否定条件を理解することで、条件が成り立たない場合の処理や、要素を隠したい場合に活用できます。
3. 否定条件を使うときの基本的な考え方
ここからは、Thymeleafで否定条件を使うときの考え方を見ていきましょう。否定条件とは、条件が成り立たない場合に処理を行うための考え方です。つまり、trueやfalseの値を反転させて、条件に合わないときに表示させる仕組みです。
Javaのプログラムで条件を扱うときも、!(エクスクラメーションマーク)を使って、trueやfalseを反転させます。例えば、if (!isVisible)という条件は、isVisibleがfalseのときに成り立ちます。Thymeleafでも同じように、!記号を使って条件を反転できます。
否定条件は、特に「条件に合わないときだけ表示する要素」を作りたい場合に役立ちます。例えば、ユーザーがログインしていないときに表示するメッセージなど、状況によって要素を切り替えたいときに使います。
4. Thymeleafで否定条件を表現する方法
Thymeleafで否定条件を表現する方法は、!演算子やnotキーワードを使う方法があります。それぞれの書き方を具体的に見ていきましょう。
まず、!演算子を使う方法です。これは、Javaと同じように条件を反転させる記号です。次のようにHTMLで書きます。
<div th:if="!${isVisible}">この部分はisVisibleがfalseのときだけ表示されます。</div>
この例では、isVisibleがfalseのときだけ<div>要素が表示されます。!${isVisible}という書き方は、${isVisible}がfalseならtrueになるので、結果的に条件が成り立つ仕組みです。
もう一つの書き方は、notキーワードを使う方法です。これは、Thymeleaf独自のキーワードで、否定条件を表現するときに使えます。
<div th:if="not ${isVisible}">この部分もisVisibleがfalseのときだけ表示されます。</div>
notキーワードを使うことで、見やすく直感的に条件を反転させることができます。特に、初心者の方にはnotキーワードの方が分かりやすい場合もあります。
どちらの書き方を使っても、結果は同じです。プロジェクトの方針やチームのコーディングスタイルに合わせて選びましょう。Pleiadesで作成したSpring Bootアプリケーションでも、同様にこの条件分岐を活用することができます。
5. よくある書き方の例(th:ifやth:unlessでの使用例)
Thymeleafで否定条件を扱う方法として、th:if属性を使った!演算子やnotキーワードのほかに、th:unless属性を使う方法もあります。th:unlessは、「条件が成り立たない場合に要素を表示する」という意味を持っています。
例えば、次のように書きます。
<div th:unless="${isVisible}">isVisibleがfalseのときだけ表示されます。</div>
th:unlessを使うと、th:if="!${isVisible}"やth:if="not ${isVisible}"と同じ意味になります。つまり、条件がfalseのときに表示したい要素がある場合に便利です。
このように、否定条件の書き方には3つの方法があります。
th:if="!${変数}":エクスクラメーションマークを使う方法th:if="not ${変数}":notキーワードを使う方法th:unless="${変数}":th:unless属性を使う方法
どの書き方でも、同じ結果を得られますが、コードの可読性やチームの方針に合わせて選ぶと良いでしょう。特に、th:unlessは否定条件専用の属性なので、意図がはっきり伝わりやすいです。
ここで、コントローラとHTMLを組み合わせた具体例を紹介します。まずはコントローラの例です。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SampleController {
@GetMapping("/negation")
public String showNegation(Model model) {
boolean isVisible = false; // falseに設定
model.addAttribute("isVisible", isVisible);
return "negation";
}
}
この例では、isVisibleがfalseなので、否定条件の部分が表示されます。HTML側は次のように書きます。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>否定条件の例</title>
</head>
<body>
<div th:unless="${isVisible}">このメッセージはisVisibleがfalseのときに表示されます。</div>
</body>
</html>
このように、PleiadesでGradleを使ったSpring Bootアプリケーションでも、否定条件を簡単に表現できます。条件に応じてHTMLを切り替えられるのは、ユーザーに分かりやすい表示を提供するうえでも重要です。
6. 注意点(よくある間違いや否定条件で混乱しやすい例)
Thymeleafで否定条件を使うときに、初心者の方がよく混乱するのは、条件の反転の仕組みを正しく理解していない場合です。特に、!演算子を使うときに、!${変数}のように!の位置を間違えてしまうケースがあります。
例えば、th:if="${!isVisible}"のように書いてしまうと、これは正しい式ではありません。必ず!${isVisible}またはnot ${isVisible}のように、${}の中身を条件として扱うように書く必要があります。
また、th:unless属性は、条件がfalseのときに表示される仕組みです。つまり、th:if="!${isVisible}"とth:unless="${isVisible}"は同じ意味ですが、初心者の方がth:unless="!${isVisible}"のように書いてしまう間違いも多いです。否定条件に否定を重ねると、結果として意図しない表示になってしまうので注意が必要です。
コードを書いたら、必ずブラウザで確認し、意図した表示になっているかをテストしましょう。Spring Bootアプリケーションでは、PleiadesのEclipse環境で実行すれば、すぐにブラウザで結果を確認できます。
7. サンプルコード例を使ったまとめ(実際のHTML例やコントローラ例)
ここまでの内容を踏まえて、否定条件を使ったThymeleafのサンプルコードをまとめてみましょう。まずは、コントローラの例です。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class NegationExampleController {
@GetMapping("/sample")
public String samplePage(Model model) {
boolean isUserLoggedIn = false; // ログインしていない場合
model.addAttribute("isUserLoggedIn", isUserLoggedIn);
return "sample";
}
}
このコントローラでは、isUserLoggedInがfalseなので、否定条件の部分がビューに表示されます。次に、ビュー側のHTML例です。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 否定条件サンプル</title>
</head>
<body>
<div th:if="!${isUserLoggedIn}">ユーザーがログインしていないときに表示されるメッセージです。</div>
<div th:if="${isUserLoggedIn}">ユーザーがログインしているときに表示されるメッセージです。</div>
</body>
</html>
このサンプルを実行すると、isUserLoggedInがfalseのため、「ユーザーがログインしていないときに表示されるメッセージです。」がブラウザに表示されます。逆にisUserLoggedInがtrueなら、もう一方のメッセージが表示されます。
このように、条件に応じて要素を出し分けることができるのがThymeleafの大きな魅力です。特に否定条件をうまく使うと、条件が成り立たないときのケースをシンプルに表現できます。
8. まとめとしての一言アドバイス
Thymeleafの否定条件は、!演算子やnotキーワード、th:unless属性を使って表現できます。条件に応じて要素を出し分ける機能は、ユーザーに分かりやすい画面を作るうえでとても重要です。特に初心者の方は、否定条件を正しく書けるようになることで、より柔軟な画面設計ができるようになります。
PleiadesのEclipse環境とGradleを使ったSpring Bootプロジェクトでも、今回紹介した内容をすぐに試せます。自分のアプリケーションで活用しながら、ぜひ慣れていってくださいね。