TwigでエラーメッセージとFlash通知を表示！初心者向けSymfonyテンプレート解説

1. バリデーションエラーとは？正しい入力を導く仕組み

1. バリデーションエラーとは？正しい入力を導く仕組み

バリデーションエラーとは、ユーザーがフォームに入力した内容が、あらかじめ決められたルール（バリデーションルール）を満たしていない時に表示される警告メッセージのことです。

プログラミング未経験の方でも、Webサイトで「パスワードが短すぎます」や「メールアドレスの形式が正しくありません」といった赤い文字を見たことがあるはずです。それがまさにバリデーションエラーです。

Symfonyというフレームワークを使うと、PHP側で「この項目は必須」「ここは10文字以上」といったルールを設定するだけで、不適切な入力があった場合に自動的にエラーを検出してくれます。開発者は、その結果をTwig（テンプレートエンジン）を使って画面に表示させるだけで、ユーザーに正しい入力を促すことができるのです。

例えば、PHP（EntityやFormType）で以下のようなバリデーションルールを設定したとしましょう。

// 名前を必須（Blank不可）にするルール設定のイメージ
#[Assert\NotBlank(message: "名前を入力してください")]
private $name;

この状態でユーザーが名前を空欄のまま送信すると、Symfonyが「名前を入力してください」というエラーメッセージを自動的に生成し、Twigへ受け渡してくれる仕組みになっています。これにより、データの不備を防ぎ、安全で使いやすいシステムを作ることができます。

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

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

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

{{ form_errors(form.name) }}

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

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

{{ form_errors(form) }}

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

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メッセージとは？通知のようなメッセージ

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

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

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

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

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

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

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メッセージを一括表示する場合

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メッセージの使いどころとは？

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

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

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

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

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

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>

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

まとめ

まとめ

今回の記事では、PHPのフレームワークであるSymfonyにおいて、テンプレートエンジン「Twig」を活用したエラーメッセージとFlash通知の表示方法について詳しく解説してきました。Webアプリケーションを開発する上で、ユーザーに対するフィードバックは非常に重要な要素です。入力内容が間違っていることを伝える「バリデーションエラー」と、操作の完了やシステムからの通知を伝える「Flashメッセージ」の二つを適切に使い分けることで、ユーザー迷わせない親切な設計（UXの向上）を実現できます。

Twigでのエラー表示と通知のポイント再確認

まず、バリデーションエラーについては、SymfonyのFormコンポーネントと密接に連携しています。form_errors(form.field_name)という関数一つで、サーバーサイドで検証されたエラー内容をHTMLとして出力できるのはTwigの大きな強みです。これにより、開発者は複雑な条件分岐をテンプレート内に書く必要がなくなり、コードの可読性が飛躍的に向上します。

一方、Flashメッセージは「一度表示したら消える」という特性を持っており、セッションを利用した一時的な通知に最適です。コントローラ側で$this->addFlash('success', '保存しました')のようにセットし、Twig側でapp.flashesから取り出すという流れは、Symfony開発における王道のパターンです。

実践的なカスタマイズ：エラーメッセージの装飾

デフォルトのままでも機能は果たしますが、実際の現場ではデザインに合わせてHTMLの構造をカスタマイズすることが求められます。例えば、フォーム全体のエラーをリスト形式で表示したり、特定のCSSクラスを付与して強調したりする場合です。以下のサンプルコードでは、より実践的なフォーム構成とメッセージ表示の例を記述します。

{# ページ上部にまとめて通知を表示する共通パーツのイメージ #}
<div id="flash-messages">
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}
</div>

{# フォーム入力エリアの構成例 #}
<div class="container mt-5">
    {{ form_start(form, {'attr': {'class': 'needs-validation'}}) }}
        
        {# 全体エラーの表示 #}
        {% if form_errors(form) %}
            <div class="alert alert-danger">
                {{ form_errors(form) }}
            </div>
        {% endif %}

        <div class="form-group mb-4">
            <label for="user_name" class="form-label">ユーザー名</label>
            {# 個別のバリデーションエラー表示。エラーがある場合にクラスを切り替える例 #}
            {{ form_widget(form.name, {'attr': {'class': 'form-control ' ~ (form.name.vars.errors|length > 0 ? 'is-invalid' : '')}}) }}
            <div class="invalid-feedback">
                {{ form_errors(form.name) }}
            </div>
        </div>

        <button class="btn btn-primary">送信する</button>
    {{ form_end(form) }}
</div>

このように、form.name.vars.errors|length > 0といったTwigの構文を組み合わせることで、「エラーがある時だけ特定のCSSクラスを適用する」といった高度なスタイリングも可能になります。単にメッセージを出すだけでなく、入力フォーム全体の色を変えるなどの視覚的な工夫を凝らすことで、ユーザーはどこを修正すべきか一目で判断できるようになります。

コントローラ側での処理（復習）

Twigで表示を行うためには、当然ながらコントローラ側で適切にメッセージをセットしておく必要があります。PHP側での記述方法も再度確認しておきましょう。

public function submitForm(Request $request): Response
{
    $form = $this->createForm(UserType::class);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        // データの保存処理など
        $this->addFlash('success', 'データの更新に成功しました！');

        return $this->redirectToRoute('homepage');
    }

    // バリデーションエラー時はそのままフォームを再表示
    return $this->render('user/register.html.twig', [
        'form' => $form->createView(),
    ]);
}

このように、バリデーションエラーはフォームのインスタンス（$form）に自動的に保持されるため、特別なフラッシュメッセージとして扱う必要はありません。一方で、リダイレクトを伴う「成功時の通知」などはFlashメッセージとして明示的に追加するという使い分けが肝心です。

SEOとユーザーフレンドリーな設計

Webサイトの評価を高めるためには、検索エンジンに対する最適化（SEO）だけでなく、訪問したユーザーがストレスなく操作できる「アクセシビリティ」も重要です。エラーメッセージが不親切なサイトは離脱率が高まり、結果的に検索順位にも悪影響を及ぼす可能性があります。Twigの機能を使いこなし、具体的で分かりやすいエラーメッセージを表示させることは、間接的にSEO対策にもつながるのです。

例えば、エラーメッセージに具体的な修正案を提示したり、送信成功時に「何が完了したのか」をFlashメッセージで明示したりすることは、非常に有効な手段です。今回の解説を参考に、ぜひあなたのSymfonyプロジェクトでも、洗練された通知システムを構築してみてください。