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

生徒

「Play Frameworkで画面を作るときに使う『Twirl』って何ですか？HTMLとは違うんですか？」

先生

「Twirlは、HTMLの中にJavaなどのプログラムを書き込むためのテンプレートエンジンです。基本はHTMLですが、プログラムの力を使って表示を動的に変えることができます。」

生徒

「なるほど！HTMLだけだと決まった文字しか出せませんが、Twirlを使えばログインユーザーの名前を出したりできるんですね。書き方は難しいですか？」

先生

「基本ルールは『@』マークを付けるだけなので、とてもシンプルですよ。まずは基本的な構文から順番にマスターしていきましょう！」

1. Twirlテンプレートの正体とは？

Play Frameworkのビュー（見た目）を支える技術、それがTwirl（トワール）テンプレートです。ファイル名の末尾が .scala.html となっているものがそれにあたります。ウェブサイトの設計図であるHTMLの中に、プログラムの実行結果を埋め込むための魔法のシートのようなものです。

プログラミング未経験の方にとって「テンプレートエンジン」という言葉は難しく聞こえるかもしれませんが、年賀状の宛名印刷をイメージすると分かりやすいでしょう。住所や名前を入れる場所だけ空けておき、印刷する瞬間に本物のデータに差し替える仕組み、それがTwirlの役割です。Google検索で「Java ウェブアプリ画面」と調べると、このTwirlを活用した開発手法が数多くヒットします。非常に強力かつ高速なエンジンとして知られています。

2. 最も重要なルールは「@」マーク

Twirlの構文において、最も基本的で最も重要なルールは、プログラムを書き始める前に「@（アットマーク）」を付けるという点です。HTMLの文章の中に @ が現れると、Twirlは「ここからはプログラムの命令だな！」と判断して処理を開始します。

例えば、プログラム側で用意した変数の中身を表示したいときは、@変数名 と書くだけで画面に出力されます。パソコンに触れたことがない方でも、この一文字の法則さえ覚えれば、動的なウェブサイト作りへの第一歩を踏み出したことになります。

3. テンプレートの引数（パラメータ）を受け取る

Twirlファイルの一番最初の行には、必ずパラメータ宣言を書きます。これは、コントローラからどのようなデータを受け取るかを定義する「受付窓口」のようなものです。Javaのプログラムからデータを受け取って画面に出すには、まずこの窓口を作る必要があります。

以下の例は、タイトルとメッセージという二つの文字データを受け取るテンプレートの書き方です。


@(title: String, message: String)

<!DOCTYPE html>
<html>
    <head>
        <title>@title</title>
    </head>
    <body>
        <h1>@title</h1>
        <p>@message</p>
    </body>
</html>

括弧 () の中に「名前：種類（型）」の形式で記述します。こうすることで、@title や @message と書いた場所に、コントローラから送られてきた実際の言葉がはめ込まれます。

4. 条件分岐（if文）で表示を切り替える

ウェブサイトを見ていると「ログインしているときだけ表示されるボタン」や「エラーがあるときだけ出る赤い文字」がありますよね。これを実現するのがif文（条件分岐）です。Twirlでもプログラムと同じように条件によってHTMLの出し分けができます。

以下のコードは、ユーザーが管理者かどうかに応じて表示メッセージを変えるシンプルな例です。


@(isAdmin: Boolean)

@if(isAdmin) {
    <p class="text-danger">管理者メニュー：設定を変更できます。</p>
} else {
    <p>一般ユーザーメニュー：閲覧のみ可能です。</p>
}

このように @if(条件) { ... } という形を使います。Java言語を学んでいる方なら、書き方がそっくりなので親しみやすいはずです。これだけで、ユーザーごとにパーソナライズされた画面を作れるようになります。

5. 繰り返し（for文）でリストを表示する

