【Laravel】Bladeファイルに個別ページのjs・CSSファイルを追記する方法｜DAD UNION

viewのBladeファイルに個別ページのjsファイルやCSSファイルを追記する方法をご紹介します。
全ページ共通のjsファイルやCSSファイルは全体のbladeファイルに記述すればよかったのですがページ毎に異なるjsファイルやCSSファイルの追記方法が単純に直接記述では無かったのでご紹介します。

全ページ共通（全体）のbladeファイルヘッダーの記述（例：layouts/app.blade.php）

※全ページ共通（全体）のbladeファイル内のヘッダー箇所の記述です。ここにGA4タグやサイト全体のjsファイルやcssファイルを記述します。
　全ページ共通（全体）のbladeファイル内に個別ページ（bladeファイル）に出力させるjsファイル用の記述「@stack(‘scripts’)」とcssファイル用の記述「@stack(‘styles’)」を追記します。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>ページタイトル</title>

    <script src="{{ asset('js/common.js') }}" defer></script>
    @stack('scripts')

    <link href="{{ asset('css/common.css') }}" rel="stylesheet">
    @stack('styles')
</head>
<body>

～

</body>
</html>

個別ページ（bladeファイル）の記述（例：top.blade.php）

※ページ毎に異なるjsファイル（top.js）やCSSファイル（top.css）がある場合、全ページ共通（全体）のbladeファイル内に用意した「@stack(‘scripts’)」「@stack(‘styles’)」の「scripts」と「styles」を使用し、「@push(‘scripts’)」と「@push(‘styles’)」を「@endpush」で以下の様に間で挟んで記述することで個別ページ用に異なるjsファイルやCSSファイルを追記できます。

@extends('layouts.app')

@push('scripts')
<script src="{{ asset('js/top.js') }}" defer></script>
@endpush

@push('styles')
<link href="{{ asset('css/top.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="toppage">

～

</div>
@endsection

※流用される場合は自己責任でお願いします。