バリデーションエラーを表示させる方法には、複数のアプローチがあります。その内のどれを使うかは私たち開発者次第。自由に好きな方法を採れます。
本ページでは、エラーを表示する方法の一覧を、コード例・メリット・デメリット等併せご紹介します。
あなたがエラーを表示させる際、どの方法を採るかの参考にしていただければ幸いです。
$errors変数でまとめて表示
Laravelでの各ビュー実行時には、自動的に$errors変数が渡されます。この変数はMessageBagクラスのインスタンスで、バリデーションエラーの情報を保持しています。
便利なメソッドも多数用意されており、これを使いエラーを表示させることが可能です。
コード例
全てのコードをまとめて表示するコード例です。
@if ($errors->any())
<div class="error">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif1行目の@ifディレクティブでは、エラーが1つでも発生しているかを判定しています。
$errors->any()メソッドはエラーが存在する場合はtrue、そうでない場合はfalseを返します。
もしもエラーがある場合は、全てのエラーを書き出す処理に移ります。具体的には$errors->all()が全エラーの配列を返すため、@foreachループ処理で1つずつエラーを書き出します。
このコードをフォームの上の方に置いておけばエラーが全て出るので楽……という一面はありますね。
メリット
- 全てのエラーメッセージを一括で表示できる
- 完全コピペで他のフォームから持ってこられる
デメリット
- エラーが多くなると、フォーム項目が下に追いやられる
- エラー表示とエラー箇所が離れているため、エラー箇所が分かりづらい
- 特定のフィールドのエラーを表示する場合には不向き
$errors変数で特定のフォーム項目のエラーを表示
先ほども使用した$errors変数ですが、特定のフォーム項目のエラーを表示させる用のメソッドも用意されています。
コード例
@if ($errors->has('email'))
<div class="error">{{ $errors->first('email') }}</div>
@endifここでも@ifディレクティブによる条件分岐がされています。$errors->has(‘email’)で’email’というフォーム項目にエラーがあるかをbool値で取得し、分岐に利用しています。
もし’email’にエラーがある場合、2行目が実施されます。$errors->first(‘email’)は、’email’というフォーム項目で発生している最初のエラーを取得します。
メリット
- 特定のフォーム項目の近くにエラーを表示することができる
デメリット
- 全てのフォーム項目に同じような記載をする必要がある
- フォーム項目の名称が変われば、指定方法も2箇所分変更になる
- コピペでの貼り付け時、ミスに繋がることも（1箇所変更漏れなど）
＠errorディレクティブで特定のフォーム項目のエラーを表示
Laravelで使用されているテンプレートエンジンであるBladeは、＠errorディレクティブという、エラー表示の機能が備わっています。
比較的完結に書けるので、私は好んでこの方法を採用しています。
コード例
@error('name')
<div class="error">{{ $message }}</div>
@enderror@errorディレクティブは、@ifディレクティブと似たように、条件分岐で使えます。
@error(‘name’)とした場合、’name’にエラーがある場合のみその中の処理を行います。ここでは２行目のエラー表示になりますね。
さて、ここで見慣れないのは{{ $message }}という、定義していない変数を表示していることです。
$messageは、@errorディレクティブを使用した際使える変数です。直前に利用した名称のエラーを$messageに自動的に入れてくれるため、これでエラーが表示できます。
メリット
- 特定のフォーム項目の近くにエラーを表示することができる
- コピペでの貼り付け時に比較的楽（修正が1箇所のみ）
デメリット
- 全てのフォーム項目に同じような記載をする必要がある
【応用編】Bladeコンポーネントを使って楽をする
最後に、本ページの中では応用的なものをご紹介します。これまでのように$errors変数を利用した方法ですが、違った実装方法を採ることが可能です。
具体的には、Bladeコンポーネントを使うことでより簡潔にエラーを表示させられます。
コンポーネントの作成
コマンドラインで、新しいBladeコンポーネントを作成します。以下の場所にファイルを作成してください。
resources/views/components/error-message.blade.php
作成したerror-message.blade.phpを編集します。
@props(['for'])
@error($for)
<span class="error">{{ $message }}</span>
@enderrorここでは、@propsディレクティブを使用してforという名前の属性を受け取ることができます。このfor属性は、バリデーションエラーをチェックするフォーム項目名を示しています。
コンポーネントの利用
このコンポーネントを使用してエラーメッセージを表示します。
<x-error-message for="name" />これだけでfor=””の中で指定するエラーを表示させることが可能です（ここではname）。
コンポーネントは自動で読み込まれます。かなりスッキリと表記になりますね。
メリット
- 特定のフォーム項目の近くにエラーを表示することができる
- コードがスッキリし、同じような記載をしても見通しが良くなる
- エラー時のタグやクラスを一元管理できるので修正に強い
デメリット
- 最初に設定するのがちょとだけ手間
- コンポーネントを使いこなす学習コスト
- 慣れないうちはコンポーネントのコードが読みづらい
コンポーネントは非常に強力で便利な機能なので、積極的に使っていきたいですね！
まとめ
以上、LaravelのBladeでエラーを表示する方法一覧でした。
Webアプリケーションでは必ずと言って良いほどエラーは表示するため、知識は万全にしておきたいところですね。
本ページのコードを利用し、実践的にエラー表示させた例を以下でご紹介しています。興味のある方はご覧ください。
なお、全てにおいて言えることですが、HTML/CSSの知識もあるとベターです。HTMLで適切にクラスを指定し、CSSで見栄えを整えると綺麗なエラー表示が可能です。
コメント