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

生徒

「先生、Java側で用意した商品のリストや、お知らせの一覧を画面に並べて表示したいのですが、HTMLを一つずつ手書きするのは大変ですよね？」

先生

「その通りです。Play FrameworkのビューエンジンであるTwirl（トワール）には、リストの中身を順番に取り出して表示する『繰り返し処理（for文）』という便利な機能がありますよ。」

生徒

「Javaのfor文と同じように使えるんですか？」

先生

「基本は似ていますが、Twirl独自の書き方があります。これを使えば、データが10個でも100個でも、数行のコードで自動的に表示できるようになります。早速やり方を見ていきましょう！」

1. Twirlテンプレートの繰り返し処理とは？

Webアプリケーションを作っていると、ショッピングサイトの商品一覧や、SNSの投稿リストのように、「同じ形式のデザインでデータだけが違うもの」をたくさん並べる場面によく遭遇します。 Play Frameworkでは、これを繰り返し処理（イテレーション）と呼び、Twirlテンプレート内のfor文を使って実現します。

Twirlのfor文は、Javaの拡張for文（foreach）に近い感覚で記述できます。コントローラから渡された「リスト（List）」などの集合データから、中身を一つずつ順番に取り出し、その都度HTMLを出力してくれる魔法のような命令です。手作業でHTMLをコピー＆ペーストする必要がなくなるため、保守性が高く、ミスも少ないスマートな開発が可能になります。

2. ビューでfor文を使うための基本構文

Twirlテンプレートでfor文を使うときは、他の命令と同じように「@」記号から書き始めます。基本的な形は @for(変数名 <- リスト) { 繰り返し表示したい内容 } です。

この「<-」という記号は、右側のリストから左側の変数へデータを一つ流し込むようなイメージで覚えてください。取り出された変数には、ループが回るたびにリストの次の要素が代入され、波括弧 { } の中のHTMLがその変数の内容で書き換えられて画面に表示されます。

3. シンプルな文字列リストを表示する例

まずは、果物の名前が入った簡単なリストを箇条書きで表示する例を見てみましょう。最初に、ビューファイル（app/views/fruitList.scala.html）を作成します。


@(fruits: List[String])

<!DOCTYPE html>
<html>
    <head>
        <title>果物一覧</title>
    </head>
    <body>
        <h1>本日の果物</h1>
        <ul>
            @for(fruit <- fruits) {
                <li>@fruit</li>
            }
        </ul>
    </body>
</html>

1行目の @(fruits: List[String]) は、Java側から「文字列のリスト」を受け取るための宣言です。 @for(fruit <- fruits) によって、リストの中身が順番に fruit という変数に入り、<li> タグに囲まれて出力されます。

4. Javaコントローラからのデータ送信

先ほどのビューを表示するために、Javaのコントローラ側でリストを作成し、ビューへ渡す処理を記述します。 Play Frameworkでは、標準的なJavaの java.util.List を使用できます。


package controllers;

import play.mvc.*;
import java.util.ArrayList;
import java.util.List;
import views.html.*;

public class FruitController extends Controller {
    public Result index() {
        // リストを作成してデータを追加
        List<String> fruits = new ArrayList<>();
        fruits.add("リンゴ");
        fruits.add("バナナ");
        fruits.add("オレンジ");
        
        // views.html.fruitList.render(リスト) でビューを呼び出す
        return ok(views.html.fruitList.render(fruits));
    }
}

実行すると、ブラウザには3つの果物が箇条書きで綺麗に並んで表示されます。コントローラ側でデータを増やすだけで、ビューを一切触ることなく画面の項目を増減させることができます。

5. オブジェクトのリストを扱う応用編

実際の現場では、文字列だけでなく、「商品名」と「価格」がセットになったような「オブジェクト」のリストを扱うことが多いです。自作したクラス（モデル）を繰り返し処理する方法を確認しましょう。

たとえば、Product というクラスに name（名前）と price（価格）というフィールドがある場合、ビューでは以下のようにドット記法を使って個々のデータにアクセスします。


@(products: List[models.Product])

<table class="table">
    <thead>
        <tr>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        @for(p <- products) {
            <tr>
                <td>@p.getName()</td>
                <td>@p.getPrice() 円</td>
            </tr>
        }
    </tbody>
</table>

このように、リストから取り出したオブジェクト p に対してメソッドを呼び出すことで、表形式（テーブル）などの複雑なレイアウトも簡単に構築できます。

6. インデックス（番目）を取得する方法

繰り返し処理の中で、「今、何番目の要素を処理しているか」という番号（インデックス）を使いたいことがあります。 Twirlでは、リスト名に .zipWithIndex という命令を付けることで、要素と一緒に番号を取得できます。


@(items: List[String])

@for((item, index) <- items.zipWithIndex) {
    <p>@(index + 1) 番目のアイテムは @item です。</p>
}

index は0から始まるため、画面に表示するときは index + 1 とするのが一般的です。ランキングの順位表示や、1行ごとに背景色を変えたい時などに非常に重宝するテクニックです。

7. 空のリストの場合の考慮

もしリストにデータが一つも入っていない場合、for 文は何も出力しません。しかし、ユーザーには「データがありません」と伝えた方が親切です。このような場合は、前回の記事で学んだ if 文と組み合わせて使いましょう。


@(messages: List[String])

@if(messages.isEmpty) {
    <div class="alert alert-info">新しいお知らせはありません。</div>
} else {
    <div class="list-group">
        @for(msg <- messages) {
            <div class="list-group-item">@msg</div>
        }
    </div>
}

isEmpty メソッドでリストが空かどうかを判定し、データがある時だけ for 文を実行する構成です。これがWeb開発における「おもてなし」のコードの書き方です。

8. for文の中で使える特殊な変数

Twirlの for 文には、ループの状態を管理する便利なプロパティがあります。あまり知られていませんが、知っているとコードがスッキリします。

例えば、「最初だけ特別なクラスを付けたい」「最後だけ区切り線を入れない」といった制御が可能です。これらは、条件分岐と組み合わせることで真価を発揮します。 Web制作において、デザイン上の細かいこだわりを実現するために欠かせない知識となります。

9. 繰り返し処理の注意点とパフォーマンス

非常に便利な for 文ですが、リストの中身が何万件もあるような膨大なデータをビューで一度にループさせるのは避けましょう。ブラウザに表示する情報が多すぎると、ページの読み込みが遅くなり、ユーザーが離れてしまう原因になります。

大量のデータを扱う場合は、ページを分割する「ページネーション」という機能をJava側で実装し、一度に表示する件数を10件や20件程度に絞るのが一般的です。「ビューは表示のための場所、ロジックの管理はJava」という役割分担を常に意識しましょう。

10. 繰り返しを使いこなして動的なサイトへ

今回学んだ for 文を使えば、Javaで用意した動的なデータを自由自在にHTMLとして出力できるようになります。これは単なる「情報の表示」を超えて、掲示板、ニュースサイト、管理画面など、あらゆるWebサービスの基礎となる技術です。

「リストを受け取る宣言」と「@forでの取り出し」のセットさえマスターしてしまえば、Play Frameworkでの画面開発はぐっと楽しくなります。ぜひ、自分で色々なリストを作って、画面に思い通りのデータが並ぶ感動を体験してみてください！

Play Frameworkのビューで繰り返し処理！Twirlテンプレートのfor文活用ガイド