laravel8 + livewireを使って、react/nodejsを使わずにphpだけでSPA(ajaxで画面遷移しないwebアプリ)を作ってみる

参考URL
https://reffect.co.jp/laravel/laravel-livewire

1, 適当な名前(counter)のlivewireコンポーネントを作る

php artisan make:livewire

1	php artisan make:livewire

app/Http/Livewire/Counter.php
resources/views/livewire/counter.blade.php
二種類のファイルが生成される

2, 好きなbladeファイル(welcome.blade.php)に記述すると、内容が表示される(コンポーネント)

    @livewireStyles
    <livewire:counter>
    @livewireScripts

@livewireStyles

<livewire:counter>

@livewireScripts

3, app/Http/Livewire/Counter.phpに処理を記述。ユーザ名を入力したら途中でも検索される機能を作ってみる

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\User; // 追加

class Counter extends Component
{
    // データバインド変数
    public $keyword = '';

    // 画面にデータを渡す
    public function render()
    {
        return view('livewire.counter', [
            'users' => User::where('name','like', "%$this->keyword%")->orderby('created_at','desc')->get(),
        ]);
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\User; // 追加

class Counter extends Component

{

// データバインド変数

public $keyword = '';

// 画面にデータを渡す

public function render()

{

return view('livewire.counter', [

'users' => User::where('name','like', "%$this->keyword%")->orderby('created_at','desc')->get(),

]);

}

4, resources/views/livewire/counter.blade.phpに、どう表示するかを記述。ユーザ名を入力したら途中でも検索される機能を作ってみる

<div>
    <h2>ユーザ検索</h2>
    <input type="text" wire:model="keyword" >
    
    <h2>ユーザー一覧({{$users->count()}}人)</h2>
    @foreach($users as $user)
        {{ $user->created_at }}
        <b>{{ $user->tag_word }}</b>
        <br>
    @endforeach
</div>

<div>

<h2>ユーザ検索</h2>

<h2>ユーザー一覧({{$users->count()}}人)</h2>

@foreach($users as $user)

<br>

@endforeach

</div>

たったこれだけの記述で、SPA(ajaxで画面遷移しないwebアプリ)が作れる。かんたん、かんたん
でも、細かい事をやろうとすると、色々と出来なかったりするんだろうな…。

関連記事