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

生徒

「フォームでエラーがあったときに、Twigでどうやってエラーメッセージを表示するんですか？」

先生

「Twigでは、バリデーションエラーやFlashメッセージを簡単に表示できますよ。」

生徒

「Flashメッセージって何ですか？エラーとどう違うんですか？」

先生

「Flashメッセージは、操作後にユーザーに知らせる通知のことです。では、Twigでの表示方法を実際に見てみましょう！」

1. バリデーションエラーとは？

バリデーションエラーとは、フォームに入力された内容が、ルールに合っていないときに出るエラーメッセージのことです。たとえば「メールアドレスの形式が間違っています」「名前は必須です」などがあります。

Symfonyでは、フォームにバリデーションルールを設定することで、間違った入力に対して自動でエラーを検出してくれます。そしてTwigでは、そのエラーを画面に表示できます。

2. Twigでエラーメッセージを表示する基本の書き方

バリデーションエラーは、フォームの各フィールドごとに表示できます。Twigでは以下のように書きます。


{{ form_errors(form.name) }}

このコードは、フォームのnameフィールドにエラーがある場合、そのメッセージを表示してくれます。

例えば、「名前を入力してください」というような内容です。全体のフォームに関するエラーは次のように表示できます。


{{ form_errors(form) }}

3. 実際のフォーム表示とエラーの組み合わせ例

実際に、エラーメッセージと入力欄をセットで表示することが多いです。以下は、名前入力欄の例です。


<div class="mb-3">
    {{ form_label(form.name) }}
    {{ form_errors(form.name) }}
    {{ form_widget(form.name) }}
</div>

form_labelはラベル（項目名）を表示し、form_widgetは実際の入力欄、form_errorsはエラーメッセージを表示するために使います。

4. Flashメッセージとは？通知のようなメッセージ

Flashメッセージとは、ユーザーの操作結果を一度だけ表示するメッセージです。例えば、「登録が完了しました」「ログインに成功しました」といったメッセージを表示したいときに使います。

これは、Symfonyのコントローラで以下のように設定します。


$this->addFlash('success', '登録が完了しました');

addFlashという関数で、メッセージの種類（ここではsuccess）と内容を指定します。

5. TwigでFlashメッセージを表示する方法

Twigでは、Flashメッセージを表示するために、ループを使ってメッセージを取り出します。以下はsuccessタイプのメッセージを表示する例です。


{% for message in app.flashes('success') %}
    <div class="alert alert-success" role="alert">
        {{ message }}
    </div>
{% endfor %}

ここでは、Bootstrapのアラートを使って、見た目も整えています。他にも、error、warning、infoなどの種類を使い分けられます。

6. 複数のFlashメッセージを一括表示する場合

Flashメッセージは種類ごとに出し分けることもできますが、まとめて表示したいこともあります。その場合は、複数の種類をループで回して一気に出すことができます。


{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label }}" role="alert">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}

これで、どの種類のメッセージも一括で表示できます。

7. Flashメッセージの使いどころとは？

Flashメッセージは、フォーム送信後の確認メッセージや、ログイン成功・失敗時の通知に最適です。

ユーザーが操作に成功したことを知らせる
エラーが発生したときにわかりやすく伝える
ページ遷移後もメッセージが残る（1回だけ）

このように、ユーザー体験（UX）を向上させるために非常に役立ちます。

8. Twigでエラーとメッセージを両方表示するテンプレート構成

バリデーションエラーとFlashメッセージは、それぞれ表示の目的が違いますが、両方一緒に使うことも多いです。以下は、よくあるテンプレートの構成例です。


{# Flashメッセージ表示 #}
{% for message in app.flashes('success') %}
    <div class="alert alert-success" role="alert">{{ message }}</div>
{% endfor %}

{# フォームエラーと入力欄表示 #}
<div class="mb-3">
    {{ form_label(form.email) }}
    {{ form_errors(form.email) }}
    {{ form_widget(form.email) }}
</div>

これにより、ユーザーに対して明確なフィードバックを表示することができます。