Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

tzmfreedom

March 20, 2025
Tweet

More Decks by tzmfreedom

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ w ా࣮੣!U[N@GSFFEPN w גࣜձࣾΤεɾΤϜɾΤεͷΤϯδχΞ w 1)1ྺ͸ʙ೥͘Β͍ w ΞϓϦέʔγϣϯଆͷج൫վળ͕ಘҙ w

    ಛʹ1)1͸ಠࣗ'8͔Β-BSBWFMΞϓϦέʔγϣϯ·Ͱ৭ʑͱ w ࠷ۙ͸.1"ͷϑϩϯτΤϯυվળʹ஫ྗͨ͠Γɺ ٕज़બఆͷͨΊͷϑϩϯτΤϯυٕज़ݕূΛߦ͍ͬͯ·͢
  2. w -BSBWFM.1"ϝΠϯ +BWB4DSJQUগʑ w +BWB4DSJQUϥΠϒϥϦ͸K2VFSZΛओʹར༻ w ෳࡶͳॲཧ͕͋Γίʔυ͕ಡΈղ͚ͳ͍ʜ w -JOU΍ϑΥʔϚολΛ࢖͍ͬͯͳ͍ w

    ϥΠϒϥϦ͕؅ཧ͞Ε͓ͯΒͣݹ͍όʔδϣϯ w Τϥʔݕ஌ͷ࢓૊Έ͕ͳ͍ w Ϗϧυ͍ͯ͠ͳ͍ w ϑϩϯτΤϯυͷςετ͕ͳ͍ ͯ͞ɺK2VFSZʹ͍ͭͯࢥ͍Λ஘ͤΑ͏
  3. վΊͯߟ͑ΔK2VFSZͷ༏Ґੑ w ྑ͍ҙຯͰ໋ྩతͰ͋Δ w +4ΛಡΈࠐΉ͚ͩͰηϨΫλʔϕʔεͰػೳ͕࢖͑ΔΑ͏ʹͳΔ w τάϧɺΞίʔσΟΦϯɺμΠΞϩάɺΧϧʔηϧ w Ϗϧυ͕ෆཁͰ͙͢࢖͑Δ w

    /PEFKTͳͲͷ։ൃ؀ڥɾσϓϩΠ؀ڥΛ੔උ͠ͳͯ͘ྑ͍ w ϓϥάΠϯ͕๛෋Ͱಋೖ΋؆୯ w ૯ͯ͡ ಋೖʹ͓͚Δ ೝ஌ෛՙ͕௿͍
  4. .1"ϑϩϯτΤϯυ։ൃͷ՝୊ͱղܾํ๏ ՝୊ ղܾํ๏ ໋ྩత6*ʢK2VFSZʣͰอकੑ͕௿͍ એݴత6*ʢ"MQJOFKTʣ ΩϟογϡରࡦɾεΫϦϓτ࠷దԽ͕Ͱ͖͍ͯͳ͍ 7JUFʹΑΔϏϧυͷಋೖ ςετ͕ॻ͔Ε͓ͯΒͣ҆શͳมߋ͕Ͱ͖ͳ͍ 7JUFTUʹΑΔςετಋೖ ϥΠϒϥϦͷ؅ཧ͕Ͱ͖͍ͯͳ͍

    /1.ʹΑΔϥΠϒϥϦ؅ཧ ܕ͕ແ͍ͷͰݎ࿚ੑ͕௿͍ 5ZQF4DSJQUʹΑΔܕͷಋೖ ίʔυͷ੔ܗ΍ߏจνΣοΫ͕Ͱ͖͍ͯͳ͍ #JPNFʹΑΔϑΥʔϚοτɾ੩తղੳ Τϥʔݕ஌ɾ؅ཧ͕Ͱ͖͍ͯͳ͍ 4FOUSZͳͲͷΤϥʔ؅ཧπʔϧͷར༻
  5. .1"ϑϩϯτΤϯυ։ൃͷ՝୊ͱղܾํ๏ ՝୊ ղܾํ๏ ໋ྩత6*ʢK2VFSZʣͰอकੑ͕௿͍ એݴత6*ʢ"MQJOFKTʣ ΩϟογϡରࡦɾεΫϦϓτ࠷దԽ͕Ͱ͖͍ͯͳ͍ 7JUFʹΑΔϏϧυͷಋೖ ςετ͕ॻ͔Ε͓ͯΒͣ҆શͳมߋ͕Ͱ͖ͳ͍ 7JUFTUʹΑΔςετಋೖ ϥΠϒϥϦͷ؅ཧ͕Ͱ͖͍ͯͳ͍

    /1.ʹΑΔϥΠϒϥϦ؅ཧ ܕ͕ແ͍ͷͰݎ࿚ੑ͕௿͍ 5ZQF4DSJQUʹΑΔܕͷಋೖ ίʔυͷ੔ܗ΍ߏจνΣοΫ͕Ͱ͖͍ͯͳ͍ #JPNFʹΑΔϑΥʔϚοτɾ੩తղੳ Τϥʔݕ஌ɾ؅ཧ͕Ͱ͖͍ͯͳ͍ 4FOUSZͳͲͷΤϥʔ؅ཧπʔϧͷར༻
  6. "MQJOFKTͱ͸ w खܰʹએݴత6*Λ࢖͑ΔϥΠϒϥϦ w ʮϞμϯ8FCͷK2VFSZʯʮ5BJMXJOE$44ͷ+BWB4DSJQU൛ʯ w 7VFKTʹࣅͨߏจ w )5.-ͷଐੑʹΠϯϥΠϯͰॲཧΛهड़Ͱ͖Δ w

    ֶशίετ͕௿͍"UUSJCVUFT 1SPQFSUJFT .FUIPET w Ϗϧυͤͣʹ$%/Ͱ΋ಋೖՄೳ w -JWFXJSFͷ։ൃऀ͕࡞ͬͨ044
  7. "MQJOFKTͷ࢖͍ํ w YEBUBͰΦϒδΣΫτʢϓϩύςΟˍϝιουʣΛఆٛ w YTIPX YJG YGPSͰදࣔΛ੍ޚ w YUFYU YCJOE

     ͰϓϩύςΟͷ஋Λදࣔɺ൓ө w YPO ! ͰϝιουΛݺͼग़ͯ͠ϓϩύςΟͷ஋Λม͑ͨΓॲཧΛߦ͏ YEBUBʹΑΔσʔλఆٛ $MJDLΠϕϯτϋϯυϦϯά දࣔඇද੍ࣔޚ
  8. "MQJOFKTͷ(PPE👍 w .1"ͷςϯϓϨʔτΤϯδϯͱڝ߹ͤͣڠௐͰ͖Δ w K2VFSZͱ΋ڞଘͰ͖Δ w Ϗϧυͤͣʹ͙͢࢖͑Δ w ֶशίετͷ௿͞ w

    ͦΕͰ͍ͯએݴత6*ͱςελϏϦςΟ͕खʹೖΔ w Ҡߦੑ w એݴత6*ͳͷͰΨν41"ϑϨʔϜϫʔΫ΁ͷҠߦ೉қ౓͸௿͍͸ͣ w K2VFSZΑΓ͸ֶशίετ͕ແବʹͳΒͳ͍
  9. "MQJOFKTͷ.PUUP😂 w Ϗϡʔͷܕ҆શੑ͕ແ͍ w )5.-ଐੑͷόΠϯσΟϯά͸ܕ҆શͰ͸ͳ͍ w ʢՃ͑ͯ.1"ͩͱςϯϓϨʔτΤϯδϯࣗମ͕ܕ҆શͰ͸ͳ͍͜ͱଟ͍ʣ w ʢ#MBEF͕ܕνΣοΫʗิ׬͕Ͱ͖Ε͹ͳ͊ʣ w

    ʢ+49549͕ત·͍͠ʜʣ w ίϯϙʔωϯτϕʔεͷ։ൃʹ͸޲͔ͳ͍ w ੈͷதͷ͘Β͍Λ઎ΊΔෳࡶͳঢ়ଶ؅ཧɺ6*ͳΞϓϦέʔγϣϯʹ͸޲͔ͳ͍ w ஌໊౓͕௿͍ʜ͆ʢͷͰఏҊͮ͠Β͍ɻ"MQJOFKTʁʁͬͯͳΔʣ