Alpine.js を活用した Laravel MPA フロントエンド最適化戦略 / Alpine.js MPA

Transcript

1. גࣜձࣾΤεɾΤϜɾΤεɹా࣮੣ "MQJOFKT
   Λ׆༻ͨ͠
   -BSBWFM
   .1"
   ϑϩϯτΤϯυ࠷దԽઓུ
2. ࣗݾ঺հ w ా࣮੣
   
   !U[N@GSFFEPN
   w גࣜձࣾΤεɾΤϜɾΤεͷΤϯδχΞ
   w 1)1ྺ͸ʙ೥͘Β͍
   w ΞϓϦέʔγϣϯଆͷج൫վળ͕ಘҙ
   w ಛʹ1)1͸ಠࣗ'8͔Β-BSBWFMΞϓϦέʔγϣϯ·Ͱ৭ʑͱ
   w ࠷ۙ͸.1"ͷϑϩϯτΤϯυվળʹ஫ྗͨ͠Γɺ
   ٕज़બఆͷͨΊͷϑϩϯτΤϯυٕज़ݕূΛߦ͍ͬͯ·͢
3. .1"ͷϑϩϯτΤϯυվળͷ࿩ͷલʹ w .1"ͱ͸ʁ
   w αʔόʔ͔Β)5.-Λฦ͢Α͏ͳΞϓϦέʔγϣϯ
   w 1)1ͩͱ#MBEF΍5XJHͳͲͷςϯϓϨʔτΤϯδϯΛར༻ͯ͠)5.-ΛϨ ϯμϦϯά
   w ը໘ΛΠϯλϥΫςΟϒʹ͢ΔͨΊʹ+BWB4DSJQU͕෦෼తʹར༻͞ΕΔ Ϣʔβ
   ʢϒϥ΢βʣ αʔόʔ (&5ʂ
   1045ʂ )5.-
4. .1"ͱ+BWB4DSJQU w ॳظཁ͕݅γϯϓϧͩͱૉͷ+BWB4DSJQU΍K2VFSZ͕࠾༻͞ΕΔ͜ͱ͕ଟ͍
   w ্هٕज़ͷ৔߹ɺཁ͕݅ෳࡶԽͨ͠ͱ͖ʹෛ࠴ʹͳΓ͕ͪ
   w 41"ͱൺ΂ͯ+BWB4DSJQUͷ؅ཧ͕ࡶʹͳΓ͕ͪ
   w ϥΠϒϥϦͷ؅ཧɺϑΝΠϧ؅ཧɺςετɺϑΥʔϚολɺ-JOUͳͲ ϑΥʔϚολ͕ೖ͍ͬͯͳͯ͘Մಡੑ͕ѱ͍ -JOU͕ͳ͍ͷͰະఆٛม਺ͷࢀরʹؾ෇͚ͳ͍
5. ΦʔόʔεϖοΫͳ41" w ҰํͰ.1"Ͱ΋ྑͦ͞͏ͳཁ݅ͳͷʹΦʔόʔεϖοΫͳ41"͕બ ୒͞ΕΔέʔε΋Α͋͘Δ
   w νʔϜͷशख़౓ʹΑͬͯ͸อकੑ΍ೝ஌ෛՙͷ໰୊͕ى͖Δ
   w ϑϩϯτΤϯυΛྑ͍ײ͡ʹ͢Δʹ͸41"ʹҠߦ͢Δ͔͠ͳ͍ʁ
   w ٕज़બ୒͸άϥσʔγϣϯͰ͋ͬͯ΄͍͠
   w τϨʔυΦϑΛݟۃΊͯνʔϜʹ͋ͬͨબ୒ࢶ͕΄͍͠
6. ࿩͢͜ͱ w .1"ͷϑϩϯτΤϯυ։ൃͷ՝୊
   w K2VFSZͷϝϦοτʗσϝϦοτ
   w "MQJOFKTΛ༻͍ͨϑϩϯτΤϯυ։ൃ
   w جຊతͳ࢖͍ํ
   w #MBEF࿈ܞɺࣗಈςετɺίϯϙʔωϯτɺܕ෇͚
   w K2VFSZͷԿΛղܾ͢Δͷ͔ʁ
