Laravelで新規ページを作成してみる

目的
結論
手順

目的

resources/views/components 内のコンポーネントで、
単体で表示可能なものを表示してみる。

結論

Bladeについてもっと詳しくなると、
「x-」で始まるディレクティブへの理解を深めると、
Laravelを利用した表示について楽だと感じることができそう。

手順

コントローラを作成

$ ./vendor/bin/sail artisan make:controller TestComponents

作成したコントローラを開いて、次のように編集する。

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class TestComponents extends Controller
{
    public function showTestComponents() {
        return view('TestComponents');
    }
}

ビューを作成

resources/views/TestComponents.blade.php を新規作成し、次のように編集する。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app() -> getLocale()) }}">
    <head>
        <meta charset="utf-8">
        
        <title>TestComponents</title>

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <br><br>
        <x-primary-button>
            x-primary-button
        </x-primary-button>
        <br><br>
        <x-secondary-button>
            x-secondary-button
        </x-secondary-button>
        <br><br>
        <x-text-input>
            x-text-input
        </x-text-input>
        <br><br>
        <x-responsive-nav-link>
            x-responsive-nav-link
        </x-responsive-nav-link>
        <br><br>
        <x-nav-link>
            x-nav-link
        </x-nav-link>
        <br><br>
        <x-input-label>
            x-input-label
        </x-input-label>
        <br><br>
        <x-danger-button>
            x-danger-button
        </x-danger-button>
        <br><br>
        <x-application-logo>
            x-application-logo
        </x-application-logo>
        <br><br>

    </body>
</html>

ルートを作成

routes/web.php に下記を追記する。

use App\Http\Controllers\TestComponents;
Route::get('/TestComponents', [TestComponents::class, 'showTestComponents']) -> name ('TestComponents');

下記コマンドで念のために、有効になっているルート設定の一覧を表示して確認しても良いかもしれない。

$ ./vendor/bin/sail artisan route:list

最後に確認

http://localhost/TestComponents にアクセスすると次のように表示された。