Untitled - HackMD

LiveWireを触ってみる

チュートリアルページ

https://laravel-livewire.com/docs/2.x/quickstart

LiveWireのインストール

headタグの最後に@livewireStylesを入れる
bodyタグの最後に@livewireScriptsを入れる。

<!doctype html>

<html lang="en">

<head>
    @livewireStyles
</head>

<body>
    <h1>test</h1>
    @livewireScripts
</body>
</html>

コンポーネントを作成する

php artisan make:livewire XXXX

bladeとクラスが作成される

コンポーネントを使用する

以下の書式で読み込める

<livewire:counter />

コンポーネントの処理を呼び出す

wire:click属性でコンポーネントの処理を呼び出せる。

<button wire:click="increment">+</button>

実際にクリックするとajaxでPOSTリクエストを送信する。
送信時に、コンポーネントの状態をまるごと送信する。
レスポンスは処理実行後のコンポーネントの状態が帰ってくる。

LivewireJavaScriptオブジェクト

Livewire.XXXでJavaScriptからLivewireにアクセスできる

フックについて

JavaScriptによるフックとPHPによるフックの２種類があります。

いずれも、コンポーネント単位ではなくLiveWire全体の動作のカスタマイズなどに使用する。

AlpineJSとは？

VueやReactのようなリアクティブで宣言的な性質を少ないコストで実現するライブラリ

x-を接頭辞として持つディレクティブでリアクティブなUIを構築していく。
Vueの構文に近い。
Vueのようにシングルコンポーネントファイル(.vue)などを作る必要がなく、DOMに直接記述できる。

x-dataディレクティブの中がコンポーネントのスコープになり、ここで指定したJavaScriptオブジェクトがコンポーネントのデータになる。

<div x-data="{ open: false }">
    <button @click="open = true">Show More...</button>

    <ul x-show="open" @click.away="open = false">
        <li><button wire:click="archive">Archive</button></li>
        <li><button wire:click="delete">Delete</button></li>
    </ul>
</div>

いちいち通信するまでもない、フロントだけで完結するような処理はAlpineに任せたほうが良さそう。

AlpineJSの構文とLivewireの構文を混ぜて使わないほうが良い。（コンポーネントを分けるべし）

$wireオブジェクトとは？

AlpineJSから$wireオブジェクトでLivewireにアクセスできる。

例）

countプロパティを参照する -> $wire.count
incrementメソッドを呼び出す -> $wire.increment()

entangle(エンタングル)とは？

LivewireのプロパティとAlpineのプロパティを同期する仕組みのこと。

@entangle('プロパティ名')でエンタングルが有効になる。

<div x-data="{ open: @entangle('showDropdown') }">

バリデーション

コンポーネントのクラスにrulesプロパティを追加する

protected $rules = [
    'name' => 'required|min:6',
    'email' => 'required|email',
];

$this->validate();を呼び出すことでバリデーションを行う。

エラーが発生した場合はbladeの@error()ディレクティブ内がレンダリングされる。

リアルタイム検証もできる。
メッセージや項目名のカスタマイズもできる。
FormRequestを流用することはできない。

ページネーションについて

コンポーネントにWithPaginationトレイトを追加することで、Laravelのページネーションが利用できる。

ポーリングについて

wire:pollを使用することでポーリング（定期的な再描画）を実現できる

<div wire:poll.750ms>
    Current time: {{ now() }}
</div>

ダーティ状態とは

コンテンツが変更され、バックエンドのLivewireコンポーネントとまだ同期していない状態の事

wire:dirtyディレクティブでダーティ状態に応じてUIを変更できる

所感

LivewireはAjaxで通信してコンポーネントを部分的に再レンダリングするとの事で、「細かいイベント（例えばマウスオーバーとか）の扱いはどうなるんだろう？サーバーの負荷増になるんじゃないか？」と思っていましたが杞憂でした。
通信を行うまでもないような処理について、AlpineJSに任せる事で棲み分けできており、洗練された仕組みだと感じました。
サーバー側でレンダリングする仕組みなので少々重く、大規模システムではパフォーマンスの都合などから採用できない可能性はありますが、スタートアップのようなパフォーマンスよりは生産性を重視する環境ではパワーを発揮すると思います。