SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計

PDF 版: https://s.aho.mu/220514-techfeed_conference_2022.pdf

TechFeed Conference 2022 https://techfeed.io/events/techfeed-conference-2022 でフロントエンド設計をテーマとして使用したスライドです。本編5分。

=====

▼ 元データで参考リンクとして張っていた URL たち

なぜ僕が「SPAはコストが高い」と考えているのか

Another hard thing about MPAs is that I haven't been able find documentation ... - DEV Community

Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog

新しいメルカリ Web の話 | メルカリエンジニアリング

Building Blocks of High Performance Hydrogen-powered Storefronts — Development (2022)

Alex Russell on Twitter: "Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel." / Twitter

【AD】Offers「オファーズ」 - エンジニア・デザイナーのための副業・複業・転職の採用サービス

Transcript

1. UGDPO
   !BIPNV "ZVNV4BUP
   c5&$)'&&%$0/'&3&/$&
   41".1"ٞ࿦ͷ၆ᛌͱ
   ݱ୅ʹ͓͚ΔઃܭͷϙΠϯτ
   8FCϑϩϯτΤϯυͷઃܭʹۜͷ஄ؙ͸͋Γ·ͤΜͰͨ͠
   

   View Slide

2. UGDPO
   w 5FDI'FFE0
   ffi
   DJBM&YQFSU/P
   w 8FC'SPOUFOE&OHJOFFS 71P& )30
   ff i
   DFS
   
   w 0
   ff
   FSTcPWFS
   fl
   PX JOD
   w "VUIPSPG௒଎ຊ
   w X!DI
   !BIPNV
   

   View Slide

3. UGDPO
   l8FCϑϩϯτΤϯυͷઃܭzͷείʔϓ
   w ຊࢿྉʹ͓͚ΔείʔϓΛఆٛ͠·͢
   w جຊతʹ͸ϒϥ΢βʹ)5.-ͱαϒϦιʔεΛ഑৴ͯ͠6*Λఏڙ͢Δ෦෼
   ͷ࣮૷܈͕ର৅
   w ͍ΘΏΔ/FYU/VYUͷΑ͏ͳ#''αʔόʔ΍ɺτϥσΟγϣφϧ.7$αʔ
   όʔʹ͓͚Δ7JFX΋ؚ·ΕΔ
   w αʔόʔ͕ੜ੒ͨ͠)5.-ΛΩϟογϡ͢ΔԿΒ͔ͷ࢓૊Έ΋ؚΉ
   w ࣮૷্ͷίʔυσβΠϯ΍ϏϧυઓུͷৄࡉͳͲ͸ɺ͢΂ͯେલఏͷΞʔΩς
   Ϋνϟʹैଐ͢Δ΋ͷͱͯ͠είʔϓ֎ɻ֤छ؍ଌൣғͷภΓ͸͝༰ࣻΛɻ
   

   View Slide

4. UGDPO
   Ͱ͸΍͍͖ͬͯ·͠ΐ͏
   

   View Slide

5. UGDPO
   41"WT.1"
   ͍ͬͯ͏ϊϦͷٞ࿦Λ໨ʹͨ͜͠ͱ͸͋ΔͰ͠ΐ͏͔ʁ
   

   View Slide

6. UGDPO
   ༻ޠ੔ཧ
   w 41" 4JOHMF1BHF"QQMJDBUJPOʣ
   w ը໘ભҠ࣌ʹϒϥ΢β͕)5.-Λϑϧϩʔυ͢Δ୅ΘΓʹ+BWB4DSJQUͰ੍ޚ͢Δ
   w ͍͍ͩͨ$43 $MJFOU4JEF3FOEFSJOH
   ʹڧ͘ґଘ͢Δ
   w .1" .VMUJ1BHF"QQMJDBUJPOʣ
   w ը໘ભҠ࣌ʹϒϥ΢β͕৽͍͠63-͔Βऔಘͨ͠)5.-Λϑϧϩʔυ͢Δ
   w ͍͍ͩͨ443 4FSWFS4JEF3FOEFSJOH
   ʹڧ͘ґଘ͢ΔPSͨͩͷ੩త)5.-܈
   

   View Slide

