【Laravel Livewire】Eloquentモデルとバインドする

こんにちは。今回はLivewireでEloquentモデルとバインドする方法を解説していきます。

Eloquentとバインドするとは

Livewireは画面で入力した値を背後にあるサーバーサイドのクラスのプロパティとバインドすることができます。バインドに関しては次の記事で詳しく解説しています。

【Laravel Livewire】 値をバインドする

サーバーサイドのプロパティにEloquentのインスタンスを設定することで、画面で入力した値をダイレクトにEloquentに紐づけることができます。この機能によって、データの保存がより一層楽になるのでおすすめです。それでは早速解説していきます。

Eloquentとバインドする方法

Livewireコンポーネントを作成

まずはじめにLivewireコンポーネントを作成します。今回はUserモデルの情報を登録する画面を作るのでコンポーネントをUserFormという名前にします。artisan make:livewire UserFormを実行しましょう。

$ php artisan make:livewire UserForm
 COMPONENT CREATED  🤙

CLASS: app/Http/Livewire/UserForm.php
VIEW:  resources/views/livewire/user-form.blade.php

サーバーサイドを作成

サーバーサイド側の処理を始めに記述します。Userモデルをuseして使用できるようにします。次にクラス変数$userを定義し、コンストラクタで生成したUserモデルを$userに代入します。

<?php

namespace App\Http\Livewire;

use App\Models\User;

class UserForm extends Component
{
    public $user;

    public function __construct()
    {
        $this->user = new User();
    }

    public function render()
    {
        return view('livewire.user-form');
    }
}

次にバリデーションルールを設定しましょう。$rulesに連想配列形式で記述します。Userモデルのプロパティはドットでつなげることでアクセスできます。今回はname, email, passwordプロパティについてバリデーションを作成しました。

    protected $rules = [
        'user.name' => 'required',
        'user.email' => 'required',
        'user.password' => 'required|min:8'
    ];

最後に登録処理を記述します。バリデーションは$this->validateで実行できます。入力値に不備がある場合は、validateメソッドで処理が中断されます。バリデーションのあとに登録処理を記述します。$this->userがeloquentモデルなので、$this->user->save()で保存ができます。

    public function save() 
    {
        $this->validate();

        $this->user->save();
    }

一連のコードを記述後、UserForm.phpのコードは以下のようになります。

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\User;

class UserForm extends Component
{
    public $user;

    public function __construct()
    {
        $this->user = new User();
    }

    protected $rules = [
        'user.name' => 'required',
        'user.email' => 'required',
        'user.password' => 'required|min:8'
    ];

    public function save() 
    {
        $this->validate();

        $this->user->save();
    }

    public function render()
    {
        return view('livewire.user-form');
    }
}

画面を作成

画面を作っていきます。ユーザー名、メールアドレス、パスワードを登録する単純なフォームです。それぞれのテキストボックスはwire:model要素でサーバーサイドとバインドしています。このときもEloquentのプロパティにアクセスする際はドットで繋げます。例えばユーザー名はuser.nameとなります。formのsubmit時にsaveメソッドを呼び出しています。

<div>

    <form wire:submit.prevent="save">
        <p>ユーザー名</p>
        <input type="text" wire:model="user.name"><br>
        @error('user.name') <p>{{ $message }}</p> @enderror

        <p>メールアドレス</p>
        <input type="text" wire:model="user.email"><br>
        @error('user.email') <p>{{ $message }}</p> @enderror

        <p>パスワード</p>
        <input type="password" wire:model="user.password"><br>
        @error('user.password') <p>{{ $message }}</p> @enderror

        <button type="submit">登録</button>
	</form>
</div>

最後、indexという名前でbladeを作り、作成したuser-form.blade.phpを読み込ませます。

<html>
    <head>
        @livewireStyles
    </head>
    <body>
        <livewire:user-form>

        @livewireScripts
    </body>
</html>

ブラウザからアクセスして確認

artisan serve実行後、ブラウザからアクセスしてみましょう。画面は次のようになります。

登録ボタンをクリックして、データが保存されていることを確認しましょう。

バリデーションが機能することも確認します。メールアドレスとパスワードに入力不備がある状態で登録をクリックすると、以下のようにメッセージが表示されます。※言語ファイルを日本語化していないので英語のメッセージになっています。

まとめ

今回はLivewireでEloquentモデルとダイレクトにバインドする方法を解説しました。色々な手間が省けるのでかなり生産性が良くなることを実感できたと思います。モデルの登録は基本この形で行うのが理想的だとおもいました。

Laravel

Posted by kobainmac