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

こんにちは。今回はLivewireの基本となる値のバインドについて解説します。

値のバインドとは

Livewireではartisan make:livewireコマンドで１つコンポーネントを作成すると、２つのファイルがセットで作成されます。１つはUIを記述するbladeファイル、もう１つはサーバーサイドでビジネスロジックや、データベースアクセスを行うファイルです。

機能を作り込むには、UIで入力したデータをサーバーサイドに渡す必要があります。つまり２つのファイル間で値の受け渡しをしなくてはなりません。この受け渡しをしてくれる機能が値のバインドです。例えばnameという項目に入力するためのテキストボックスが画面にあったとします。ユーザーはnameに任意のデータを入力します。すると値のバインディング機能が働き、入力したデータがサーバーサイドに転送されます。転送のタイミングは、データ入力時、データ入力してフォーカスを外れたとき、などいくつか設定可能です。

値のバインドを作る

値のバインドのイメージができたところで、作り方を見ていきましょう。

まずは適当にコンポーネントを作成します。artisan make:livewireを実行しましょう。今回は適当にtestという名前で作ります。

$ php artisan make:livewire test
 COMPONENT CREATED  🤙

CLASS: app/Http/Livewire/Test.php
VIEW:  resources/views/livewire/test.blade.php

サーバーサイドのファイルに$testというプロパティを作成します。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Test extends Component
{
    public $test = '';

    public function render()
    {
        return view('livewire.test');
    }
}

UI側のファイルにテキストボックスを作り、その属性にwire:modelを定義します。この定義が値のバインドになります。wire:model="test"と記述することで、testプロパティとバインドしたことになります。このテキストボックスに入力した値は即時、サーバーサイドのtestプロパティに転送されます。その動作を確認するためにh1属性でtestプロパティを表示します。

<div>
    <input type="text" wire:model="test">
	  <h1>{{ $test }}</h1>
</div>

作成したコンポーネントを任意のbladeに埋め込みます。今回はindex.blade.phpという名前でファイルを作り、<livewire:test>で埋め込みました。

<html>
    <head>
		    @livewireStyles
    </head>
	  <body>
        <livewire:test>

        @livewireScripts
    </body>
</html>

ブラウザからアクセスすると以下のような画面となります。以下の画面ではfoobarとテキストボックスに入力したら下のh1属性foobarと表示されます。一度テキストボックスに入力された値がサーバーサイドのtestプロパティに渡り、更新されたtestプロパティがh1要素に表示されています。

データを転送するタイミング

wire:modelでは内部的に発生するinputイベントの単位でサーバーサイドにデータを送信しています。テキストで１文字入力するたびにリクエストが発生しているということです。この作りにするとかなり多くのリクエストが発生することになります。リクエストを抑えるためにデータを転送するタイミングを設定する事ができます。

updateイベント単位で送信

wire:model.lazyを使用すると、updateイベント単位でデータを送信することができます。テキストボックスに値を入力し終わり、フォーカスが外れたタイミングです。リクエスト数を抑えたいのであればこれぐらいの単位に設定したほうが良いかもしれません。

<div>
    <input type="text" wire:model.lazy="test">
	<h1>{{ $test }}</h1>
</div>

まとめ

今回は値のバインドについて解説しました。

  • 値のバインドとは、UIで入力したデータをサーバーに転送する設定
  • 値のバインドを使うにはinput要素にwire:modelを設定する
  • wire:modelはinputイベント（１文字入力）単位でデータを送信する
  • wire:model.lazyを使うことでupdateイベント（フォーカスアウト）単位でデータを送信する

値のバインドはlivewireの基本機能なのでぜひとも抑えておきたい機能です。

Laravel

Posted by kobainmac