7. UGDPO
   ఆظతʹු্͢Δٞ࿦
   w 41"͸ίετ͕ߴ͍ʁSFG
   w ͳʹΛ΋ͬͯίετ͕ߴ͍ͱ͍͏ͷ͔࣍ୈͳͷ͚ͩͲŋŋŋ
   w ݸਓతʹ͸41"͕ద͞ͳ͍؀ڥɺ༻్͸ଘࡏ͢Δͱ͍͏఺͸ಉҙͰ͖Δ
   w །ҰઈରతͳΞϯαʔͷ௥ٻ͸ࡍݶ͕ͳ͍ͷͰɺΈͳ͞Μ޷͖ʹ΍Γ·͠ΐ͏
   w .1"ͰͲ͏΍ͬͯ࡞ΔͷʁSFG
   w $43'ରࡦͱ͔ϒϥ΢βόοΫͯ͠΋յΕͳ͍ϑΥʔϜͱ͔
   w τϥσΟγϣφϧ.7$ੈ୅ͱ/FYU/VYUωΠςΟϒੈ୅ͷܾఆతͳִઈ͕͋Γͦ͏
   w K2VFSZ΋ݸਓతʹ͸΋͏৮Γͨ͘ͳ͍͚Ͳɺࡉʑͱ࢒Δͷ΋ཧղͰ͖Δ
   

   View Slide

8. UGDPO
   41".1"৅௃తͳ෼ྨͰ͸͋Δ͕
   w .1"ͷதʹہॴతͳ41"͕ຒΊࠐ·ΕΔ͜ͱ΋͋Δ͠
   w ݕࡧը໘ͷҰ෦͚ͩͱ͔ɺαʔόʔབྷΊͨঢ়ଶ؅ཧ͕໘౗ͳϑΥʔϜपΓ͚ͩͱ͔
   w /FYU/VYU΋41"͚ͩͰͳ͘44( 4UBUJD4JUF(FOFSBUJPO
   Ͱ.1"Ͱ͖Δ
   w .1"ͩͬͯ$43͢Δ͠ɺ41"ͩͬͯ443͢Δ
   w ڧ͍͍ͯ͏ͳΒ41"͸ϨΨγʔͱ͸͋·ΓݴΘΕͳ͍ٕज़܈ͳ܏޲
   

   View Slide

9. UGDPO
   41"PS.1"Ͱରൺͯ͠
   ٞ࿦͢Δ͸طʹແཧےͬΆ͍
   

   View Slide

10. UGDPO
    ఏڙ෺ͷಛੑͱϢʔβʔମݧΛ;·͑ͯߟ͑ͨΒ
    ʮ݁Ռతʹl41"PS.1"ͬΆ͍ઃܭzʹͳͬͨʯ
    ͘Β͍ͷԹ౓ײ͕ద੾ͦ͏
    ˞ैདྷతʹ΋.JDSP'SPOUFOETΛಥ͖٧ΊΔͱ)5.-அยͷ$PNQPTJUJPOେձʹͳΔͷͰࠓߋײ͸͋Δ
    

    View Slide

11. UGDPO
    ݱ୅8FCͷઃܭʹ͓͚Δ
    ؔ৺ࣄͷ͓͞Β͍
    

    View Slide

12. UGDPO
    8FCͷઃܭʹ͓͍ͯԿΛॏཁࢹ͍ͯ͠Δͷ͔
    w ੑೳʢύϑΥʔϚϯεʣ͸ιϑτ΢ΣΞͷॏཁͳՁ஋Ͱ͋Δ
    w ఏڙ෺ͷಛੑˠ࣮ݱ͍ͨ͠Ϣʔβʔମݧ͔ΒΞʔΩςΫνϟΛٯࢉ
    w ฒߦͯ͠ɺίʔυͷϝϯςφϯεੑ΍शख़౓ɺطଘٕज़ʹ߹Θͤͨํ਑͕࿅ΒΕΔ
    w ΞʔΩςΫνϟͷલఏ੍໿৚݅ͱͯ͠૊৫౎߹Λ͢Γ߹ΘͤΔ෦෼͸େ୾ʹׂѪ
    w τϥσΟγϣφϧ.7$ͷ΄͏͕ख׳Εͨ૊৫΋͋Ε͹ɺ/FYU/VYU͡Όͳ͍ͱ࡞Γ
    Α͏͕ແ͍૊৫ͩͬͯ͋Δ
    w ࣮ߦ࣌ͷੑೳ͸ͦͦ͜͜ʹɺѹ౗తϝϯςφϯεੑ΍ӡ༻ೳྗ͕ඞཁͳ৔໘΋͋Δ
    w ۚમίετ౳ɺຊདྷߟ͑ΒΕΔͦͷଞͷ؍఺͸೴಺ิ׬͓ئ͍͠·͢ʂ
    

    View Slide

