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

Transcript

1. Livewire は本当に魔法??

   コードリーディングしてみた

   弁護士ドットコム @namizatork 

   

   View Slide

2. @namizatork

   ナミザト

   Profile

   会社

   年齢

   出身

   弁護士ドットコム株式会社

   26歳

   沖縄

   すこ
 お酒

   一言
 最近Reactハマってる

   

   View Slide

3. JavaScriptを書かずにPHPだけでSPAを実現することが出来るライブラリのこと

   従来通りデータを受け取ったり、渡したりする為にはバックエンドへのAPI通信は必須だが、
   その辺りを Livewire が”うまいこと”やってくれているので、開発者はAjax処理を意識せずに
   SPAが構築できる

   

   今回はその”うまいこと”している箇所のコードを読み解いてみる

   Livewireとは

   

   View Slide

4. とはいえ実装方法の説明

   ボタンを押すと数字がカウントするという簡
   単なプログラムを作ってみる

   

   普通ならJSを書いてAjax通信をしないとカウ
   ントアップはされないが、LivewireならPHPだ
   けで書けちゃう

   

   View Slide

5. View

   View部分(フロントだとコンポーネント的な)

   LivewireはBladeの記述で書く必要があり、
   変数の出力方法なども基本的にはBladeの
   記述方と同じだよ

   wire:click=”inc” はクリックした時にinc()メ
   ソッドを呼び出している

   

   

   View Slide

6. View(コンポーネント)の呼び出し

   これは普通のwelcome.blade.phpファイル
   (ちょいと違うけどまぁそういことにして)

   先ほどのカウンターコンポーネントを

   で呼び出している

   

   View Slide

7. ロジック部分(Classファイル)

   これはLaravelでいうところのController的な
   役目の箇所

   

   関数を記述したり、Viewを指定して値を渡し
   たり、フロントからデータを受け取ったりする
   ことが出来る

   

   View Slide

8. いよいよ本題

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

   View Slide

9. ルーティングを確認

   

   View Slide

10. Livewireのサービスプロバイダを確認

    Livewireのサービスプロバイダを確認すると
    何やらboot()に登録している

    $this->RegisterRoutes()

    あたりがルートの指定っぽい

    

    View Slide

11. ルーティングファイルの場所

    ここでルーティング指定してるっぽいですね

    試しにlivewire/livewire.jsを覗いてみます

    

    View Slide

12. LivewireJavaScriptAssets

    先ほどのルーティングであった

    LivewireJavaScriptAssets::class

    を覗いてみよう

    

    何やらuse先のメソッドにJavaScriptファイル
    のパスを渡している...?

    

    

    View Slide

13. CanPretendToBeAFile

    呼び出し元のメソッドを確認すると

    ファイルパスをJavaScriptとして吐いている

    つまり /livewire/livewire.js にアクセスすると
    ビルドされた /dist/livewire.js ファイルを表
    示されるので、ここを叩けばLaravel側からア
    クセスできそう

    

    View Slide

14. 初期のルーティング設定は何となく理解

    次はどうやってBladeにJSな
    しでAjax通信しているか見て
    いくよ
    

    View Slide

15. @livewireScripts

    JSの記述もないのにどうやってAjax通信を
    行っているか調べる

    

    @livewireScripts

    という記述があやしい

    

    View Slide

16. 再度Livewireのサービスプロバイダを確認

    本来のBladeのディレクティブには

    @livewireJavascript

    なんてものはないのでどこかでカスタムディ
    レクティブしていると思われる

    Livewireのサービスプロバイダを確認すると
    それっぽい記述を発見

    $this->registerBladeDirctives()

    

    View Slide

17. Bladeのカスタムディレクティブの内容を確認

    やっぱりこのメソッド内でBladeのカスタアム
    ディレクティブを設定してました！

    第一引数がBladeの @livewireScripts

    第二引数が実際に実行したい処理

    処理を確認すると別クラスのメソッド が呼ば
    れている...

    

    View Slide

18. カスタムディレクティブで実行される処理を確認

    scripts()を覗くとどうやら別のメソッドから
    HTML構造を受け取っているので、

    そのメソッドを見てみる

    （これが1メソッドだと....）

    これを吐き出してLivewireをレンダリングして
    いるっぽい

    

    View Slide

19. おわり

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

    View Slide