目的
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 にアクセスすると次のように表示された。
