top of page
執筆者の写真英伸 後

Laravel/Breeae の仕組み ~2 /registerの構成(GET)

URLでhttp://[URL]/register を指定するとユーザー登録の初期画面が表示されます。

 

1.Route::get('/register',

まず、わかりやすいほうから/registerのRoute::getを確認します。

Breeze関連のRouteはroutes/auth.php に定義されています。

※Route::get/postを囲んでいるRoute::middleware('guest')は適用されるMiddlewareを指定しています。

 BreezeのMiddlewareはLaravel10まではapp/Http 配下に作成されていたのですが、11からはbootstrap/app.phpに定義されています。

デフォルトのbootstrap/app.php (定義はされているが内容はブランク)


/registerのRouteは2つ

Route::getは[RegisteredUserController::class, 'create']に

Route::postは[RegisteredUserController::class, 'store']にルーティングされています


[RegisteredUserControllerを確認してみます。


2.Route::get('/register', のController

create()は単純にviews/auth/register.blade.php をreturn しています。


3. register.blade.php と関連Blade

・auth/register.blade.php コンテンツの核をなすファイルです。子View -(A)

・layouts/guest.blade.php (A)が継承しているレイアウトです。親View -(B)

・components/input-label.blade.php (A) に挿入されるパーツです -(C)


auth/register.blade.php 全景


auth/register.blade.php  前半

Laravel7以降@を使ったディレクティブに代わって<x- >(Xタグ)が用いられるようになってきています。

①<x-guest-layout> は@extends(layout.guest)と同じ意味。layouts/guest.blade.php を親Viewとして継承するということになります。


guest.blade.php

この{{ $slot }}の部分にregister.blade.phpの内容がマージされます。

ほぼ先頭にある<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">の str_replace('_', '-', app()->getLocale())はconfig/app.php のlocaleを引用しているようです。最終的なhtmlでここは'ja'になります。

@vite(['resources/css/app.css', 'resources/js/app.js']) はそれぞれLaravel/ui経由で引用を行うCSSとJavaScriptのパスを指定しています。

Laravel11のuiはvite。このvite経由でcssはtailwind、JSはAlpineを引用して、コードの簡略化を図っているようです。この辺の仕組みについてはまだ学習が追い付いていないので解説は別途。


② <form method="POST" action="{{ route('register') }}"> の"{{ route('register') }}"は'/register'と同じ意味と思われますが、なぜ関数形式の表記になっているのかは現時点で不明です。

③ @csrf は{{ csrf_field() }}ヘルパ関数と同じ意味です。

④ <!-- --> はブレード内におけるコメントアウトの記述です。

⑤ <x-input-label for="name" :value="__('Name')" />はディレクティブ@component('components.input-label')と同じ意味です。components/input-label.blade.php をコンポーネンツとして引用。

 タグの中にあるValue を変数としてinput-label.blade.phpに渡しています。__('Name')はヘルパ関数の形式をとっています。ここに'Name'といれることで日本語'名前'への変換がされるようです。この仕組みについては別途。


components/input-label.blade.php

@propsは属性の初期値を定義するディレクティブです。ここではregister.blade.phpの<x-input-label for="name" :value="__('Name')" />から :value="__('Name')が渡されています。

{{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }} の$attributes は(A)のxタグに記述されている属性(for="name" :value="__('Name')")が変数として渡されたものです。

この$attributesに属性'block font-medium text-sm text-gray-700'がマージされています。

??は「null 合体演算子」というもの。チェックしたい変数の後に??をつけて、その後にチェックしたい値がnullだった時の処理を書きます。

{{ $value ?? $slot }} $value にデータがはいっていれば$value なければ$slot。$value は@propsで指定された'value' でこの場合は(A)のxタグにある'Name'がvalue に渡されています。

個々がNulldeあった場合の$slotの意味は現時点では不明。(A)にブランクを戻すということか?


⑥<x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />も@component('components.text-input')と同じ意味です。


components/text-input.blade.php

@props(['disabled' => false]) でこのコンポーネントの初期値として$disabled='false'が与えられます。

{{ $disabled ? 'disabled' : '' }} は@if ディレクティブの代わりとなる三項演算子です。$disabledにデータが入っていれば$disabled='disable'、Nullなら$disabled=''となります。


⑦<x-input-error :messages="$errors->get('name')" class="mt-2" />も@component('components.input-error')と同じ意味です。

 変数message には$errors->get('name')の結果が入ります。$errors はValidationの結果としてのエラー情報(配列)。Validationはstore()で行われますが、ここで解説しているRoute::get()はcreate()に回りますので$errorsには何も入りません。


components/input-error.blade.php

@props には⑦で渡された$messagesがセットされていますが、ここではnullです。

なので、@if ($messages)の内容はここでは展開されません。

なお、@foreach ((array) $messages as $message) $messagesに収容されたメッセージを一つ一つひも解くディレクティブです。


⑧Email Address 以降の記述もこれまでの書式に従っています。


auth/register.blade.php  後半

以上のblade.php によるレンダリングの結果はブラウザ上で以下のhtmlに展開されています。



本稿は以上です。次回は「3.registerの構成(POST)」の解説を行います。









閲覧数:7回0件のコメント

最新記事

すべて表示

Commentaires


bottom of page