Laravelの404ページをカスタマイズする方法

Laravelの404ページをカスタマイズする方法

Laravelは優れたフレームワークですが、ページが存在しない場合に表示される404ページのデフォルトの状態では非常に簡素でユーザーフレンドリーとは言えません。この記事では、Laravelの404ページをカスタマイズする方法を紹介し、ユーザーエクスペリエンスを向上させる方法を紹介致します。

viewファイルをカスタマイズする

Laravelでは、404ページのviewをカスタマイズすることができます。404ページのviewをカスタマイズするには、resources/views/errors/404.blade.php ファイルを作成する必要があります。このファイルが存在すれば、Laravelは自動的にそのファイルを使用して404ページを表示します。

resources/views/errors/404.blade.phpの例:

@extends('layouts.master')

@section('content')
    <h1>Error 404</h1>
    <p>お探しのページが見つかりませんでした。<p/>
@endsection

使用するviewファイルを変更する

Laravelは自動的に404ページのviewとして resources/views/errors/404.blade.php を使用するように設定されていますが、独自のファイルパスのviewファイル使用したい場合は、下記の様に設定することで独自のファイルパスのviewファイル使用sすることができます。

routes/web.php の例:

use Symfony\Component\HttpFoundation\Response;

Route::fallback(static fn () => response()->view('front::errors.404', [], Response::HTTP_NOT_FOUND));

HTTPステータスを404に設定するためにview()関数ではなく、response()を使用してviewを指定することに注意してください。

ホーム画面にリダイレクトする

404ページを表示する代わりにホーム画面などにリダイレクトしたい場合には、下記の様に設定します。

Route::fallback(static fn () => redirect()->to('/'));

静的ファイルを404ページの代わりとして配信する

HTMLファイルや画像ファイルなどを404ページとして表示したい場合は下記のような設定を行うことで可能です。

public/404.html に保存されたhtmlを404ページとして表示する例:

use Symfony\Component\HttpFoundation\Response;

Route::fallback(static function () {
    $path = public_path('404.html');

    if (file_exists($path)) {
        return response()->file($path)->setStatusCode(Response::HTTP_NOT_FOUND);
    }

    abort(Response::HTTP_NOT_FOUND);
});

Controllerを使用する

アクセスログを記録したり、URIによってリダイレクト先を変更したい場合など複雑なロジックが存在する場合、通常のルートと同様にControllerを使用することで記述が簡潔にできます。

ルート設定:

use App\Http\Controllers\FallbackController;

Route::fallback(FallbackController::class);

FallbackControllerの例:

namespace App\Http\Controllers;

use Illuminate\Http\Response;

class FallbackController extends Controller
{
    public function __invoke(): Response
    {
        // Do something...

        return response()->view('front::errors.404', [], \Symfony\Component\HttpFoundation\Response::HTTP_NOT_FOUND);
    }
}

おわりに

PHP7.4よりアロー関数が追加されたことによって、より簡潔なcallback関数が書けて良いなと思いました。