Laravelでページ毎にロードするJavaScriptをいい感じにする

概要

Laravelのアプリケーションを作っている時に、JavaScriptを1つの大きなファイルにしてレイアウトファイルで読み込むのもいいが、JSファイルが大きくなったときのことを考慮して、ページ毎にロードするJavaScriptをディレクトリ構造からいい感じに分けたい。

実装方針

/ では public/js/top.js
/article/index では public/js/article/index.js
/article/show では public/js/article/show.js

上記のように public/js/${controller名}/${action名}.js といった階層構造(/ は例外)のJavaScriptを読み込むようにする。

実装

artisanコマンドでミドルウェアを作成する。

$ php artisan make:middleware LoadJavaScript

対象とする画面のルーティングに自作のMiddlewareを通るようにする。

app/Http/Kernel.php

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            /* この1行を追加 */
            \App\Http\Middleware\LoadJavaScript::class,
        ],
    ];

RequestオブジェクトからURIを取得していい感じに整形してview側で使えるようにする。
/ のみ直接指定する必要がある。

app/Http/Middleware/LoadJavaScript.php

<?php

namespace App\Http\Middleware;

use Closure;

class LoadJavaScript
{
    const JAVA_SCRITP_DIR = 'js';
    const JAVA_SCRIPT_EXTENSION = '.js';

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $requestRouteName = $request->route()->getName();

        if ($requestRouteName === null) {
            $scriptPath = 'top';
        } else {
            $scriptPath = str_replace('.', '/', $requestRouteName);
        }

        view()->share('scriptPath', self::JAVA_SCRITP_DIR . '/' . $scriptPath . self::JAVA_SCRIPT_EXTENSION);

        return $next($request);
    }
}

レイアウトファイルでJSをロードする。

layout.blade.php

<script src="{{ asset($scriptPath) }}"></script>

以上です。