13. UGDPO
    େ͖͍ؔ৺ࣄ͸)5.-ͷલޙΛ଎͘͢Δ͜ͱ
    w )5.-ΛಡΈࠐΉ·Ͱ
    w ϒϥ΢β͕)5.-Λϩʔυ͢Δ·Ͱɺయܕతʹ͸ΩϟογϡʹΑΔฦ٫଎౓Ͱղܾ
    w Ϣʔβʔґଘ৘ใ͕ͨ͘͞Μؚ·ΕΔͱΩϟογϡͰ͖ͳ͍ͷͰࠔΔ͜ͱ͸͋Δ
    w શൠతʹૣ͍ʹӽͨ͜͠ͱ͸ͳ͍ɺઃܭΛϛεΒͳ͚Ε͹ͦ͏ͦ͏஗͘ͳΒͳ͍
    w )5.-ΛಡΈࠐΜͩޙ
    w ϒϥ΢β͕αϒϦιʔεΛϩʔυͯ͠ɺϢʔβʔʹදࣔͱૢ࡞Λఏڙ͢Δ·Ͱ
    w ϨϯμϦϯάύεͷ࠷దԽ͸΋ͪΖΜɺۙ೥ͩͱ+4όϯυϧͷංେԽ͕૦ۄͷର৅
    w ϝσΟΞαΠτͰ༨ܭͳ͜ͱͯ͠஗͍ͱ൵͍͕͠ɺ4BB4ͩͱڐ༰͠΍͢͞͸͋Δ
    

    View Slide

14. UGDPO
    Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔
    Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔
    ͲΕ͘Β͍+BWB4DSJQUϔϏʔʹ͢Δ͔
    

    View Slide

15. UGDPO
    Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔
    w αʔόʔαΠυ
    w Α͏͸443ɺ/PEFKTҰ଒Ͱ΋8PSE1SFTTͰ΋3VCZPO3BJMTͰ΋͍͍
    w ΫϥΠΞϯταΠυ
    w Α͏͸$43ɺ͓Εͨͪͷ+BWB4DSJQUͱ%0."1*
    w $43ΦϯϦʔͳΒඞཁʹԠͯ͡Ϋϩʔϥʔ޲͚ͷ੩త)5.-ੜ੒αʔϏε͕෇ਵ
    w ΤοδαΠυ
    w ۙ೥ɺ$%/ʙΫϥ΢υۀऀΛத৺ʹΤοδͰॲཧͰ͖Δ؀ڥ͕੔͍ͭͭ͋Δ
    w 3FNJYͷΑ͏ʹΤοδ্Ͱͷ࣮ߦΛ೦಄ʹ͓͍ͨϑϨʔϜϫʔΫ΋ͰͯΔ
    

    View Slide

16. UGDPO
    Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔
    w લఏɺ৭ʑͳͱ͜ΖͰΩϟογϡ͸Ͱ͖Δ
    w αʔόʔΞϓϦέʔγϣϯʢσʔλϕʔεͿͪࠐΈͱ͔ΦϯϝϞϦͱ͔ʣ
    w ϛυϧ΢ΣΞʢOHJOYQSPYZDBDIFͱ͔ɺ7BSOJTIͱ͔ʣ
    w $%/ʢΩϟογϡ͍͖ͩ͢ίϯςϯπσϦόϦʔωοτϫʔΫ͞Μʣ
    w ϒϥ΢βʢϩʔΧϧΩϟογϡɺ4FSWJDF8PSLFS$BDIF4UPSBHFͱ͔ʣ
    w )5.-͓ΑͼࡐྉͷΩϟογϡ͸)5.-ͷલ޻ఔΛ଎͘͢Δ
    w αϒϦιʔεͷΩϟογϡ͸)5.-ͷޙ޻ఔΛ଎͘͢Δ
    

    View Slide