7. .1"ͷϑϩϯτΤϯυ։ൃͷ՝୊
8. ͜Μͳײ͡ͳαʔϏεΛࢥ͍ු͔΂͍ͯͩ͘͞ w -BSBWFM
   
   .1"ϝΠϯ
   
   +BWB4DSJQUগʑ
   w +BWB4DSJQUϥΠϒϥϦ͸K2VFSZΛओʹར༻
   w ෳࡶͳॲཧ͕͋Γίʔυ͕ಡΈղ͚ͳ͍ʜ
   w -JOU΍ϑΥʔϚολΛ࢖͍ͬͯͳ͍
   w ϥΠϒϥϦ͕؅ཧ͞Ε͓ͯΒͣݹ͍όʔδϣϯ
   w Τϥʔݕ஌ͷ࢓૊Έ͕ͳ͍
   w Ϗϧυ͍ͯ͠ͳ͍
   w ϑϩϯτΤϯυͷςετ͕ͳ͍
9. ͳΜ͔ͩΑ͋͘Γͦ͏ͳߏ੒Ͱ͢Ͷʜʁ
10. w -BSBWFM
    
    .1"ϝΠϯ
    
    +BWB4DSJQUগʑ
    w +BWB4DSJQUϥΠϒϥϦ͸K2VFSZΛओʹར༻
    w ෳࡶͳॲཧ͕͋Γίʔυ͕ಡΈղ͚ͳ͍ʜ
    w -JOU΍ϑΥʔϚολΛ࢖͍ͬͯͳ͍
    w ϥΠϒϥϦ͕؅ཧ͞Ε͓ͯΒͣݹ͍όʔδϣϯ
    w Τϥʔݕ஌ͷ࢓૊Έ͕ͳ͍
    w Ϗϧυ͍ͯ͠ͳ͍
    w ϑϩϯτΤϯυͷςετ͕ͳ͍ ͯ͞ɺK2VFSZʹ͍ͭͯࢥ͍Λ஘ͤΑ͏
11. վΊͯߟ͑Δ
    K2VFSZ
    ͷ༏Ґੑ w ྑ͍ҙຯͰ໋ྩతͰ͋Δ
    w +4ΛಡΈࠐΉ͚ͩͰηϨΫλʔϕʔεͰػೳ͕࢖͑ΔΑ͏ʹͳΔ
    w τάϧɺΞίʔσΟΦϯɺμΠΞϩάɺΧϧʔηϧ
    w Ϗϧυ͕ෆཁͰ͙͢࢖͑Δ
    w /PEFKTͳͲͷ։ൃ؀ڥɾσϓϩΠ؀ڥΛ੔උ͠ͳͯ͘ྑ͍
    w ϓϥάΠϯ͕๛෋Ͱಋೖ΋؆୯
    w ૯ͯ͡
    ಋೖʹ͓͚Δ
    ೝ஌ෛՙ͕௿͍
12. ಡΈࠐΉ͚ͩͰ࢖͑ΔK2VFSZͷྑ͞ w )5.-Λॻ͚ͩ͘ͰৼΔ෣͍ΛೖΕΒΕΔ
    w 8FCαΠτʹͪΐͬͱͨ͠΢ΟδΣοτΛೖΕ͍ͨ৔߹ʹ͸ศར
