【Laravel Livewire】リアルタイムユーザー検索

Laravel Livewire公式トップに設置されている

リアルタイムユーザー検索を実装してみます。（機能だけ）

Livewire | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

前提条件
Livewireコンポーネント作成
クラスファイル編集
ビューファイル編集
ルーティング
WEBサービス起動
ブラウザで確認

前提条件

Laravelプロジェクト作成済
Livewireインストール済
Userモデルが使用可能な状態

※Jetstreamをインストールすれば上記条件をクリアできます。

Livewireコンポーネント作成

まずは環境の確認をしていきます。

livewireがインストールされているか確認します。

composer show | grep livewire

OKですね。

artisan コマンドで livewire が利用可能か確認します。

php artisan list | grep livewire

OKですね。

では、コンポーネントを作成します。

php artisan make:livewire search-user

あ、コンポーネントの名称を間違えました。

「search-user」ではなく「search-users」です。

作成したコンポーネントを削除します。

php artisan livewire:delete search-user

コンポーネントを作成し直します。

php artisan make:livewire search-users

クラスファイル編集

app/Livewire/SearchUsers.php

を編集・保存します。

Livewire公式トップページにあるコードをコピペします。

コピペした後に

use App\Models\User;

を追記します。

公式のコードでは「User::search($this->search)」

となっていますが、Userモデルの編集が面倒なので、

クラスファイル内で解決します。

完成コードは次の通りです。

<?php

namespace App\Livewire;

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

class SearchUsers extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::where(
                'name',
                'LIKE',
                '%' . addcslashes($this->search, '%_\\') . '%'
            )->get(),
        ]);
    }
}

addcslashes()関数を使っている箇所は

次の記事を参考にしました

お前らのLike検索は間違っている (QueryBuilder/Eloquent) - Qiita

煽りタイトルすみません。 Laravelタグをつけてはいますが、特定の言語/フレームワークに限らない、Like検索時のエスケープの注意点についてお話します。 (@wand_ta 指摘ありがとうございます! 修正しました) 本記事の対象読者 ...

ビューファイル編集

resources\views\livewire\search-users.blade.php

を開いて編集・保存します。

Livewire公式トップページにあるコードをコピペします。

前回の記事でも書きましたが、

ビューファイルの内容は１組の<div></div>内に

全て書く必要があります。

完成形のコードは次の通りです。

<div>
    <input wire:model.live="search">

    @foreach ($this->users as $user)
        <div>{{ $user->name }}</div>
    @endforeach
</div>

ルーティング

routes/web.php

を開いて編集・保存します。

次のコードを追記します。

use App\Livewire\SearchUsers;

Route::get('/search-users', SearchUsers::class);

WEBサービス起動

前回の記事では、

resources/views/layouts/app.blade.php

を作成しましたが、今回は

Jetstreamインストール時に出来ているので割愛します。

sail でコンテナを起動します。

./vendor/bin/sail up

初回起動時なのでコンテナ群が生成されています。

ブラウザで確認

http://localhost/search-users

へアクセスします。

ぐはぁっ。Exceptionスローです。

ビューコンポーネントでのエラーですね。

「$usersなんてプロパティはみつからないよ。」

と言われています。

なんか変だと思ったんですよね。

ビューファイルで「$this->users」って箇所。

「$this->」は要らないですよね。

resources\views\livewire\search-users.blade.php

を次のように修正・保存します。

<div>
    <input wire:model.live="search">

    @foreach ($users as $user)
        <div>{{ $user->name }}</div>
    @endforeach
</div>

ブラウザをリロードしてみます。

表示されました。。

が、フォームだけでユーザー名がありませんね。

ユーザー登録していないので当然ですね。

では、適当にユーザー登録してからリロードしてみましょう。

表示されました。

味気ないので、少し表示と制御を盛ってみましょう。

resources\views\livewire\search-users.blade.php

を再度編集・保存します。

<div>
    <h1>Search Users:</h1>
    <input wire:model.live="search" placeholder="Search Users">

    @if (isset($users))
    @foreach ($users as $user)
        <div>{{ $user->name }} &lt;{{ $user->email }}&gt;</div>
    @endforeach
    @else
        <div>No users.</div>
    @endif

</div>

では、ブラウザをリロードしてみます。