Alpine.js「どけ、livewire。切り替えは俺がやる」

livewireで開発をしていて
要素の表示,非表示を切り替える処理を書いたりしてると思います。

その場合、リクエストが返ってくるまでの少しのラグが気になったりする場合があります。

ミニマムな動的部分はalpine.jsを添えてサクサク動かしましょう

Alpine.jsとは

現代版jQuery的な立ち位置にいるJavascriptフレームワークです。
詳しく紹介している記事を添付します。

比較

要素の表示非表示する切替処理を
livewireとAlpine,js両方用意します

コード

PHP

class Sample0523 extends Component
{
    public $isShow;

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

Blade

<div>
    <div x-data="{isShow:false}" class="pt-3">
        <button type="button" class="btn btn-primary mb-3" @click="isShow= !isShow" wire:click="$toggle('isShow')">
            表示切替
        </button>
        <p x-show="isShow">Alpine.js表示</p>
        @if($isShow)
            <p>Livewire表示</p>
        @endif
    </div>
</div>

解説

コード	解説
@click="isShow= !isShow"	alpine.jsクリックイベント、x-on:click=とも書ける
x-data="{isShow:false}"	alpine.js変数宣言
x-show="isShow"	isShowがtrue時に要素を表示

ボタンをクリックして見てみましょう

おわり

jsを使った方が爆速なのは当然と言えば当然なのですが、alpine.jsはcdnで読み込んですぐ使えて
表記も簡潔なので使いやすいです。

livewireとalpine.jsは作者が同じなので連携がしやすいように色々と処理が用意されています

連携処理の紹介も書いていこうと思います。