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

生徒

「先生、ログインしている時だけメニューを表示したり、点数によって合格・不合格の文字を切り替えたりしたいのですが、ビューの中でそんなことはできますか？」

先生

「はい、もちろんです！Play FrameworkのビューエンジンであるTwirl（トワール）を使えば、HTMLの中に簡単にif文を組み込むことができますよ。」

生徒

「HTMLの中にJavaのような条件分岐を書くということですか？書き方が難しそうですね…。」

先生

「基本的にはJavaの書き方に似ていますが、Twirl独自のルールとして先頭に『@』を付けるのがポイントです。初心者の方でもすぐに覚えられるので、具体的な使い方を見ていきましょう！」

1. Twirlテンプレートの条件分岐とは？

Play FrameworkでWebアプリケーションを開発する際、表示する内容を状況に応じて変えたい場面が多々あります。これを実現するのが条件分岐（if文）です。 Twirlテンプレートでは、JavaのロジックをHTMLの中に直接埋め込むことができるため、コントローラから受け取った変数の値に応じて、表示するHTML要素を動的に切り替えることが可能です。

たとえば、「ユーザーがログイン中ならマイページへのリンクを出し、未ログインならログインボタンを出す」といった処理が、テンプレートファイルの中で完結します。これにより、Java側で複雑なHTML文字列を生成する必要がなくなり、デザインとロジックを綺麗に分離して保守性の高いプログラムを書くことができます。

2. 基本的なif文の書き方

Twirlでのif文は、必ず「@」から書き始めます。Javaのように括弧の中に条件式を書き、波括弧 { } の中に条件が一致したときに表示したいHTMLを記述します。


@if(score >= 80) {
    <div class="alert alert-success">
        素晴らしい成績です！合格おめでとうございます。
    </div>
}

このように記述すると、Java側から渡された変数 score が80以上の場合のみ、画面にメッセージが表示されます。条件に当てはまらない場合は、波括弧の中のHTMLは無視され、ブラウザには何も出力されません。

3. elseを使った「そうでなければ」の処理

「もし～ならAを表示し、そうでなければBを表示する」という場合には、else を組み合わせます。これは、未入力チェックやステータスの切り替えで非常によく使われるパターンです。


@if(isLoggedIn) {
    <p>ようこそ、ユーザーさん！ <a href="/logout">ログアウトはこちら</a></p>
} else {
    <p>ゲストさん、こんにちは！ <a href="/login">ログインして利用する</a></p>
}

この例では、真偽値（boolean）の変数 isLoggedIn の状態によって、挨拶とリンクの内容を完全に切り替えています。 TwirlはHTMLの構造を壊さずにロジックを挟めるため、デザイナーさんにとっても読みやすいコードになります。

4. 複数の条件を判定するelse if

3つ以上の状態を判定したい場合は、else if を使って条件を繋げることができます。信号機の色や、商品の在庫状況（あり・残りわずか・なし）などを表示する際に便利です。


@if(stock == 0) {
    <span class="badge bg-danger">売り切れ</span>
} else if(stock < 5) {
    <span class="badge bg-warning text-dark">残りわずか（あと @stock 個）</span>
} else {
    <span class="badge bg-primary">在庫あり</span>
}

Javaと同じように、上の条件から順番に判定が行われ、最初に一致した場所の処理だけが実行されます。条件式の中で @stock と書くことで、現在の在庫数という変数の値をHTMLの中に表示することも可能です。

5. コントローラから値を渡すJavaの実装

ビューで条件分岐を使うためには、Javaのコントローラ側から判定の材料となるデータを渡してあげる必要があります。 Play Frameworkの標準的なコントローラの書き方を確認しましょう。


package controllers;

import play.mvc.*;
import views.html.*;

public class ExamController extends Controller {
    public Result showResult() {
        int userScore = 75; // この値をビューに渡す
        boolean loggedIn = true;
        
        // renderメソッドの引数に値を指定する
        return ok(views.html.result.render(userScore, loggedIn));
    }
}

このJavaコードでは、点数（int）とログイン状態（boolean）の2つの変数をビューに送っています。これを受け取るビュー（result.scala.html）の先頭行には、必ず引数の定義が必要です。

6. 引数を受け取るビューの全体構造

実際に引数を受け取って、if文で条件分岐を行うビューファイルの全体像を見てみましょう。 app/views/result.scala.html という名前で作成するイメージです。


@(score: Integer, isLoggedIn: Boolean)

<!DOCTYPE html>
<html>
    <head>
        <title>判定結果</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    </head>
    <body class="container mt-5">
        <h1>システムメッセージ</h1>
        
        @if(isLoggedIn) {
            <div class="card p-3 shadow">
                <h3>テストの結果発表</h3>
                @if(score >= 60) {
                    <p class="text-success fw-bold">合格です！</p>
                } else {
                    <p class="text-danger fw-bold">不合格です。次回頑張りましょう。</p>
                }
            </div>
        } else {
            <div class="alert alert-warning">
                結果を見るにはログインが必要です。
            </div>
        }
    </body>
</html>

上記の例では、if文の中にさらにif文をいれる「ネスト（入れ子）」という構造になっています。まずログインしているかをチェックし、ログインしている場合のみ点数の判定を行う、という二段構えのロジックになっています。

7. 条件式で使える便利な演算子

if文の括弧の中で使える比較演算子は、Javaとほぼ同じです。初心者の方は以下の代表的なものを覚えておきましょう。

== ：左右が等しいとき
!= ：左右が等しくないとき
> / < ：大きい / 小さい
>= / <= ：以上 / 以下
&& ：「かつ（AもBも成立）」
|| ：「または（AかBのどちらかが成立）」

例えば、@if(age >= 20 && hasLicense) と書けば、「20歳以上、かつ免許を持っている場合」という複雑な条件も判定できます。

8. 文字列の比較には注意が必要

Javaに慣れている方はご存知かもしれませんが、文字列が特定の文字と同じかどうかを判定する場合、Twirl（Scala）では == を使うことができます。 Javaの equals メソッドを使わなくても直感的に書けるのがTwirlの嬉しいポイントです。


@if(userRole == "admin") {
    <button class="btn btn-danger">管理者専用削除ボタン</button>
}

このように、文字列 "admin" と一致するかどうかを簡単にチェックできます。もし変数 userRole が null（中身が空っぽ）である可能性がある場合は、事前にチェックするか、Java側で適切な初期値を入れておくようにしましょう。

9. 否定演算子「!」で条件を反転させる

「～でない場合」という条件を作りたいときは、条件の前に !（びっくりマーク）を付けます。これを「否定演算子」と呼びます。


@if(!items.isEmpty()) {
    <p>商品が @items.size() 件あります。</p>
}

isEmpty() はリストが空のときに true を返しますが、その前に ! を付けることで「空ではないとき（＝何か入っているとき）」という意味になります。自然な日本語に近い形でロジックを組めるようになるため、非常に重宝します。

10. ビューでの条件分岐を綺麗に保つコツ

便利なif文ですが、あまりにもビューの中に複雑すぎるロジックを詰め込むのは避けるべきです。テンプレートファイルはあくまで「どう表示するか」を決める場所であり、「どう計算するか」はJavaのコントローラやモデルで担当するのがWeb開発の鉄則です。

もし if の条件式が長くなりすぎて読みづらくなった場合は、Java側で計算結果を boolean 型の変数にまとめてからビューに渡すようにしましょう。そうすることで、デザイナーさんとプログラマーが協力しやすい、クリーンなソースコードを保つことができます。

Play Frameworkのビューで条件分岐！Twirlテンプレートのif文をマスター