17. UGDPO
    ͲΕ͘Β͍+BWB4DSJQUϔϏʔʹ͢Δ͔
    w +BWB4DSJQUͷόϯυϧαΠζ͸ɺΫϥΠΞϯταΠυͷ࢓ࣄྔͱൺྫ
    w ۃ୺ͳ࿩ɺ+BWB4DSJQUθϩͰ)5.-࠷଎ฦ٫͠·͘Δ͚ͩͰ༏উՄೳ
    w ݱ࣮ʹ͸ͦ͏΋͍͔ͳ͍ͷͰόϯυϧ෼ׂ΍ݮྔʹྭΉΘ͚Ͱ͋Δ
    w ϔϏʔʹͳΓ͏Δύϥϝʔλ
    w ϏδϡΞϧදݱͷ༗ແʢ$44ͰղܾՄೳͳ΋ͷ΋૿͍͑ͯΔ͸ͣͳΜ͕ͩʜʣ
    w ΠϯλϥΫγϣϯ͕ඞཁͳ6*ͷ༗ແɺ͓Αͼͦͷෳࡶੑ
    w $43ͷ༗ແ
    w ϑϧελοΫ41"ϑϨʔϜϫʔΫͷ ༧๷త
    ಋೖͷ༗ແ
    

    View Slide

18. UGDPO
    ୤ઢαόΫϥؒͷঢ়ଶҾ͖ܧ͗ΛͲ͏͢Δ͔
    w +4քͰఆ൪Խͨ͠αόΫϥॲཧڞ௨ԽͰඞཁʹͳΔঢ়ଶͷҾ͖ܧ͗
    w 3FBDU͔Β)ZESBUJPOքʢͱ͸͍͍ͬͨʜʣͷ࠷ڧΛୣऔͨͦ͠͏ͳ֤Ґ
    w 2XJLɺ.BSLPɺ"TUSPɺ΄͔ʹ΋͚͋ͬͨͲ࿦ஃͷҰ෦͕݂ͷؾଟ͍
    w )ZESBUJPO࿦ஃͷུ֓ʹ͍ͭͯ
    w 3FQMBZBCMFWT3FTVNBCMFαʔόʔͰ΍ͬͨॲཧΛ΍Γ௚͔͢ɺଓ͖͔Β΍ΕΔ͔
    w "MMTUBHFWT1BSUJBMTUBUFαʔόʔ͔ΒશͯΛҾ͖ܧ͙ͷ͔ɺҰ෦Λબ୒Ͱ͖Δ͔
    w *OJUJBMMZWT1SPHSFTTJWF -B[Z
    ॳظԽѻ͍ʹͳΔͷ͔ɺඞཁʹԠͯ͡஗ԆͰ͖Δ͔
    

    View Slide

19. UGDPO
    ఏڙ෺ͷཧ૝ঢ়ଶʹ͋Θͤͯ
    ͜ΕΒͷϙΠϯτΛ૯߹తʹ൑அ͢Δ
    

    View Slide

20. UGDPO
    ͪΐ͏Ͳྑ͍ྗՃݮΛݟ͚ͭΔཱྀ
    

    View Slide

21. UGDPO
    )PUXJSF 3VCZPO3BJMT
    ˞ࢀߟϦιʔε
    w 5VSCPಈతͳը໘ߋ৽ʹ͓͍ͯ΋)5.-ੜ੒Λαʔόʔʹୗ͢
    w ݹͷQKBY͕࢓૊Έͱͯ͠શମతʹݡ͘ͳͬͨΑ͏ͳΠϝʔδ
    w 4UJNVMVTτϥσΟγϣφϧ.7$΁ͷτοϐϯάͱͯ͠͸े෼ͦ͏
    w 3BJMT8BZʹ͓͍ͯந৅Խ͞Ε͍ͯΔ෼ϑϩϯτෳࡶҊ݅͸ݶք͋Δ͔΋ʢΤΞϓ
    w ͍ΘΏΔl8FCϑϩϯτΤϯυzͰΩϟϦΞங͍͍ͯΔਓʹ͸ʜ
    w 3FBDU/FYUKTͱ͔7VF/VYUKTΛલఏͱͨ͠शख़ͱ͸͕͢͞ʹੈք؍ͷڑ཭͕͋Δ
    

    View Slide

