Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Livewireは魔法??コードリーディング してみた
Search
namizatork
November 25, 2020
Programming
1
320
Livewireは魔法??コードリーディング してみた
namizatork
November 25, 2020
Tweet
Share
More Decks by namizatork
See All by namizatork
PHPのエラーを理解して適切なエラーハンドリングを学ぼう
namizatork
2
3.6k
もう細かいレビューは したくない、されたくない
namizatork
1
1.4k
PHPの静的解析 ついでにLarastan
namizatork
1
540
Laravel8.xまでの大きな変更点を振り返る
namizatork
0
500
Laravelワカンネ(゚⊿゚)から「完全に理解した()」までステップアップ
namizatork
1
1.1k
Laravelの「Hello World」を 表示するまでの処理を追ってみた
namizatork
0
1.3k
Laravel Hands-on
namizatork
0
340
SPA/PWA/AMPってなに?
namizatork
1
17k
Other Decks in Programming
See All in Programming
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
710
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
480
インターフェース設計のコツとツボ
togishima
2
490
Use Perl as Better Shell Script
karupanerura
0
660
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.2k
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
Perlで痩せる
yuukis
1
660
抽象データ型について学んだ
ryounasso
0
210
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
「兵法」から見る質とスピード
ickx
0
200
Parallel::Pipesの紹介
skaji
2
870
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
850
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Scaling GitHub
holman
459
140k
Gamification - CAS2011
davidbonilla
81
5.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Transcript
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をレンダリングして いるっぽい
おわり 本当はもっと書きたかったけ ど 時間がありませんですた