Livewireは魔法??コードリーディング してみた

Transcript

1. Livewire は本当に魔法??
 コードリーディングしてみた
 弁護士ドットコム @namizatork 


2. @namizatork
 ナミザト
 Profile
 会社
 年齢
 出身
 弁護士ドットコム株式会社
 26歳
 沖縄
 すこ


   お酒
 一言
 最近Reactハマってる


3. JavaScriptを書かずにPHPだけでSPAを実現することが出来るライブラリのこと
 従来通りデータを受け取ったり、渡したりする為にはバックエンドへのAPI通信は必須だが、 その辺りを Livewire が”うまいこと”やってくれているので、開発者はAjax処理を意識せずに SPAが構築できる
 
 今回はその”うまいこと”している箇所のコードを読み解いてみる
 Livewireとは


4. とはいえ実装方法の説明
 ボタンを押すと数字がカウントするという簡 単なプログラムを作ってみる
 
 普通ならJSを書いてAjax通信をしないとカウ ントアップはされないが、LivewireならPHPだ けで書けちゃう


5. View
 View部分(フロントだとコンポーネント的な)
 LivewireはBladeの記述で書く必要があり、 変数の出力方法なども基本的にはBladeの 記述方と同じだよ
 wire:click=”inc” はクリックした時にinc()メ ソッドを呼び出している
 


6. View(コンポーネント)の呼び出し
 これは普通のwelcome.blade.phpファイル (ちょいと違うけどまぁそういことにして)
 先ほどのカウンターコンポーネントを
 <livewire:counter> で呼び出している


7. ロジック部分(Classファイル)
 これはLaravelでいうところのController的な 役目の箇所
 
 関数を記述したり、Viewを指定して値を渡し たり、フロントからデータを受け取ったりする ことが出来る


8. いよいよ本題
 まずはルーティングから 追ってくよ。 ※Jetstreamは省くよ。

9. ルーティングを確認


10. Livewireのサービスプロバイダを確認
 Livewireのサービスプロバイダを確認すると 何やらboot()に登録している
 $this->RegisterRoutes()
 あたりがルートの指定っぽい


11. ルーティングファイルの場所
 ここでルーティング指定してるっぽいですね
 試しにlivewire/livewire.jsを覗いてみます


12. LivewireJavaScriptAssets
 先ほどのルーティングであった
 LivewireJavaScriptAssets::class
 を覗いてみよう
 
 何やらuse先のメソッドにJavaScriptファイル のパスを渡している...?
 


13. CanPretendToBeAFile
 呼び出し元のメソッドを確認すると
 ファイルパスをJavaScriptとして吐いている
 つまり /livewire/livewire.js にアクセスすると ビルドされた /dist/livewire.js ファイルを表 示されるので、ここを叩けばLaravel側からア

    クセスできそう


14. 初期のルーティング設定は何となく理解
 次はどうやってBladeにJSな しでAjax通信しているか見て いくよ

15. @livewireScripts
 JSの記述もないのにどうやってAjax通信を 行っているか調べる
 
 @livewireScripts
 という記述があやしい


16. 再度Livewireのサービスプロバイダを確認
 本来のBladeのディレクティブには
 @livewireJavascript
 なんてものはないのでどこかでカスタムディ レクティブしていると思われる
 Livewireのサービスプロバイダを確認すると それっぽい記述を発見
 $this->registerBladeDirctives()


17. Bladeのカスタムディレクティブの内容を確認
 やっぱりこのメソッド内でBladeのカスタアム ディレクティブを設定してました！
 第一引数がBladeの @livewireScripts
 第二引数が実際に実行したい処理
 処理を確認すると別クラスのメソッド が呼ば れている...


18. カスタムディレクティブで実行される処理を確認
 scripts()を覗くとどうやら別のメソッドから HTML構造を受け取っているので、
 そのメソッドを見てみる
 （これが1メソッドだと....）
 これを吐き出してLivewireをレンダリングして いるっぽい


19. おわり
 本当はもっと書きたかったけ ど 時間がありませんですた