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

生徒

「Play Frameworkで、ブラウザに表示されるHTML画面を作るにはどうすればいいですか？」

先生

「Play Frameworkでは、Twirl（トワール）というテンプレートエンジンを使ってビューを作成します。JavaのコードをHTMLの中に自然に埋め込めるのが特徴ですよ。」

生徒

「難しそうですね…。具体的にファイルはどこに作って、どうやってJavaから呼び出すんですか？」

先生

「作成場所や基本的な構文を覚えれば、驚くほど簡単に動的なWebページが作れるようになります。まずは基本的な仕組みから一緒に見ていきましょう！」

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

Play Frameworkにおいて、ユーザーが見る画面（HTML）を担当するのが「ビュー（View）」です。そして、そのビューを構築するための仕組みがTwirlテンプレートです。TwirlはScalaベースのエンジンですが、Java開発者にとっても非常に扱いやすく設計されています。

最大の特徴は、HTMLの中に「@（アットマーク）」を記述するだけでJavaの変数やロジックをシームレスに埋め込める点にあります。また、作成したテンプレートはコンパイル時にチェックされるため、スペルミスなどの間違いを早い段階で見つけ出すことができる非常に強力なツールです。

2. ビューファイルの作成場所と拡張子

Play Frameworkのプロジェクトにおいて、ビューファイルは慣習として app/views ディレクトリの中に配置します。ファイル名の拡張子には .scala.html を使用します。

例えば、トップ画面を表示するためのファイルであれば index.scala.html と名付けます。この「.scala」という部分に不安を感じる初心者の方もいるかもしれませんが、中身で使うロジックはJavaから渡されたデータを表示するだけなので、心配しすぎる必要はありません。

3. 最もシンプルなHTMLビューの作成例

まずは、特定の変数を渡さずに純粋なHTMLを表示するだけのテンプレートを作成してみましょう。以下のコードを app/views/hello.scala.html として保存します。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>挨拶ページ</title>
    </head>
    <body>
        <h1>こんにちは、Play Framework！</h1>
        <p>これはTwirlテンプレートで作成されたHTMLページです。</p>
    </body>
</html>

このテンプレートにはまだ動的な要素はありませんが、Play Frameworkのルールに従った立派なビューファイルです。

4. コントローラからビューを呼び出す方法

作成した hello.scala.html をブラウザに表示させるには、コントローラからこのビューを「レンダリング（描画）」する必要があります。Play Frameworkは自動的にテンプレートファイルをJavaのクラスとしてコンパイルしてくれます。

コントローラ内では、views.html.ファイル名.render() という形式で呼び出します。具体的なJavaコードは以下のようになります。


package controllers;

import play.mvc.*;
import views.html.*; // ビューをインポート

public class HomeController extends Controller {
    public Result hello() {
        // views.html.hello クラスの render メソッドを呼び出す
        return ok(views.html.hello.render());
    }
}

ここで ok() メソッドは、HTTPステータスコード200（成功）と共にHTMLの内容をブラウザに返す役割を持っています。

5. テンプレートにJavaのデータを渡す方法

Webサイトの多くは、ユーザーの名前や検索結果など、状況によって表示内容が変わります。これを実現するために、コントローラからテンプレートへ引数としてデータを渡す方法を学びましょう。

Twirlテンプレートの1行目には、受け取るデータの型と変数名を定義する必要があります。これを「引数セクション」と呼びます。

例として、文字列を受け取る app/views/greet.scala.html を作成します。


@(name: String)

<!DOCTYPE html>
<html>
    <head>
        <title>挨拶</title>
    </head>
    <body>
        <h1>こんにちは、@name さん！</h1>
    </body>
</html>

1行目の @(name: String) が、Javaから String 型のデータを受け取る宣言です。そして、HTMLの中では @name と記述することで、その中身を表示できます。

6. 複数の引数を渡すコントローラの実装

次は、先ほどのテンプレートを呼び出すJava側の処理を記述します。コントローラから値を渡すのは非常に簡単です。


public class GreetController extends Controller {
    public Result welcome() {
        String userName = "山田太郎";
        // renderメソッドの引数に値を渡す
        return ok(views.html.greet.render(userName));
    }
}

これだけで、ブラウザには「こんにちは、山田太郎さん！」と表示されます。Java側で計算した結果やデータベースから取得した情報を、このようにして画面に反映させます。

7. Twirlでのエスケープ処理とセキュリティ

Web制作において怖いのが「クロスサイトスクリプティング（XSS）」という攻撃ですが、Twirlテンプレートはデフォルトで自動エスケープ機能が備わっています。

例えば、Java側から <script>alert('危険')</script> という文字列を渡したとしても、Twirlはそれをそのまま実行可能なコードとしてではなく、ただの文字列として表示するように変換してくれます。これにより、初心者がうっかり脆弱なサイトを作ってしまうリスクを大幅に軽減してくれます。

8. HTMLをそのまま出力したい場合

基本は自動エスケープされますが、信頼できるソースからのHTMLタグをそのまま反映させたい場合もあります。そのときは @Html() という特殊な関数を使用します。


@(rawHtml: String)

<div>
    @rawHtml
</div>
<div>
    @Html(rawHtml)
</div>

ただし、この機能を使う際は、渡されるデータが安全であることを十分に確認してください。不特定多数のユーザーが入力した情報をそのまま @Html() で表示するのは非常に危険です。

9. ビューのコンパイルエラーに慣れよう

Twirlテンプレートの面白い点（そして時々初心者を困らせる点）は、HTMLファイルなのにJavaのソースコードと同じように「コンパイル」が必要な点です。

もし @name と書いたのに引数で name を定義していなかったり、型の指定を間違えていたりすると、ブラウザで確認する前にコンパイルエラーが発生します。エラーメッセージには「どのファイルの何行目が間違っているか」が表示されるので、落ち着いて確認しましょう。この厳格さこそが、大規模な開発でもバグを少なく保てるPlay Frameworkの強みなのです。