22. UGDPO
    ϝϧΧϦ8FC˞ࢀߟϦιʔε
    w (BUTCZͷ44(Ͱ੩తͳ41"ϦιʔεΛग़ྗ͍ͯ͠Δ໛༷
    w ੩తͳͷͰ/PEFKTαʔόʔʹґଘͤͣεέʔϧՄೳʹͳΔબ୒
    w 443͠ͳ͍ͷ͸঎඼఺਺ͱߋ৽ස౓ΛؑΈΔʹ/PEFKTαʔόʔ΍
    )5.-ͷણࡉͳΩϟογϡͷ؅ཧΛ͢ΔίετʹΑΔҙࢥܾఆΆ͍
    w ܰྔͳ41"Λҡ࣋͢Δ࿹ྗͱ஌ੑΛ݉Ͷඋ͑ͨਓࡐ܈͕ඞཁ
    w 41"Ͱ&$Λ΍Δ΂͖Ͱͳ͍ͱ͍͏ٞ࿦΋͋Δ͕έʔεόΠέʔε
    

    View Slide

23. UGDPO
    4IPQJGZ)ZESPHFO 3FBDU4FSWFS$PNQPOFOUT
    
    ˞ࢀߟϦιʔε
    w 3FBDUͰ਺೥དྷଓ͍͍ͯΔ44341"ͷྲྀΕΛ࠷దԽ͢ΔࢼΈ
    w )5.- γϦΞϥΠζ͞ΕͨԾ૝%0.ͷૉΛؚΉ
    
    ͸αʔόʔͰ΋ΫϥΠΞϯτͰ΋࡞ΒΕΔ
    w ΫϥΠΞϯταΠυʹঢ়ଶΛ࣋ͨͳ͍αʔόʔͷΈͰॲཧ͢ΔίϯϙʔωϯτΛ໌ࣔ͢Δ͜
    ͱͰɺϒϥ΢βʹ഑৴͢Δ+4ͷྔΛݮΒ͢
    w )5.-ͷ഑৴લޙʹ443ॲཧͱ41"ॳظԽ͕௚ྻͩͬͨͷΛɺͱΓ͋͑ͣ)5.-Λε
    τϦʔϛϯάͰฦ͠ͳ͕Β443ॲཧͱ41"ॳظԽΛฒྻԽͤͨ͞Α͏ͳΠϝʔδ
    w ͜Ε͕ຊ౰ʹ෱ԻΛ΋ͨΒ͢ͷ͔͸·ͩ൑ผ͕͔ͭͳ͍ॴײ
    w αόΫϥؒͷ௨৴ྔ΍ΩϟογϡͳͲͷ໘Ͱ໨ʹݟ͑Δӡ༻஌ݟʹ๡͍͠ނʜ
    

    View Slide

24. UGDPO
    ·ͱΊʂ
    

    View Slide

25. UGDPO
    ॴײ
    w ·ͩ41".1"͍ͬͯΜͷ͔͍ɺ͍ͬͯ͏ײ֮ͷํ͸ਖ਼ৗʂ
    w )5.-ɺΩϟογϡɺ+4ൺॏͱ͍͏צॴΛ্͓͑ͨ͞ͰɺͲ͏ΞϨϯ
    δ͍ͯ͠Δͷ͔Λ၆ᛌ͢Δͱཧղָ͕ʹͳΔͱࢥΘΕ·͢
    w ͱ͜ΖͰɺ࣌୅͸ΤοδαΠυΤϯδχΞʂ͍ͬͯ͏࿩͕࣍࿮ʹ͘Δͱ
    ϠϚு͍ͬͯͨͷͰ͕͢ɺͲ͏΍Β֎Ε·ͨ͠
    

    View Slide

26. UGDPO
    ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠ʂ
    ෳۀస৬ϚονϯάϓϥοτϑΥʔϜ0
    ff
    FST΋ΑΖ͘͠Ͷʂ
    

    View Slide