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

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

@namizatork  ナミザト  Profile  会社  年齢  出身  弁護士ドットコム株式会社  26歳  沖縄  すこ 
お酒  一言  最近Reactハマってる 

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

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

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

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

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

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

ルーティングを確認 

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

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

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

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

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

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

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

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

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

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

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

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

namizatork

More Decks by namizatork

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

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

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

ルーティングを確認

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

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

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

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

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

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

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

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

More Decks by namizatork

Other Decks in Programming

Featured

Transcript

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

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