新人と先輩の会話形式で理解しよう

新人

「先輩、Thymeleafのif文とunlessの違いって何ですか？初心者には難しそうに感じるんですが…」

先輩

「確かに最初は少し混乱しやすいけど、実はとてもシンプルなんです。順番に説明していきますね。」

新人

「なるほど。具体的な書き方も教えてほしいです！」

先輩

「もちろんです。コード例も交えて丁寧に解説するので安心してください。」

1. Thymeleafのif文の基本（th:ifの役割と使い方）

Thymeleafでは、条件に応じてHTMLの要素を表示・非表示にするためにth:ifを使います。基本的な役割は「条件がtrueのときに要素を表示する」というものです。初心者の方でも理解しやすいように、具体的な例を見てみましょう。

例えば、コントローラでModelにmessageという変数を渡した場合、HTMLでは次のように条件を判定して表示します。


<p th:if="${message != null}" th:text="${message}">メッセージが表示されます。</p>

この例では、messageがnullではないときだけ

タグの中身が表示されます。逆にmessageがnullの場合は、この

タグ自体がHTMLに含まれません。これは、条件式がtrueのときだけ要素が出力されるThymeleafの基本的な仕組みです。

コントローラは必ず@Controllerを使って作成し、PleiadesのGradle環境で開発するのが前提です。


@Controller
public class SampleController {

    @GetMapping("/sample")
    public String showSample(Model model) {
        String message = "こんにちは、Thymeleaf!";
        model.addAttribute("message", message);
        return "sample";
    }
}

このサンプルでは、コントローラからmessageを渡して、HTML側でif文を使って表示する流れです。初心者の方でも、まずはこの基本構造をしっかり覚えておくと安心です。

2. unless文とは？基本的な意味と使い方

次にunless文について見ていきましょう。Thymeleafのth:unlessは、th:ifとは逆の条件で要素を表示するときに使います。つまり「条件がfalseのときだけ表示する」という役割です。

初心者向けにシンプルな例を紹介します。先ほどと同じmessage変数を使い、nullのときだけメッセージを表示したい場合は次のように書きます。


<p th:unless="${message != null}">メッセージは設定されていません。</p>

この例では、messageがnullのときに「メッセージは設定されていません。」という文が表示されます。逆にmessageがnullでない場合、この

タグはHTMLに含まれません。

コントローラ側は同じ構造でOKです。HTMLの条件分岐だけをth:ifとth:unlessで切り替えて使う形になります。

初心者の方は、「th:ifは条件がtrueのときに表示」「th:unlessは条件がfalseのときに表示」というポイントを押さえておくと、使い分けがぐっと楽になります。

3. if文とunless文の具体的な違い（どんなときに使い分ける？）

if文とunless文は、一見似ていますが「条件の正負」で使い分けるとわかりやすくなります。初心者向けに言えば:

th:ifは「条件がtrueなら表示」
th:unlessは「条件がfalseなら表示」

たとえば、ユーザーがログインしているかどうかで表示内容を変えたい場合、if文とunless文で書き分けると次のようになります。


<p th:if="${isLoggedIn}">ログインユーザーへようこそ！</p>
<p th:unless="${isLoggedIn}">ログインしてください</p>

このように、ログイン状態に応じて表示内容を簡潔に切り替えられます。

4. よくある使い分け例とサンプルコード

以下は、初心者でもわかりやすい実践例です。開発環境はPleiades＋Gradleで、@Controllerを使ったサンプルコントローラをまず確認します。


@Controller
public class LoginController {

    @GetMapping("/login")
    public String showLogin(Model model) {
        boolean isLoggedIn = false;
        model.addAttribute("isLoggedIn", isLoggedIn);
        return "login";
    }
}

そして、HTMLではif文とunless文を使って表示を切り替えます。


<p th:if="${isLoggedIn}">ようこそ、ログイン済みユーザーさん！</p>
<p th:unless="${isLoggedIn}">まだログインしていません。ログインしてください。</p>

この例では、isLoggedInがtrue か false かを判断して適切なメッセージを表示します。初心者でもイメージしやすい基本パターンです。

5. よくあるミスと注意点

初心者がth:ifとth:unlessを使うときに陥りやすいミスと、その対策を紹介します。

