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

生徒

「フォームで送信ボタンを押した時、入力エラーがあると中身が空っぽに戻ってしまいます。これって直せますか？」

先生

「それは『入力保持』や『フォームデータの再表示』という処理が必要ですね。Play Frameworkなら、送信されたデータをそのまま画面に戻すことができますよ。」

生徒

「せっかく書いた内容が消えるとガッカリしますもんね。初心者でも簡単に実装できるのでしょうか？」

先生

「もちろんです！コントローラとビューの連携を少し工夫するだけで、ユーザーに優しいフォームが作れます。さっそく仕組みを見ていきましょう。」

1. フォームデータの再表示とは？

ウェブサイトの入力フォームにおいて、送信ボタンを押した後にバリデーション（入力チェック）エラーが起きた際、ユーザーが既に入力した内容をそのまま表示し続けることを入力保持やフォームの再表示と呼びます。例えば、十個ある入力欄のうち一つだけ間違えた時に、残りの九個が空っぽになってしまったら、ユーザーはもう一度最初から入力し直さなければならず、非常にストレスを感じてしまいます。

Play Framework（プレイフレームワーク）は、Java言語で効率よくウェブアプリを開発するためのツールですが、この「ユーザーの手間を省く機能」が非常に充実しています。送信されたデータを受け取り、エラーがあればそのデータを丸ごと画面作成担当の「ビュー」に送り返すだけで、自動的に元の値を入力欄に埋め込んでくれるのです。プログラミング未経験の方でも、この仕組みを覚えるだけで、プロが作ったような「親切なサイト」を作成できるようになります。SEO対策としても、使いやすいフォームはユーザーの離脱を防ぐため、非常に重要なポイントとなります。

2. コントローラでデータを受け渡しする仕組み

まずは司令塔である「コントローラ」の役割について学びましょう。ユーザーが送信ボタンを押すと、入力したデータはコントローラに届きます。ここで bindFromRequest() という命令を使うと、送信データをJavaのオブジェクトに変換してくれます。

もし入力に不備（エラー）があった場合、その「データが入った状態のフォームオブジェクト」をそのまま画面（テンプレート）に引数として渡して再表示させます。これにより、画面側は「さっき送信された値」を知ることができるようになります。このデータのバケツリレーが、再表示処理の核心部分です。複雑なコードを自分で書かなくても、Play Frameworkが裏側でデータの詰め直しをサポートしてくれます。


package controllers;

import play.mvc.*;
import play.data.Form;
import play.data.FormFactory;
import javax.inject.Inject;
import models.UserForm;

public class UserController extends Controller {
    @Inject
    FormFactory formFactory;

    public Result submit() {
        // 画面からの入力を受け取る
        Form<UserForm> userForm = formFactory.form(UserForm.class).bindFromRequest();

        if (userForm.hasErrors()) {
            // エラーがある時は、入力データが入ったままのuserFormを画面に送り返す
            return badRequest(views.html.userView.render(userForm));
        }

        return ok("登録に成功しました！");
    }
}

3. テンプレートで入力値を表示する方法

次に、画面側の「ビュー（Twirlテンプレート）」の書き方を見ていきましょう。コントローラから送られてきたフォームオブジェクトを使って、各入力欄の value 属性に値をセットします。

Play Frameworkのテンプレートエンジンでは、userForm("フィールド名").value() という書き方で、前回入力された値を取り出すことができます。これをHTMLの入力タグの中に記述することで、エラーで画面が戻ってきた時にも、文字が入力された状態をキープできるのです。初心者の方は、まず「value属性に値を入れ直す」というルールを意識してみてください。これだけで、フォームの使い勝手が劇的に向上します。


@import play.data.Form
@(userForm: Form[models.UserForm])

@helper.form(action = routes.UserController.submit()) {
    <div class="mb-3">
        <label>ユーザー名</label>
        @* value属性に、前回送信された値をセットします *@
        <input type="text" name="name" class="form-control" 
               value="@userForm("name").value().orElse("")">
    </div>

    <button type="submit" class="btn btn-primary">送信する</button>
}

4. フォームヘルパーを使った賢い実装

