概要
Laravelを使用してアプリケーションを開発する際、エラーハンドリングとユーザー向けメッセージの表示は非常に重要です。ここでは、実際に私が写真アップロード機能を実装した際に試したエラーハンドリングとメッセージ表示の2つの方法について、備忘録としてまとめます。
1. バリデーションの実装
アップロードされたファイルやフォーム入力のバリデーションをLivewireコンポーネントで実装しました。
public function save()
{
$this->validate([
'photo' => 'required|image|max:10240', // 最大10MBの画像
'site_id' => 'required|exists:sites,id',
'part' => 'required|in:選択1,選択2,選択3',
'photo_date' => 'required|date',
]);
// 省略: 画像のリサイズと保存処理
session()->flash('message', '写真がアップロードされました。');
$this->reset(['photo', 'site_id', 'part', 'photo_date']);
}
ポイント: validate() メソッドを使用して、ユーザーの入力が正しいかをチェックしています。バリデーションエラーが発生した場合、自動的にエラーメッセージが表示されます。
2. 成功メッセージの表示方法
パターン1: 閉じるボタン付きのメッセージ
保存処理が成功した場合、ユーザーに通知するためのメッセージを表示するようにしました。メッセージには閉じるボタンを追加しています。
@if (session()->has('message'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('message') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
備忘ポイント: session()->flash() を使って、一時的なメッセージを設定し、Bladeテンプレート内で表示します。Bootstrapの alert-dismissible クラスを使うことで、メッセージに「閉じる」ボタンを追加し、ユーザーが自身のタイミングでメッセージを閉じることができます。
パターン2: 入力フォームの下にエラーメッセージを表示
エラーメッセージをユーザーが入力したフォームの下に直接表示することで、どのフィールドに問題があったかを明示します。
<input type="text" name="photo_date" class="form-control" />
@error('photo_date')
<small class="text-danger">{{ $message }}</small>
@enderror
備忘ポイント: エラーメッセージを特定の入力フィールドの下に表示することで、ユーザーがエラーの原因をすぐに理解できるようにしています。@error ディレクティブを使用すると、特定のフィールドに関連するエラーメッセージを簡単に表示できます。
3. 実装時の工夫点
-
パターン1: ユーザーの操作性を考慮
- 閉じるボタンを設置することで、ユーザーがメッセージの表示を自身で制御できるようにしました。これにより、重要な情報を見逃さないようにできます。
-
パターン2: エラーメッセージの明確な表示
- エラーの発生箇所が具体的に分かるようにすることで、ユーザーが修正すべきフィールドを迅速に特定できるようにしています。
結論
エラーハンドリングとメッセージ表示の方法には様々なパターンがあります。今回は、ユーザーの利便性を考慮して、閉じるボタン付きメッセージと入力フォームの下にエラーメッセージを表示する2つのパターンを試してみました。いずれの方法も、それぞれのシチュエーションで効果的です。備忘録として記録しておき、今後の開発に役立てていきます。