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.4k
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
380
php-srcを読んでみよう / php-src codereading
tzmfreedom
1
2.3k
DBGpを使って PHPのデバッガーをつくろう / DGBp PHP Debugger
tzmfreedom
1
2.1k
独自フレームワークPHPアプリケーションの改善戦略 / Original Framework PHP Kaizen
tzmfreedom
5
4.5k
PHPでPHPを実装する〜プログラミング言語実装入門〜
tzmfreedom
0
1k
Salesforceのツールの作り方
tzmfreedom
0
620
Other Decks in Technology
See All in Technology
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
220
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
220
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
140
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
460
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.5k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
860
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
1
140
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
9
2.7k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing for Performance
lara
610
69k
Building Adaptive Systems
keathley
43
2.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Writing Fast Ruby
sferik
628
62k
Optimizing for Happiness
mojombo
379
70k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
GitHub's CSS Performance
jonrohan
1031
460k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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ΞϓϦέʔγϣϯͰ ϑϩϯτΤϯυΛָ͘͠։ൃ͠·͠ΐ͏💪