13. ͳͥ
    K2VFSZ
    ͕໰୊ʹͳΓ͕ͪͳͷ͔ w ѱ͍ҙຯͰ໋ྩతͰ͋Δ
    w +4΍)5.-ͷίʔυΛݟ͚ͨͩͰ͸࠷ऴతͳग़ྗ݁Ռ͕෼͔ΓͮΒ͍
    w ಡΈࠐΉ͚ͩͰಈ͕͘Ώ͑ʹɺӨڹൣғ͕෼͔ΓͮΒ͍
    w ηϨΫλΛར༻͢ΔͨΊɺ)5.-ʹڧ͘ґଘ͠ɺյΕ΍͍͢
    w ͙͢࢖͑Δ͕Ώ͑ʹ؅ཧ͕ࡶʹͳΓ͕ͪ
    w $%/ɺόʔδϣϯ؅ཧɺϏϧυʢ࠷దԽʣɺςετ
    w ૯ͯ͡
    ӡ༻ʹ͓͚Δ
    ೝ஌ෛՙ͕ߴ͘ɺอकੑ͕௿͍
14. .1"ϑϩϯτΤϯυ։ൃͷ՝୊ͱղܾํ๏ ՝୊ ղܾํ๏ ໋ྩత6*ʢK2VFSZʣͰอकੑ͕௿͍ એݴత6*ʢ"MQJOFKTʣ ΩϟογϡରࡦɾεΫϦϓτ࠷దԽ͕Ͱ͖͍ͯͳ͍ 7JUFʹΑΔϏϧυͷಋೖ ςετ͕ॻ͔Ε͓ͯΒͣ҆શͳมߋ͕Ͱ͖ͳ͍ 7JUFTUʹΑΔςετಋೖ ϥΠϒϥϦͷ؅ཧ͕Ͱ͖͍ͯͳ͍ /1.ʹΑΔϥΠϒϥϦ؅ཧ ܕ͕ແ͍ͷͰݎ࿚ੑ͕௿͍ 5ZQF4DSJQUʹΑΔܕͷಋೖ ίʔυͷ੔ܗ΍ߏจνΣοΫ͕Ͱ͖͍ͯͳ͍ #JPNFʹΑΔϑΥʔϚοτɾ੩తղੳ Τϥʔݕ஌ɾ؅ཧ͕Ͱ͖͍ͯͳ͍ 4FOUSZͳͲͷΤϥʔ؅ཧπʔϧͷར༻
15. .1"ϑϩϯτΤϯυ։ൃͷ՝୊ͱղܾํ๏ ՝୊ ղܾํ๏ ໋ྩత6*ʢK2VFSZʣͰอकੑ͕௿͍ એݴత6*ʢ"MQJOFKTʣ ΩϟογϡରࡦɾεΫϦϓτ࠷దԽ͕Ͱ͖͍ͯͳ͍ 7JUFʹΑΔϏϧυͷಋೖ ςετ͕ॻ͔Ε͓ͯΒͣ҆શͳมߋ͕Ͱ͖ͳ͍ 7JUFTUʹΑΔςετಋೖ ϥΠϒϥϦͷ؅ཧ͕Ͱ͖͍ͯͳ͍ /1.ʹΑΔϥΠϒϥϦ؅ཧ ܕ͕ແ͍ͷͰݎ࿚ੑ͕௿͍ 5ZQF4DSJQUʹΑΔܕͷಋೖ ίʔυͷ੔ܗ΍ߏจνΣοΫ͕Ͱ͖͍ͯͳ͍ #JPNFʹΑΔϑΥʔϚοτɾ੩తղੳ Τϥʔݕ஌ɾ؅ཧ͕Ͱ͖͍ͯͳ͍ 4FOUSZͳͲͷΤϥʔ؅ཧπʔϧͷར༻
16. K2VFSZͷ໋ྩత6*ͷ՝୊Λ
    "MQJOFKTʹΑΔએݴత6*Ͱղܾ͢Δ
17. "MQJOFKT
    ͱ͸ w खܰʹએݴత6*Λ࢖͑ΔϥΠϒϥϦ
    w ʮϞμϯ8FCͷK2VFSZʯʮ5BJMXJOE
    $44ͷ+BWB4DSJQU൛ʯ
    w 7VFKTʹࣅͨߏจ
    w )5.-ͷଐੑʹΠϯϥΠϯͰॲཧΛهड़Ͱ͖Δ
    w ֶशίετ͕௿͍
    
    "UUSJCVUFT
    
    1SPQFSUJFT
    
    .FUIPET
    w Ϗϧυͤͣʹ$%/Ͱ΋ಋೖՄೳ
    w -JWFXJSFͷ։ൃऀ͕࡞ͬͨ044
