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

生徒

「Laravelでフォームを作ったときに、入力エラーがあったらユーザーに教えたいんですが、どうやってエラーを表示すればいいですか？」

先生

「その場合は、Bladeテンプレートで@errorディレクティブを使うと簡単にバリデーションエラーを表示できますよ。」

生徒

「@errorって何ですか？どうやって使えばいいんですか？」

先生

「それでは、Laravelでのエラーメッセージの表示方法を一緒に見ていきましょう！」

1. @errorディレクティブとは？

Laravelの@errorディレクティブは、フォームの入力バリデーションでエラーが発生した場合に、そのエラーメッセージを表示するための特別な記述方法です。

Bladeテンプレート内で、入力項目の名前を指定して使います。

例えば、フォームで「名前」の入力が必須なのに空欄だった場合、エラーメッセージを表示するには以下のように書きます。


@error('name')
    <div class="text-danger">{{ $message }}</div>
@enderror

このように書いておくと、「name」フィールドにエラーがあるときだけ、エラーメッセージが表示されます。

2. バリデーションの仕組みを知っておこう

Laravelでは、フォームから送られたデータをチェック（バリデーション）する仕組みが用意されています。例えば「名前は必須」「メールアドレスの形式が正しいか」といったチェックです。

コントローラでバリデーションを行い、もし失敗すると、元のページに戻され、エラーメッセージがセッション（記憶のようなもの）に自動で保存されます。


$request->validate([
    'name' => 'required',
    'email' => 'required|email',
]);

このように書くだけで、Laravelが自動的に入力チェックしてくれます。

3. フォームと@errorの組み合わせ例

実際のフォームとエラーメッセージの表示を組み合わせてみましょう。


<form method="POST" action="/submit">
    @csrf
    <div class="mb-3">
        <label for="name" class="form-label">名前</label>
        <input type="text" name="name" class="form-control" id="name" value="{{ old('name') }}">
        @error('name')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

この例では、エラーがあると赤い文字でメッセージが表示され、以前の入力内容もold('name')で復元されます。

4. $message変数とは？

@errorディレクティブの中で使える$message変数には、Laravelが自動で用意したエラーメッセージが入っています。

たとえば「名前は必須です」といった日本語のメッセージです。

このメッセージはLaravelの翻訳ファイルで設定されており、日本語環境であれば自動的に日本語で表示されます。

5. 他の入力項目にも使える

@errorディレクティブは、どの項目にも使えます。以下のように、メールアドレスにも適用できます。


@error('email')
    <div class="text-danger">{{ $message }}</div>
@enderror

これにより、どの入力フィールドにも簡単にエラーメッセージを表示できます。

6. 複数のエラーがある場合は？

複数の入力項目にエラーがある場合でも、@errorはそれぞれの項目に対して個別に表示されるため安心です。

各入力項目の下にそれぞれの@errorを用意しておけば、正しく表示されます。

7. CSSを使ってエラー表示を分かりやすく

BootstrapなどのCSSフレームワークを使えば、エラーの見た目を整えることができます。

例えば、エラーがあるときに枠線を赤にするには、is-invalidというクラスを条件付きでつけると便利です。


<input type="text" name="name"
       class="form-control @error('name') is-invalid @enderror"
       value="{{ old('name') }}">

これで、エラーがあるときは自動的に赤くなり、ユーザーにもわかりやすくなります。

まとめ

Laravelの@errorディレクティブは、フォーム入力時のエラーを的確にユーザーへ伝えるために欠かせない重要な仕組みであり、初心者でも扱いやすい柔軟な構文です。今回の記事では、@errorの基本的な使い方から、実際のフォームとの組み合わせ、さらにメッセージ変数の扱い方、複数項目のエラー管理、CSSとの併用による視覚的な改善方法まで、幅広く理解を深めることができました。フォームはどのアプリケーションでも多く利用されるため、エラー表示を正しく行えることはユーザー体験の向上に直結します。特に、個別項目ごとにエラーを表示できる構造は、ユーザーが自分のどの入力に問題があるかを直感的に理解できるため、正しいフォーム送信へ導く大切な役割を果たします。また、Laravelのバリデーション機能と自然に連携できるため、コントローラ側のバリデーションでエラーが発生した場合でも、自動的にセッションへ保存されて表示される仕組みが整っています。このように、見た目の改善と実装のシンプルさを両立できる点は、Laravelの強みであり、学習者にも開発者にも安心して扱える構造になっています。また、BootstrapなどのCSSフレームワークと組み合わせることで、入力欄に赤枠をつけたり、エラーメッセージを目立たせたりと、視覚的にユーザーへ正しい情報を伝える工夫もできます。これにより、エラーをただ表示するだけでなく、「どのように修正すればよいか」が明確に伝わり、操作性を向上させる効果があります。さらに、old()関数と併用することで、バリデーション失敗時でもユーザーの入力内容を保持できるため、再入力の手間を減らし、利便性を高めることができます。今回学んだ内容を実際のプロジェクトに適用すれば、ユーザーに優しいフォーム画面が作れるだけでなく、開発の見通しも大きく改善されます。エラー表示まわりの仕組みを整えることは信頼性の高いアプリケーション構築に欠かせないため、ぜひ繰り返し触れながら実践的に身につけていきましょう。@errorディレクティブは、一見小さな構文に見えますが、アプリケーション全体の品質に与える効果は非常に大きく、正しく理解しておくことで、今後の開発に大きく役立つ知識となります。

エラー表示をより深く理解するサンプルコード

ここでは、Bootstrapと@errorを組み合わせた実用的なフォームの例を紹介します。視覚的にもわかりやすいエラーメッセージ表示を実現できます。


<form method="POST" action="/register">
    @csrf

    <div class="mb-3">
        <label for="name" class="form-label">名前</label>
        <input type="text"
               name="name"
               id="name"
               class="form-control @error('name') is-invalid @enderror"
               value="{{ old('name') }}">
        @error('name')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="mb-3">
        <label for="email" class="form-label">メールアドレス</label>
        <input type="email"
               name="email"
               id="email"
               class="form-control @error('email') is-invalid @enderror"
               value="{{ old('email') }}">
        @error('email')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <button type="submit" class="btn btn-primary">登録</button>
</form>

入力ごとに@errorを設置しておくことで、どの項目に問題があるのか一目で理解できる画面を実現できます。また、Bootstrapのis-invalidクラスとの組み合わせにより、スタイリング無しでも綺麗な赤枠表示ができ、非常に実用性の高い構成になります。

先生と生徒の振り返り会話

生徒

「@errorってすごく便利ですね！項目ごとにエラーを表示できるから、フォームの使いやすさが一気に上がります。」

先生

「そうなんです。Laravelではバリデーションとエラー表示が連動しているので、コードも簡潔になり、ユーザーにも親切な設計ができます。」

生徒

「Bootstrapと組み合わせると、赤枠やエラーテキストも自動で整うので便利ですね。」

先生

「見た目の改善はユーザー体験に直結します。丁寧にエラー表示を作ることで、アプリケーションがより信頼されるものになりますよ。」

生徒

「今日学んだ内容を使って、自分のフォームももっとわかりやすく改善してみます！」