概要

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つのパターンを試してみました。いずれの方法も、それぞれのシチュエーションで効果的です。備忘録として記録しておき、今後の開発に役立てていきます。