Play Frameworkで部分テンプレートを使いこなす！Twirlでの部品共通化ガイド
生徒
「Play Frameworkで画面を作っているのですが、商品のカードやユーザーのプロフィール欄など、色々なページで使い回したい部品があるんです。効率よく管理する方法はありますか？」
先生
「それには部分テンプレート（Partial）という仕組みが最適ですよ。HTMLの一部を小さな部品として切り出して、必要な場所で呼び出すことができるんです。」
生徒
「部品にしておけば、一箇所直すだけで全てのページの部品が更新されるってことですね！」
先生
「まさにその通りです！開発効率が上がるだけでなく、コードもスッキリします。さっそく、Javaでのデータの渡し方を含めて詳しく見ていきましょう！」
1. 部分テンプレート（Partial）とは？
Webサイトの構築において、ナビゲーションバー、サイドバー、あるいは個別の投稿を表示するカードデザインなど、何度も繰り返し登場する要素があります。これらを一つの独立したファイルとして作成し、他のテンプレートから呼び出せるようにしたものを部分テンプレート（パーシャル）と呼びます。
Play FrameworkのビューエンジンであるTwirl（トワール）では、全てのテンプレートが関数のように扱われるため、この部分テンプレートの作成が非常に簡単です。Javaで計算したデータやデータベースから取得した情報を、これらの部品に渡して表示させることで、動的で美しいWebサイトを構築できます。
2. なぜ部分テンプレートが必要なのか
大規模なプロジェクトになればなるほど、同じHTMLコードをあちこちにコピー＆ペーストするのはリスクが伴います。たとえば、デザインを少し変更したいときに、10箇所に散らばった同じコードをすべて修正するのは非常に大変ですし、修正漏れの原因にもなります。
部分テンプレートを活用して部品化（コンポーネント化）することで、ソースコードの可読性が劇的に向上します。メインのテンプレートは「どの部品をどこに置くか」という構成に集中でき、個別のデザインは部品ファイルの中で管理するという、役割分担が可能になるのです。
3. 部分テンプレートの作成方法
部分テンプレートを作るための特別な設定はありません。通常の .scala.html ファイルを作成するだけです。一般的には、app/views/common/ や app/views/tags/ といったフォルダを作って管理すると分かりやすくなります。
ここでは例として、お知らせなどを表示するための「アラート部品」を作成してみましょう。ファイル名は _alert.scala.html とします（先頭にアンダースコアを付けるのは、部分テンプレートであることを分かりやすくするための慣習です）。
@(message: String, alertType: String)
<div class="alert alert-@alertType shadow-sm" role="alert">
<i class="bi bi-info-circle-fill"></i> @message
</div>
4. メインテンプレートからの呼び出し方
作成した部分テンプレートを呼び出すには、Javaのメソッドを呼び出すように @views.html.フォルダ名.ファイル名(引数) と記述します。
@()
<!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="p-5">
<h1>システムダッシュボード</h1>
@views.html.common._alert("サーバーは正常に稼働しています", "success")
<p>ここにメインのコンテンツが入ります。</p>
@views.html.common._alert("メンテナンスの予定があります", "warning")
</body>
</html>
5. Javaコントローラからデータを渡す流れ
部分テンプレートに表示させる内容は、Javaのコントローラから渡されたデータを使うのが一般的です。コントローラ側の実装を確認しましょう。
package controllers;
import play.mvc.*;
import views.html.*;
public class DashboardController extends Controller {
public Result index() {
String infoMsg = "新しい通知が3件あります。";
String status = "info";
// 呼び出すのは親のテンプレート。内部で部分テンプレートが使われる。
return ok(views.html.dashboard.render(infoMsg, status));
}
}
このように、Java側からは「どの部分テンプレートを使うか」を気にする必要はありません。あくまでメインのページに必要なデータを渡すだけで、ビュー側で適切に部品へ受け渡されます。
6. オブジェクトを丸ごと部品に渡す
文字列だけでなく、Javaで定義したクラス（モデル）を丸ごと渡すこともできます。例えば、ユーザー情報を表示する「プロフィールカード」を作ってみましょう。
@(user: models.User)
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">@user.getName()</h5>
<h6 class="card-subtitle mb-2 text-muted">@user.getEmail()</h6>
<p class="card-text">ランク: @user.getRankName()</p>
</div>
</div>
このように、引数に models.User 型を指定することで、オブジェクトが持っている様々な情報を部品内で自由に使うことができます。
7. ループ処理の中での活用
部分テンプレートが最も真価を発揮するのは、リストデータを繰り返し表示するときです。@for 文の中に部品を配置することで、非常に読みやすいコードになります。
@(userList: List[models.User])
<div class="row">
@for(user <- userList) {
<div class="col-md-4 mb-3">
@views.html.common._userCard(user)
</div>
}
</div>
もしカードのデザインを変えたくなっても、_userCard.scala.html を一行修正するだけで、一覧ページの全カードが瞬時に新デザインへ切り替わります。
8. パフォーマンスへの影響と注意点
「部品をたくさん作ると、その分読み込みが遅くなるのでは？」と心配されるかもしれませんが、Play Framework（Twirl）はテンプレートを事前にコンパイルしてJavaのクラスにするため、実行速度は非常に高速です。
ただし、部品を細かく分けすぎると、どこに何が書いてあるか探すのが大変になってしまいます。「複数のページで使うもの」や「一つのファイルに書くと長くなりすぎる塊」を基準に切り出していくのが、初心者の方が上手に管理するコツです。
9. 引数のデフォルト値を設定する
Twirlでは引数にデフォルト値を設定することもできます。これにより、特定のページでは細かい設定を変えたいけれど、普段は決まった表示でいい、といった柔軟な使い方が可能になります。
@(title: String, showIcon: Boolean = true)
<div>
@if(showIcon) { <i class="bi bi-star"></i> }
<span>@title</span>
</div>
この場合、@views.html.common.tag("マイタイトル") とだけ書けばアイコン付きで表示され、false を渡せばアイコンなしになります。
10. メンテナンスしやすいビュー設計を目指そう
部分テンプレートの活用は、プロの開発現場では当たり前のように行われているテクニックです。最初はファイルを分けるのが面倒に感じるかもしれませんが、後からの修正作業で必ずその恩恵を受けることができます。
Play Frameworkの習得において、この「テンプレートの整理術」を身につけることは、Javaのロジックを書くのと同じくらい重要です。小さな部品を組み合わせて大きな画面を作る、パズルのような楽しさをぜひ体験してみてください！