18. ͜Ε͚ͩͰද੍ࣔޚ͕ಈ͘ʂʂʂ
19. "MQJOFKTͷ࢖͍ํ w YEBUBͰΦϒδΣΫτʢϓϩύςΟˍϝιουʣΛఆٛ
    w YTIPX
    YJG
    YGPS
    ͰදࣔΛ੍ޚ
    w YUFYU
    YCJOE 
    ͰϓϩύςΟͷ஋Λදࣔɺ൓ө
    w YPO !
    ͰϝιουΛݺͼग़ͯ͠ϓϩύςΟͷ஋Λม͑ͨΓॲཧΛߦ͏ YEBUBʹΑΔσʔλఆٛ $MJDLΠϕϯτϋϯυϦϯά දࣔඇද੍ࣔޚ
20. ྫɿΠϯΫϦϝϯλϧݕࡧ +4ΦϒδΣΫτͳͷͰ
    HFUUFSΛఆٛͰ͖Δ YNPEFMʹΑΔ૒ํ޲όΠϯυ YGPSʹΑΔϧʔϓ YUFYUͰ஋Λදࣔ
21. K2VFSZͱൺֱ͢Δ
22. #MBEFͱͷ࿈ܞํ๏ w ίϯτϩʔϥ͔ΒϏϡʔʹαʔόʔม਺ΛόΠϯυ͢Δ͚ͩʢݹ͖ྑ͖ʁ1)1ʣ
    w !KTσΟϨΫςΟϒ
    ΍
    EBUBYYY
    ଐੑΛ࢖͏
    w ΠϯλϥΫςΟϒʹσʔλΛऔಘߋ৽͢Δඞཁ͕ͳ͚Ε͹"1*Λ࡞Δඞཁ͕ͳ͍
23. ίϯϙʔωϯτԽ w "MQJOFKTʹ͸ίϯϙʔωϯτԽͷػೳ͸ແ͍
    w ୅ΘΓʹ֤ςϯϓϨʔτΤϯδϯͷίϯϙʔωϯτػೳΛ࢖͏
    w #MBEFͩͱ!JODMVEFΛ࢖ͬͨαϒϏϡʔͷಡΈࠐΈ΍DPNQPOFOUΛ࢖͏
    w ͪͳΈʹ8FCίϯϙʔωϯτΛ࢖࣮ͬͨ૷΋Մೳʢࠓճ͸ׂѪʣ
24. ଐੑʹ+BWB4DSJQUΛॻ͔ͳͯ͘΋0, w "MQJOFEBUB Λ࢖ͬͯ+BWB4DSJQUଆͰࣄલʹΦϒδΣΫτఆ͕ٛͰ͖Δ
    w ͜ΕʹΑΓɺ࢖͍ճ͕͠Ͱ͖ͨΓςετ΋ՄೳʹͳΔ
    w ΦϒδΣΫτʹରͯ͠ܕఆٛ΋Ͱ͖Δ
25. ΦϒδΣΫτϕʔεͳͷͰςετ΋ॻ͚Δ w "MQJOFKTͰ͸ΦϒδΣΫτϕʔεͰৼΔ෣͍Λఆٛ͢Δ
    w ΦϒδΣΫτϕʔεͳͷͰςετ͕؆୯
26. 6*ίϯϙʔωϯτͷςετ΋ॻ͚Δ
27. ܕఆٛ΋Ͱ͖Δ w A!UZQFTBMQJOFKTA
    Λ࢖͑͹σʔλΦϒδΣΫτͷܕ෇͚͕Ͱ͖Δ
