[Laravel]Livewireでリアルタイム検索機能を作る
はじめに
Livewireでリアルタイム検索機能を作っていきます。
Livewireは、Laravelと統合できるPHPのフルスタックフレームワークで、リアルタイムのWebアプリケーションを構築するために設計されています。
環境
PHP 8.x
Laravel 10.x
MySQL 8.x
Livewire 3.x
tl;dr
- livewireをインストールする
- コンポネントを作成する
- コンポネントを読み込む
- 検索ロジックを設定する
-
search.blade.phpにビューを追加する
livewireをインストールする
composer require livewire/livewire
コンポネントを作成する
Livewireでは、各コンポーネントは独自のビューとロジックを持ち、独立して再利用できます。
php artisan make:livewire search
COMPONENT CREATED 🤙
CLASS: app/Livewire/Search.php
VIEW: resources/views/livewire/search.blade.php
_._
/ /o\ \ || () () __
|_\ /_| || || \\// /_\ \\ // || |~~ /_\
|`|`| || || \/ \\_ \^/ || || \\_
Congratulations, you've created your first Livewire component! 🎉🎉🎉
app/Livewire/Search.phpとresources/views/livewire/search.blade.phpを作成されました。
コンポネントを読み込む
作成したコンポネートをナビゲーションに読み込みます。
@livewire('search')
検索ロジックを設定する
検索用変数を作成し、検索結果を変数に代入します。
検索したいモデルとカラムも指定していきます。
<?php
namespace App\Livewire;
use App\Models\Post;
use Livewire\Component;
class Search extends Component
{
// 検索クエリ
public $search = "";
// 検索結果
public $results = [];
public function render()
{
if (strlen($this->search) >= 1) {
// Postモデルのtitleとbodyカラムを検索する
$this->results = Post::where(function ($query) {
$query->where('title', 'like', '%' . $this->search . '%')
->orWhere('body', 'like', '%' . $this->search . '%')
})->get();
}
return view('livewire.search');
}
}
search.blade.phpにビューを追加する
検索フォームと検索結果を表示するビューを追加します。
検索するモデルに合わせて検索結果の表示を設定します。
<div id="search">
<form action="/" >
<div>
<input wire:model.live.debounce.500ms="search" id="search" name="search" placeholder="キーワード" type="search">
@if (sizeof($results) > 0)
<ul>
@foreach ($results as $result)
<li class="flex-center break-all p-4">
<h3><a href="/posts/{{$result->id}}">{{$result->title}}</a></h3>
<span>{{$result->user->name}}</span>
</li>
@endforeach
</ul>
@endif
</div>
</form>
</div>
wire:model.liveは、Livewireコンポーネント内でテキスト入力フィールドやフォーム要素などのHTML要素とLivewireプロパティを結びつけるためのLivewireのディレクティブです。
このディレクティブを使用すると、ユーザーの入力が変更された際に、リアルタイムでLivewireプロパティを更新できます。
debounce.500msは、ユーザーがテキスト入力を行うたびに検索が即座に実行されないように遅延処理を追加します。ユーザーが入力を行った後、500ミリ秒間新しい入力がない場合、検索が実行されます。
リアルタイムの検索機能を実装する場合、ユーザーが入力するたびに検索を実行するのではなく、一時停止して過剰なリクエストを防ぎ、サーバーへのリクエストを抑えることができます。
早速検索してみます。
終わりに
Livewireでのリアルタイム検索でした。
初めてLivewireを使ってみました。Ajax処理を書かなく良いのと機能ごとにコンポネート化できるところ便利でした！
Discussion