ショッピングサイトの製品一覧や、SNSの投稿一覧のように、似たような表示を並べるときに欠かせないのが繰り返し構文（for文）です。一つずつHTMLを手書きするのは大変ですが、Twirlならリストの中身を自動で全部並べてくれます。

Javaの List などを受け取って、箇条書きで出力するコードを見てみましょう。


@(items: List[String])

<ul>
    @for(item <- items) {
        <li>@item</li>
    }
</ul>

@for(一つ分の名前 <- リスト全体の名前) { ... } という書き方をします。リストの中に100個の商品が入っていれば、Twirlが自動的に100個の <li> タグを生成してくれます。手間が省けるだけでなく、ミスも減らせる非常に便利な機能です。

6. テンプレートの中での計算や変数定義

表示する前に少しだけ計算をしたり、一時的な変数を作りたい場合もあります。そのときは @defining や @var（最新版）を使うか、単純な計算ならその場で実行できます。しかし、ベストプラクティスとしては、複雑なロジックはコントローラ側で済ませ、ビュー（Twirl）は表示だけに専念させるのが理想的です。

例えば、商品の単価と個数を掛け算して合計金額を出す程度なら、Twirlの中でも簡単に記述できます。


@(price: Int, quantity: Int)

<p>合計金額は @(price * quantity) 円です。</p>

計算式を括弧 () で囲んであげることで、その計算結果が文字としてHTMLに埋め込まれます。直感的で分かりやすいですね。

7. 他のテンプレートを呼び出す（部品化）

大規模な開発になると、画面の一部（ヘッダーやメニューなど）を他のページでも使い回したくなります。Twirlでは、一つのテンプレートから別のテンプレートを呼び出すことが簡単にできます。これを部品化（コンポーネント化）と呼びます。

例えば、header.scala.html という部品を作っておけば、他の全てのページで @header() と書くだけで、その内容を読み込むことができます。デザインを一箇所変えるだけで全ページに反映されるため、メンテナンス性が劇的に向上します。

8. コメントアウトの書き方

開発をしていると、「メモを残しておきたいけれど画面には出したくない」ということがあります。Twirl専用のコメント構文を使うと、ブラウザには一切表示されず、サーバー側でのみ確認できるメモを残せます。HTMLのコメント  はブラウザの「ソースを表示」で見えてしまいますが、Twirlのコメントは見えません。


@* ここに書いたメモは、ブラウザからは見られません。
   開発者同士の連絡や、一時的にコードを無効化するのに使います。
*@
<p>こんにちは！</p>

@* ... *@ という記号で囲むのがルールです。セキュリティ的に重要な情報をメモする場合や、複雑な箇所の説明を添えるのに重宝します。

9. 型安全性（タイプセーフ）の恩恵

Play FrameworkとTwirlを使う最大のメリットの一つは、型安全性（タイプセーフ）です。これは、プログラムの間違いを「実行する前（コンパイル時）」に教えてくれる機能です。

例えば、文字を表示する場所に間違えて数字のリストを渡そうとすると、Play Frameworkが「型が違いますよ！」と真っ赤な画面でエラーを出してくれます。初心者のうちはエラーが怖いかもしれませんが、実はこれは「実際に公開してユーザーが困る前にミスを教えてくれる」という優しさなのです。この強力なチェック機能があるおかげで、Javaのウェブ開発は非常に堅牢で壊れにくいものになります。

10. Twirlテンプレート上達への近道

Twirlテンプレートの構文を覚える一番の近道は、実際にコードを書いてブラウザで確認することです。まずは @ を使って文字を出すところから始め、次に if や for を使って表示を動かしてみましょう。自分が書いたJavaのデータが、綺麗なウェブ画面として表示される喜びは、プログラミングの醍醐味です。

もしエラーが出ても、画面に表示されるメッセージをよく読めば、必ず解決のヒントが隠されています。Googleなどで「Play Framework Twirl syntax error」と検索するのも良いでしょう。一歩ずつ、自由自在に画面を操れるようになっていきましょう！