## LiveWireを触ってみる チュートリアルページ https://laravel-livewire.com/docs/2.x/quickstart ## LiveWireのインストール headタグの最後に`@livewireStyles`を入れる bodyタグの最後に`@livewireScripts`を入れる。 ```html <!doctype html> <html lang="en"> <head> @livewireStyles </head> <body> <h1>test</h1> @livewireScripts </body> </html> ``` ## コンポーネントを作成する ```bash 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オブジェクトがコンポーネントのデータになる。 ```html <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('プロパティ名')`でエンタングルが有効になる。 ```html <div x-data="{ open: @entangle('showDropdown') }"> ``` ## バリデーション コンポーネントのクラスに`rules`プロパティを追加する ```php 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に任せる事で棲み分けできており、洗練された仕組みだと感じました。 サーバー側でレンダリングする仕組みなので少々重く、大規模システムではパフォーマンスの都合などから採用できない可能性はありますが、スタートアップのようなパフォーマンスよりは生産性を重視する環境ではパワーを発揮すると思います。