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
Alpine.js を活用した Laravel MPA フロントエンド最適化戦略 / Alpi...
Search
tzmfreedom
March 20, 2025
Technology
1
1.6k
Alpine.js を活用した Laravel MPA フロントエンド最適化戦略 / Alpine.js MPA
tzmfreedom
March 20, 2025
Tweet
Share
More Decks by tzmfreedom
See All by tzmfreedom
PHPStan拡張のコードから読み解く静的解析の威力と可能性 / PHPStan extension code reading
tzmfreedom
3
410
php-srcを読んでみよう / php-src codereading
tzmfreedom
1
2.5k
DBGpを使って PHPのデバッガーをつくろう / DGBp PHP Debugger
tzmfreedom
1
2.3k
独自フレームワークPHPアプリケーションの改善戦略 / Original Framework PHP Kaizen
tzmfreedom
5
4.7k
PHPでPHPを実装する〜プログラミング言語実装入門〜
tzmfreedom
0
1k
Salesforceのツールの作り方
tzmfreedom
0
650
Other Decks in Technology
See All in Technology
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
160
Findy Team+のSOC2取得までの道のり
rvirus0817
0
310
extension 現場で使えるXcodeショートカット一覧
ktombow
0
200
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
130
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
140
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
290
BtoBプロダクト開発の深層
16bitidol
0
180
「Verify with Wallet API」を アプリに導入するために
hinakko
1
220
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
330
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A better future with KSS
kneath
239
17k
Music & Morning Musume
bryan
46
6.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
גࣜձࣾΤεɾΤϜɾΤεɹా࣮ "MQJOFKTΛ׆༻ͨ͠ -BSBWFM.1"ϑϩϯτΤϯυ࠷దԽઓུ
ࣗݾհ w ా࣮!U[N@GSFFEPN w גࣜձࣾΤεɾΤϜɾΤεͷΤϯδχΞ w 1)1ྺʙ͘Β͍ w ΞϓϦέʔγϣϯଆͷج൫վળ͕ಘҙ w
ಛʹ1)1ಠࣗ'8͔Β-BSBWFMΞϓϦέʔγϣϯ·Ͱ৭ʑͱ w ࠷ۙ.1"ͷϑϩϯτΤϯυվળʹྗͨ͠Γɺ ٕज़બఆͷͨΊͷϑϩϯτΤϯυٕज़ݕূΛߦ͍ͬͯ·͢
.1"ͷϑϩϯτΤϯυվળͷͷલʹ w .1"ͱʁ w αʔόʔ͔Β)5.-Λฦ͢Α͏ͳΞϓϦέʔγϣϯ w 1)1ͩͱ#MBEF5XJHͳͲͷςϯϓϨʔτΤϯδϯΛར༻ͯ͠)5.-ΛϨ ϯμϦϯά w ը໘ΛΠϯλϥΫςΟϒʹ͢ΔͨΊʹ+BWB4DSJQU͕෦తʹར༻͞ΕΔ
Ϣʔβ ʢϒϥβʣ αʔόʔ (&5ʂ1045ʂ )5.-
.1"ͱ+BWB4DSJQU w ॳظཁ͕݅γϯϓϧͩͱૉͷ+BWB4DSJQUK2VFSZ͕࠾༻͞ΕΔ͜ͱ͕ଟ͍ w ্هٕज़ͷ߹ɺཁ͕݅ෳࡶԽͨ͠ͱ͖ʹෛ࠴ʹͳΓ͕ͪ w 41"ͱൺͯ+BWB4DSJQUͷཧ͕ࡶʹͳΓ͕ͪ w ϥΠϒϥϦͷཧɺϑΝΠϧཧɺςετɺϑΥʔϚολɺ-JOUͳͲ ϑΥʔϚολ͕ೖ͍ͬͯͳͯ͘Մಡੑ͕ѱ͍
-JOU͕ͳ͍ͷͰະఆٛมͷࢀরʹؾ͚ͳ͍
ΦʔόʔεϖοΫͳ41" w ҰํͰ.1"Ͱྑͦ͞͏ͳཁ݅ͳͷʹΦʔόʔεϖοΫͳ41"͕બ ͞ΕΔέʔεΑ͋͘Δ w νʔϜͷशख़ʹΑͬͯอकੑೝෛՙͷ͕ى͖Δ w ϑϩϯτΤϯυΛྑ͍ײ͡ʹ͢Δʹ41"ʹҠߦ͢Δ͔͠ͳ͍ʁ w ٕज़બάϥσʔγϣϯͰ͋ͬͯ΄͍͠
w τϨʔυΦϑΛݟۃΊͯνʔϜʹ͋ͬͨબࢶ͕΄͍͠
͢͜ͱ w .1"ͷϑϩϯτΤϯυ։ൃͷ՝ w K2VFSZͷϝϦοτʗσϝϦοτ w "MQJOFKTΛ༻͍ͨϑϩϯτΤϯυ։ൃ w جຊతͳ͍ํ w
#MBEF࿈ܞɺࣗಈςετɺίϯϙʔωϯτɺܕ͚ w K2VFSZͷԿΛղܾ͢Δͷ͔ʁ
.1"ͷϑϩϯτΤϯυ։ൃͷ՝
͜Μͳײ͡ͳαʔϏεΛࢥ͍ු͔͍ͯͩ͘͞ w -BSBWFM.1"ϝΠϯ +BWB4DSJQUগʑ w +BWB4DSJQUϥΠϒϥϦK2VFSZΛओʹར༻ w ෳࡶͳॲཧ͕͋Γίʔυ͕ಡΈղ͚ͳ͍ʜ w -JOUϑΥʔϚολΛ͍ͬͯͳ͍
w ϥΠϒϥϦ͕ཧ͞Ε͓ͯΒͣݹ͍όʔδϣϯ w ΤϥʔݕͷΈ͕ͳ͍ w Ϗϧυ͍ͯ͠ͳ͍ w ϑϩϯτΤϯυͷςετ͕ͳ͍
ͳΜ͔ͩΑ͋͘Γͦ͏ͳߏͰ͢Ͷʜʁ
w -BSBWFM.1"ϝΠϯ +BWB4DSJQUগʑ w +BWB4DSJQUϥΠϒϥϦK2VFSZΛओʹར༻ w ෳࡶͳॲཧ͕͋Γίʔυ͕ಡΈղ͚ͳ͍ʜ w -JOUϑΥʔϚολΛ͍ͬͯͳ͍ w
ϥΠϒϥϦ͕ཧ͞Ε͓ͯΒͣݹ͍όʔδϣϯ w ΤϥʔݕͷΈ͕ͳ͍ w Ϗϧυ͍ͯ͠ͳ͍ w ϑϩϯτΤϯυͷςετ͕ͳ͍ ͯ͞ɺK2VFSZʹ͍ͭͯࢥ͍ΛͤΑ͏
վΊͯߟ͑ΔK2VFSZͷ༏Ґੑ w ྑ͍ҙຯͰ໋ྩతͰ͋Δ w +4ΛಡΈࠐΉ͚ͩͰηϨΫλʔϕʔεͰػೳ͕͑ΔΑ͏ʹͳΔ w τάϧɺΞίʔσΟΦϯɺμΠΞϩάɺΧϧʔηϧ w Ϗϧυ͕ෆཁͰ͙͑͢Δ w
/PEFKTͳͲͷ։ൃڥɾσϓϩΠڥΛඋ͠ͳͯ͘ྑ͍ w ϓϥάΠϯ͕๛Ͱಋೖ؆୯ w ૯ͯ͡ ಋೖʹ͓͚Δ ೝෛՙ͕͍
ಡΈࠐΉ͚ͩͰ͑ΔK2VFSZͷྑ͞ w )5.-Λॻ͚ͩ͘ͰৼΔ͍ΛೖΕΒΕΔ w 8FCαΠτʹͪΐͬͱͨ͠ΟδΣοτΛೖΕ͍ͨ߹ʹศར
ͳͥK2VFSZ͕ʹͳΓ͕ͪͳͷ͔ w ѱ͍ҙຯͰ໋ྩతͰ͋Δ w +4)5.-ͷίʔυΛݟ͚ͨͩͰ࠷ऴతͳग़ྗ݁Ռ͕͔ΓͮΒ͍ w ಡΈࠐΉ͚ͩͰಈ͕͘Ώ͑ʹɺӨڹൣғ͕͔ΓͮΒ͍ w ηϨΫλΛར༻͢ΔͨΊɺ)5.-ʹڧ͘ґଘ͠ɺյΕ͍͢ w
͙͑͢Δ͕Ώ͑ʹཧ͕ࡶʹͳΓ͕ͪ w $%/ɺόʔδϣϯཧɺϏϧυʢ࠷దԽʣɺςετ w ૯ͯ͡ ӡ༻ʹ͓͚Δ ೝෛՙ͕ߴ͘ɺอकੑ͕͍
.1"ϑϩϯτΤϯυ։ൃͷ՝ͱղܾํ๏ ՝ ղܾํ๏ ໋ྩత6*ʢK2VFSZʣͰอकੑ͕͍ એݴత6*ʢ"MQJOFKTʣ ΩϟογϡରࡦɾεΫϦϓτ࠷దԽ͕Ͱ͖͍ͯͳ͍ 7JUFʹΑΔϏϧυͷಋೖ ςετ͕ॻ͔Ε͓ͯΒͣ҆શͳมߋ͕Ͱ͖ͳ͍ 7JUFTUʹΑΔςετಋೖ ϥΠϒϥϦͷཧ͕Ͱ͖͍ͯͳ͍
/1.ʹΑΔϥΠϒϥϦཧ ܕ͕ແ͍ͷͰݎ࿚ੑ͕͍ 5ZQF4DSJQUʹΑΔܕͷಋೖ ίʔυͷܗߏจνΣοΫ͕Ͱ͖͍ͯͳ͍ #JPNFʹΑΔϑΥʔϚοτɾ੩తղੳ Τϥʔݕɾཧ͕Ͱ͖͍ͯͳ͍ 4FOUSZͳͲͷΤϥʔཧπʔϧͷར༻
.1"ϑϩϯτΤϯυ։ൃͷ՝ͱղܾํ๏ ՝ ղܾํ๏ ໋ྩత6*ʢK2VFSZʣͰอकੑ͕͍ એݴత6*ʢ"MQJOFKTʣ ΩϟογϡରࡦɾεΫϦϓτ࠷దԽ͕Ͱ͖͍ͯͳ͍ 7JUFʹΑΔϏϧυͷಋೖ ςετ͕ॻ͔Ε͓ͯΒͣ҆શͳมߋ͕Ͱ͖ͳ͍ 7JUFTUʹΑΔςετಋೖ ϥΠϒϥϦͷཧ͕Ͱ͖͍ͯͳ͍
/1.ʹΑΔϥΠϒϥϦཧ ܕ͕ແ͍ͷͰݎ࿚ੑ͕͍ 5ZQF4DSJQUʹΑΔܕͷಋೖ ίʔυͷܗߏจνΣοΫ͕Ͱ͖͍ͯͳ͍ #JPNFʹΑΔϑΥʔϚοτɾ੩తղੳ Τϥʔݕɾཧ͕Ͱ͖͍ͯͳ͍ 4FOUSZͳͲͷΤϥʔཧπʔϧͷར༻
K2VFSZͷ໋ྩత6*ͷ՝Λ "MQJOFKTʹΑΔએݴత6*Ͱղܾ͢Δ
"MQJOFKTͱ w खܰʹએݴత6*Λ͑ΔϥΠϒϥϦ w ʮϞμϯ8FCͷK2VFSZʯʮ5BJMXJOE$44ͷ+BWB4DSJQU൛ʯ w 7VFKTʹࣅͨߏจ w )5.-ͷଐੑʹΠϯϥΠϯͰॲཧΛهड़Ͱ͖Δ w
ֶशίετ͕͍"UUSJCVUFT 1SPQFSUJFT .FUIPET w Ϗϧυͤͣʹ$%/ͰಋೖՄೳ w -JWFXJSFͷ։ൃऀ͕࡞ͬͨ044
͜Ε͚ͩͰද੍ࣔޚ͕ಈ͘ʂʂʂ
"MQJOFKTͷ͍ํ w YEBUBͰΦϒδΣΫτʢϓϩύςΟˍϝιουʣΛఆٛ w YTIPX YJG YGPSͰදࣔΛ੍ޚ w YUFYU YCJOE
ͰϓϩύςΟͷΛදࣔɺө w YPO ! ͰϝιουΛݺͼग़ͯ͠ϓϩύςΟͷΛม͑ͨΓॲཧΛߦ͏ YEBUBʹΑΔσʔλఆٛ $MJDLΠϕϯτϋϯυϦϯά දࣔඇද੍ࣔޚ
ྫɿΠϯΫϦϝϯλϧݕࡧ +4ΦϒδΣΫτͳͷͰ HFUUFSΛఆٛͰ͖Δ YNPEFMʹΑΔํόΠϯυ YGPSʹΑΔϧʔϓ YUFYUͰΛදࣔ
K2VFSZͱൺֱ͢Δ
#MBEFͱͷ࿈ܞํ๏ w ίϯτϩʔϥ͔ΒϏϡʔʹαʔόʔมΛόΠϯυ͢Δ͚ͩʢݹ͖ྑ͖ʁ1)1ʣ w !KTσΟϨΫςΟϒEBUBYYYଐੑΛ͏ w ΠϯλϥΫςΟϒʹσʔλΛऔಘߋ৽͢Δඞཁ͕ͳ͚Ε"1*Λ࡞Δඞཁ͕ͳ͍
ίϯϙʔωϯτԽ w "MQJOFKTʹίϯϙʔωϯτԽͷػೳແ͍ w ΘΓʹ֤ςϯϓϨʔτΤϯδϯͷίϯϙʔωϯτػೳΛ͏ w #MBEFͩͱ!JODMVEFΛͬͨαϒϏϡʔͷಡΈࠐΈDPNQPOFOUΛ͏ w ͪͳΈʹ8FCίϯϙʔωϯτΛ࣮ͬͨՄೳʢࠓճׂѪʣ
ଐੑʹ+BWB4DSJQUΛॻ͔ͳͯ͘0, w "MQJOFEBUB Λͬͯ+BWB4DSJQUଆͰࣄલʹΦϒδΣΫτఆ͕ٛͰ͖Δ w ͜ΕʹΑΓɺ͍ճ͕͠Ͱ͖ͨΓςετՄೳʹͳΔ w ΦϒδΣΫτʹରͯ͠ܕఆٛͰ͖Δ
ΦϒδΣΫτϕʔεͳͷͰςετॻ͚Δ w "MQJOFKTͰΦϒδΣΫτϕʔεͰৼΔ͍Λఆٛ͢Δ w ΦϒδΣΫτϕʔεͳͷͰςετ͕؆୯
6*ίϯϙʔωϯτͷςετॻ͚Δ
ܕఆٛͰ͖Δ w A!UZQFTBMQJOFKTAΛ͑σʔλΦϒδΣΫτͷܕ͚͕Ͱ͖Δ
K2VFSZͷ՝ΛͲ͏ղܾ͢Δ͔ w +4)5.-ͷίʔυΛݟ͚ͨͩͰ࠷ऴతͳग़ྗ݁Ռ͕͔ΓͮΒ͍ એݴత6*ͳͷͰॲཧ͕Θ͔Γ͘͢Մಡੑ͕ߴ͍ w ಡΈࠐΉ͚ͩͰಈ͕͘Ώ͑ʹɺӨڹൣғ͕͔ΓͮΒ͍ AYEBUBAͳͲͷଐੑ໊ͰผՄೳ w
ηϨΫλΛར༻͢ΔͨΊɺ)5.-ʹڧ͘ґଘ͠ɺյΕ͍͢ ηϨΫλΛར༻͠ͳ͍ͷͰյΕͮΒ͍
"MQJOFKTͷ(PPE👍 w .1"ͷςϯϓϨʔτΤϯδϯͱڝ߹ͤͣڠௐͰ͖Δ w K2VFSZͱڞଘͰ͖Δ w Ϗϧυͤͣʹ͙͑͢Δ w ֶशίετͷ͞ w
ͦΕͰ͍ͯએݴత6*ͱςελϏϦςΟ͕खʹೖΔ w Ҡߦੑ w એݴత6*ͳͷͰΨν41"ϑϨʔϜϫʔΫͷҠߦқ͍ͣ w K2VFSZΑΓֶशίετ͕ແବʹͳΒͳ͍
"MQJOFKTͷ.PUUP😂 w Ϗϡʔͷܕ҆શੑ͕ແ͍ w )5.-ଐੑͷόΠϯσΟϯάܕ҆શͰͳ͍ w ʢՃ͑ͯ.1"ͩͱςϯϓϨʔτΤϯδϯࣗମ͕ܕ҆શͰͳ͍͜ͱଟ͍ʣ w ʢ#MBEF͕ܕνΣοΫʗิ͕Ͱ͖Εͳ͊ʣ w
ʢ+49549͕ત·͍͠ʜʣ w ίϯϙʔωϯτϕʔεͷ։ൃʹ͔ͳ͍ w ੈͷதͷ͘Β͍ΛΊΔෳࡶͳঢ়ଶཧɺ6*ͳΞϓϦέʔγϣϯʹ͔ͳ͍ w ໊͕͍ʜ͆ʢͷͰఏҊͮ͠Β͍ɻ"MQJOFKTʁʁͬͯͳΔʣ
·ͱΊ w "MQJOFKTΛͬͯ.1"ͷϑϩϯτΤϯυΛྑ͍ײ͡ʹ͢Δํ๏Λհ͠· ͨ͠ w K2VFSZҎ֎ʹ"MQJOFKTͷΑ͏ͳ.1"ͱੑͷߴ͍ϑϩϯτΤϯυٕ ज़͕͋Γ·͢ w ϑϩϯτΤϯυʹݶΒͣɺϓϩμΫτ৫ʹ߹ͬͨదͳٕज़Λબ͢ Δ͜ͱͰɺͦͷϓϩμΫτ৫͕ग़ͤΔՁΛ࠷େԽͰ͖Δͱࢥ͍·
͢ɻ w దͳٕज़બͷͨΊʹ1)1FS,BJHJͰ օ༷͕Βͳ͔ͬͨ৽͍͠ݟΛಘΒΕͨΒ࠷ߴͰ͢Ͷ👍
-BSBWFMΞϓϦέʔγϣϯͰ ϑϩϯτΤϯυΛָ͘͠։ൃ͠·͠ΐ͏💪