手書きのHTMLタグで value を指定するのも良いですが、Play Frameworkにはもっと便利な「ヘルパー関数」が用意されています。これを使うと、入力保持の処理をさらに短く、正確に記述することができます。

例えば @helper.inputText という命令を使うと、Play Frameworkが「この入力欄には、前回のこの値を入れる」という処理を自動で行ってくれます。さらに、エラーメッセージの表示もセットでやってくれるため、コードが非常にスッキリします。プログラミング未経験でパソコン操作に自信がない方こそ、こうした便利な「自動化ツール」を積極的に活用して、楽に開発を進めていきましょう。


@import play.data.Form
@import helper._

@(userForm: Form[models.UserForm])

@helper.form(action = routes.UserController.submit()) {
    @* inputTextを使うだけで、エラー時の入力保持も自動で対応してくれます *@
    @helper.inputText(
        userForm("email"),
        '_label -> "メールアドレス",
        'class -> "form-control"
    )

    <input type="submit" class="btn btn-success" value="保存">
}

5. パスワード項目の取り扱いと注意点

再表示処理において、一つだけ特別な扱いをするのが「パスワード」の入力欄です。セキュリティ上の理由から、パスワードだけは再表示させずに、エラーが起きた際も空っぽの状態に戻すのが一般的なウェブサイトのルールとなっています。

これは、万が一パソコンの画面を誰かに覗かれた際に、伏せ字の数からパスワードを推測されたり、ブラウザのキャッシュに情報が残ったりするリスクを避けるためです。Play Frameworkでも、パスワード用のヘルパー関数を使うと、標準では値が保持されないようになっています。ユーザーの利便性も大切ですが、情報を守るための「あえて消す」という判断も、優れたエンジニアになるための大切な知識です。

6. ラジオボタンやセレクトボックスの保持

文字を入力する欄だけでなく、選択肢から選ぶ「ラジオボタン」や「セレクトボックス（ドロップダウンメニュー）」も、再表示の対象になります。これらが初期状態のリセットされてしまうと、ユーザーは「せっかく選んだのに！」と不満を感じてしまいます。

これらの項目では、前回の値がどれだったかを判定し、その項目に「selected（選択済み）」や「checked（チェック済み）」という印を付ける処理を行います。Play Frameworkのフォームオブジェクトは、どの選択肢が選ばれていたかもしっかり記憶しています。初心者には少し難しく感じるかもしれませんが、要領はテキスト入力と同じで、「データの記憶を画面に反映させる」という一貫した流れになっています。これにより、アンケートフォームのような項目が多い画面でも、快適な操作感を提供できます。

7. エラーメッセージとセットで考えるUXデザイン

入力値を保持するのと同時に、どこが間違っているのかを伝える「エラーメッセージ」を添えることで、最高のUI（ユーザーインターフェース）が完成します。再表示された画面で、入力が保持されているだけでは、ユーザーは「なぜ画面が戻ってきたのか」一瞬戸惑うかもしれません。

「この項目は8文字以上で入力してください」といった具体的な指示を、保持された値のすぐ隣に表示しましょう。Play Frameworkは、エラーの種類に応じたメッセージを自動で管理してくれるため、再表示とエラー表示を同時に行うのがとても得意です。こうした「迷わせない工夫」を積み重ねることが、ウェブアプリケーションの質を高めることに直結します。Googleなどの検索エンジンも、利用者の満足度が高いサイトを好む傾向にあるため、SEOの観点からもこの丁寧な作り込みは欠かせません。

8. 実践！再表示処理を成功させるコツ

最後に、再表示処理をスムーズに実装するためのポイントを整理しましょう。まず大切なのは、コントローラで badRequest を返すことです。これにより、ブラウザは「入力に問題があった」と正しく認識し、適切な挙動をとることができます。また、モデルクラスでのデータ定義を正しく行うことも重要です。

プログラミング学習の初期段階では、画面が切り替わるたびに「データがどこから来て、どこへ行くのか」を意識してみてください。フォーム送信から再表示までのデータの流れを頭の中でイメージできるようになれば、Play Frameworkマスターへの道はすぐそこです。最初は小さなフォームから練習し、徐々に複雑な入力保持に挑戦していきましょう！