5‑1. 条件式の誤解

th:unless="${isLoggedIn}"と書くと「isLoggedInがfalseのとき」に表示されるので、「ログインしていないとき」という意味になります。逆のときに何か表示したいときに混乱しないよう、意味を意識して使いましょう。

5‑2. 重複表示

ifとunlessの条件が重なっていると、両方とも表示されることがあります。たとえば両方に同じ条件を書いてしまうと予期せぬ表示になるので注意。

5‑3. 条件の複雑化

条件が複雑になると、どちらで判断すればよいかわかりにくくなることがあります。そんなときは、コントローラ側でbooleanフラグを用意してisLoggedInなどの意味を明確にしておくと、テンプレートが読みやすくなります。

6. コントローラ側の工夫ポイント（ifとunlessの切り替えを楽にする方法）

ifとunlessの切り替えをシンプルにするには、HTMLではなくコントローラで判定用のboolean変数を用意する方法が効果的です。初心者でも扱いやすく、テンプレートが読みやすくなる工夫を紹介します。

6‑1. 意味のあるboolean変数を作る

HTMLテンプレートでの条件分岐を減らすために、コントローラで「isLoggedIn」や「showBanner」など、意味が明確なboolean変数をModelに渡しましょう。たとえば、以下のようなサンプルです。


@Controller
public class BannerController {

    @GetMapping("/home")
    public String showHome(Model model) {
        boolean isFirstVisit = true; // 初回訪問かどうかを判定
        boolean showBanner = !isFirstVisit;
        model.addAttribute("showBanner", showBanner);
        return "home";
    }
}

HTMLでは次のようにシンプルになります。


<p th:if="${showBanner}">バナーを表示中です。</p>
<p th:unless="${showBanner}">ようこそ初めての訪問ですね！</p>

6‑2. 複雑なロジックはJavaでまとめる

複雑な条件判定（ログイン＋権限チェックなど）はJava側でまとめ、Modelには結果だけを渡すようにすると、HTMLにはifやunlessの単純な条件だけが残ります。可読性の高いテンプレートになります。

7. 初心者が練習するときのポイントとコツ

初心者がThymeleafのif文とunless文を使いこなすための練習方法とコツを紹介します。手を動かしながら学ぶことで理解が定着します。

7‑1. シンプルなプロジェクトから始める

Pleiades＋Gradle環境で新規プロジェクトを作成し、@Controllerでboolean変数を渡すだけの簡単な画面を作ってみましょう。まずはifまたはunlessだけで表示を切り替えるだけのシンプルなテンプレートから始めるのがおすすめです。

7‑2. 条件を変えて挙動を確認

コントローラのboolean値をいろいろ変えて、「true」「false」の両方のケースで表示がうまく切り替わるか確認してみましょう。実際にブラウザで確認すると理解が深まります。

7‑3. コントローラとHTMLの対応を意識

Modelに設定した変数名とHTML内のth:ifやth:unlessで使っている変数名が一致しているかを意識しましょう。スペルミスや大文字小文字の間違いがエラーの原因になるので丁寧に確認しましょう。

7‑4. デバッグ出力で確認しよう

まだSpring Bootに慣れていない場合は、コントローラにSystem.out.println()を入れてboolean変数がどうなっているかをログで確認しながら進めると安心です。

8. 記事のまとめ

この記事では、Thymeleafのth:ifとth:unlessの違いや使い分け、初心者向けの練習方法やコントローラでの工夫を具体例を交えて解説しました。ポイントを以下に整理します。

th:ifは条件がtrueのときに表示、th:unlessは条件がfalseのときに表示する
HTMLで複雑な条件を書くより、コントローラでboolean変数を用意するとテンプレートがすっきりする
練習はPleiades＋Gradle環境で小さな画面から始め、手を動かしながら条件の切り替えを確認することが理解を深める
モデル変数の管理やログ出力を併用することで、エラーに強くなる

Thymeleafの条件分岐をマスターすれば、さらに繰り返し処理や変数操作などにも取り組みやすくなります。今回の記事をきっかけに、次のステップへ進んでみてください！

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

Thymeleafのif文とunlessの違いを初心者向けに解説！使い分けの基本をマスターしよう