Laravel Livewire公式トップに設置されている
リアルタイムユーザー検索を実装してみます。(機能だけ)
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_realtime_search-1024x431.png)
![](https://macocci7.net/blog/wp-content/uploads/cocoon-resources/blog-card-cache/b19aed21c2592180278960544da4721b.png)
前提条件
- Laravelプロジェクト作成済
- Livewireインストール済
- Userモデルが使用可能な状態
※Jetstreamをインストールすれば上記条件をクリアできます。
Livewireコンポーネント作成
まずは環境の確認をしていきます。
livewireがインストールされているか確認します。
composer show | grep livewire
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_composer_show.png)
OKですね。
artisan コマンドで livewire が利用可能か確認します。
php artisan list | grep livewire
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_php_artisan_list.png)
OKですね。
では、コンポーネントを作成します。
php artisan make:livewire search-user
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_php_artisan_make_livewire_searchuser.png)
あ、コンポーネントの名称を間違えました。
「search-user」ではなく「search-users」です。
作成したコンポーネントを削除します。
php artisan livewire:delete search-user
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_php_artisan_livewire_delete.png)
コンポーネントを作成し直します。
php artisan make:livewire search-users
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_php_artisan_make_livewire_searchusers.png)
クラスファイル編集
app/Livewire/SearchUsers.php
を編集・保存します。
Livewire公式トップページにあるコードをコピペします。
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_official_top_class.png)
コピペした後に
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()関数を使っている箇所は
次の記事を参考にしました
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgxJThBJUU1JTg5JThEJUUzJTgyJTg5JUUzJTgxJUFFTGlrZSVFNiVBNCU5QyVFNyVCNCVBMiVFMyU4MSVBRiVFOSU5NiU5MyVFOSU4MSU5NSVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSU4NCVFMyU4MiU4QiUyMCUyOFF1ZXJ5QnVpbGRlciUyRkVsb3F1ZW50JTI5JnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz0xODk3NzEwMjg4ODI2NzkzODYzOGM3YWRlNjhkM2QyNg&mark-x=142&mark-y=151&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFrZV8zJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kYTUzNTgzODYzY2M1ZjVhYzBmYWEzN2JjMWE5ODcxNw&blend-x=142&blend-y=491&blend-mode=normal&s=5bf9d0656238a445ca172a55c89cd894)
ビューファイル編集
resources\views\livewire\search-users.blade.php
を開いて編集・保存します。
Livewire公式トップページにあるコードをコピペします。
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_official_top_view.png)
前回の記事でも書きましたが、
ビューファイルの内容は1組の<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);
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_routing.png)
WEBサービス起動
前回の記事では、
resources/views/layouts/app.blade.php
を作成しましたが、今回は
Jetstreamインストール時に出来ているので割愛します。
sail でコンテナを起動します。
./vendor/bin/sail up
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_sail_up.png)
初回起動時なのでコンテナ群が生成されています。
ブラウザで確認
- http://localhost/search-users
へアクセスします。
![](http://macocci7.net/blog/wp-content/uploads/2024/01/livewire_browser_exception01-1.png)
ぐはぁっ。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>
ブラウザをリロードしてみます。
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_browser_no_users.png)
表示されました。。
が、フォームだけでユーザー名がありませんね。
ユーザー登録していないので当然ですね。
では、適当にユーザー登録してからリロードしてみましょう。
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_browser_users.png)
表示されました。
味気ないので、少し表示と制御を盛ってみましょう。
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 }} <{{ $user->email }}></div>
@endforeach
@else
<div>No users.</div>
@endif
</div>
では、ブラウザをリロードしてみます。
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_browser_users02.png)
ほんの少しだけ盛れました。
では、検索キーワードを入力して動作確認してみます。
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_browser_users03.png)
「h」を入力した直後に「hoge」と「huga」に絞られましたね。
ユーザー名についてあいまい検索をしているので、
「o」を入れたら「hoge」と「piyo」になる筈です。
![](https://macocci7.net/blog/wp-content/uploads/2024/01/livewire_browser_users04.png)
OKですね。
今回はここまでです。お疲れさまでした。
コメント