28. K2VFSZͷ՝୊ΛͲ͏ղܾ͢Δ͔ w +4΍)5.-ͷίʔυΛݟ͚ͨͩͰ͸࠷ऴతͳग़ྗ݁Ռ͕෼͔ΓͮΒ͍
    
    
    એݴత6*ͳͷͰॲཧ͕Θ͔Γ΍͘͢Մಡੑ͕ߴ͍
    w ಡΈࠐΉ͚ͩͰಈ͕͘Ώ͑ʹɺӨڹൣғ͕෼͔ΓͮΒ͍
    
    
    AYEBUBA
    ͳͲͷଐੑ໊Ͱ൑ผՄೳ
    w ηϨΫλΛར༻͢ΔͨΊɺ)5.-ʹڧ͘ґଘ͠ɺյΕ΍͍͢
    
    
    ηϨΫλΛར༻͠ͳ͍ͷͰյΕͮΒ͍
29. "MQJOFKTͷ(PPE
    👍 w .1"ͷςϯϓϨʔτΤϯδϯͱڝ߹ͤͣڠௐͰ͖Δ
    w K2VFSZͱ΋ڞଘͰ͖Δ
    w Ϗϧυͤͣʹ͙͢࢖͑Δ
    w ֶशίετͷ௿͞
    w ͦΕͰ͍ͯએݴత6*ͱςελϏϦςΟ͕खʹೖΔ
    w Ҡߦੑ
    w એݴత6*ͳͷͰΨν41"ϑϨʔϜϫʔΫ΁ͷҠߦ೉қ౓͸௿͍͸ͣ
    w K2VFSZΑΓ͸ֶशίετ͕ແବʹͳΒͳ͍
30. "MQJOFKTͷ.PUUP
    😂 w Ϗϡʔͷܕ҆શੑ͕ແ͍
    w )5.-ଐੑͷόΠϯσΟϯά͸ܕ҆શͰ͸ͳ͍
    w ʢՃ͑ͯ.1"ͩͱςϯϓϨʔτΤϯδϯࣗମ͕ܕ҆શͰ͸ͳ͍͜ͱଟ͍ʣ
    w ʢ#MBEF͕ܕνΣοΫʗิ׬͕Ͱ͖Ε͹ͳ͊ʣ
    w ʢ+49549͕ત·͍͠ʜʣ
    w ίϯϙʔωϯτϕʔεͷ։ൃʹ͸޲͔ͳ͍
    w ੈͷதͷ͘Β͍Λ઎ΊΔෳࡶͳঢ়ଶ؅ཧɺ6*ͳΞϓϦέʔγϣϯʹ͸޲͔ͳ͍
    w ஌໊౓͕௿͍ʜ͆ʢͷͰఏҊͮ͠Β͍ɻ"MQJOFKTʁʁͬͯͳΔʣ
31. ·ͱΊ w "MQJOFKTΛ࢖ͬͯ.1"ͷϑϩϯτΤϯυΛྑ͍ײ͡ʹ͢Δํ๏Λ঺հ͠· ͨ͠
    w K2VFSZҎ֎ʹ΋"MQJOFKTͷΑ͏ͳ.1"ͱ਌࿨ੑͷߴ͍ϑϩϯτΤϯυٕ ज़͕͋Γ·͢
    w ϑϩϯτΤϯυʹݶΒͣɺϓϩμΫτ΍૊৫ʹ߹ͬͨద੾ͳٕज़Λબ୒͢ Δ͜ͱͰɺͦͷϓϩμΫτ΍૊৫͕ग़ͤΔՁ஋Λ࠷େԽͰ͖Δͱࢥ͍· ͢ɻ
    w ద੾ͳٕज़બ୒ͷͨΊʹ΋1)1FS,BJHJ
    Ͱ
    օ༷͕஌Βͳ͔ͬͨ৽͍͠஌ݟΛಘΒΕͨΒ࠷ߴͰ͢Ͷ
    👍
32. -BSBWFMΞϓϦέʔγϣϯͰ΋
    ϑϩϯτΤϯυΛָ͘͠։ൃ͠·͠ΐ͏
    💪