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
   "ZVNV
   4BUP
   c
   
   5&$)'&&%
   $0/'&3&/$&
    41".1"
   ٞ࿦ͷ၆ᛌͱ
   ݱ୅ʹ͓͚ΔઃܭͷϙΠϯτ 8FC
   ϑϩϯτΤϯυͷઃܭʹۜͷ஄ؙ͸͋Γ·ͤΜͰͨ͠
2. UGDPO w 5FDI'FFE
   0 ffi DJBM
   &YQFSU
   /P
   w 8FC
   'SPOUFOE
   &OHJOFFS
   71P&
   )3
   0 ff i DFS
   w 0 ff FST
   c
   PWFS fl PX
   JOD
   w "VUIPS
   PG
   ௒଎ຊ
   w X!DI !BIPNV
3. UGDPO l8FCϑϩϯτΤϯυͷઃܭzͷείʔϓ w ຊࢿྉʹ͓͚ΔείʔϓΛఆٛ͠·͢
   w جຊతʹ͸ϒϥ΢βʹ
   )5.-
   ͱαϒϦιʔεΛ഑৴ͯ͠
   6*
   Λఏڙ͢Δ෦෼ ͷ࣮૷܈͕ର৅
   w ͍ΘΏΔ
   /FYU/VYU
   ͷΑ͏ͳ
   #''
   αʔόʔ΍ɺτϥσΟγϣφϧ
   .7$
   αʔ όʔʹ͓͚Δ
   7JFX
   ΋ؚ·ΕΔ
   w αʔόʔ͕ੜ੒ͨ͠
   )5.-
   ΛΩϟογϡ͢ΔԿΒ͔ͷ࢓૊Έ΋ؚΉ
   w ࣮૷্ͷίʔυσβΠϯ΍ϏϧυઓུͷৄࡉͳͲ͸ɺ͢΂ͯେલఏͷΞʔΩς Ϋνϟʹैଐ͢Δ΋ͷͱͯ͠είʔϓ֎ɻ֤छ؍ଌൣғͷภΓ͸͝༰ࣻΛɻ
4. UGDPO Ͱ͸΍͍͖ͬͯ·͠ΐ͏
5. UGDPO 41"
   WT
   .1" ͍ͬͯ͏ϊϦͷٞ࿦Λ໨ʹͨ͜͠ͱ͸͋ΔͰ͠ΐ͏͔ʁ
6. UGDPO ༻ޠ੔ཧ w 41"
   4JOHMF
   1BHF
   "QQMJDBUJPOʣ
   w ը໘ભҠ࣌ʹϒϥ΢β͕
   )5.-
   Λϑϧϩʔυ͢Δ୅ΘΓʹ
   +BWB4DSJQU
   Ͱ੍ޚ͢Δ
   w ͍͍ͩͨ
   $43
   $MJFOU
   4JEF
   3FOEFSJOH
   ʹڧ͘ґଘ͢Δ
   w .1"
   .VMUJ
   1BHF
   "QQMJDBUJPOʣ
   w ը໘ભҠ࣌ʹϒϥ΢β͕৽͍͠
   63-
   ͔Βऔಘͨ͠
   )5.-
   Λϑϧϩʔυ͢Δ
   w ͍͍ͩͨ
   443
   4FSWFS
   4JEF
   3FOEFSJOH
   ʹڧ͘ґଘ͢Δ
   PS
   ͨͩͷ੩త
   )5.-
   ܈
7. UGDPO ఆظతʹු্͢Δٞ࿦ w 41"
   ͸ίετ͕ߴ͍ʁ
   SFG
   w ͳʹΛ΋ͬͯίετ͕ߴ͍ͱ͍͏ͷ͔࣍ୈͳͷ͚ͩͲŋŋŋ
   w ݸਓతʹ͸
   41"
   ͕ద͞ͳ͍؀ڥɺ༻్͸ଘࡏ͢Δͱ͍͏఺͸ಉҙͰ͖Δ
   w །ҰઈରతͳΞϯαʔͷ௥ٻ͸ࡍݶ͕ͳ͍ͷͰɺΈͳ͞Μ޷͖ʹ΍Γ·͠ΐ͏
   w .1"
   ͰͲ͏΍ͬͯ࡞Δͷʁ
   SFG
   w $43'
   ରࡦͱ͔ϒϥ΢βόοΫͯ͠΋յΕͳ͍ϑΥʔϜͱ͔
   w τϥσΟγϣφϧ
   .7$
   ੈ୅ͱ
   /FYU/VYU
   ωΠςΟϒੈ୅ͷܾఆతͳִઈ͕͋Γͦ͏
   w K2VFSZ
   ΋ݸਓతʹ͸΋͏৮Γͨ͘ͳ͍͚Ͳɺࡉʑͱ࢒Δͷ΋ཧղͰ͖Δ
8. UGDPO 41".1"
   ৅௃తͳ෼ྨͰ͸͋Δ͕ w .1"
   ͷதʹہॴతͳ
   41"
   ͕ຒΊࠐ·ΕΔ͜ͱ΋͋Δ͠
   w ݕࡧը໘ͷҰ෦͚ͩͱ͔ɺαʔόʔབྷΊͨঢ়ଶ؅ཧ͕໘౗ͳϑΥʔϜपΓ͚ͩͱ͔
   w /FYU/VYU
   ΋
   41"
   ͚ͩͰͳ͘
   44(
   4UBUJD
   4JUF
   (FOFSBUJPO
   Ͱ
   .1"
   Ͱ͖Δ
   w .1"
   ͩͬͯ
   $43
   ͢Δ͠ɺ41"
   ͩͬͯ
   443
   ͢Δ
   w ڧ͍͍ͯ͏ͳΒ
   41"
   ͸ϨΨγʔͱ͸͋·ΓݴΘΕͳ͍ٕज़܈ͳ܏޲
9. UGDPO 41"
   PS
   .1"
   Ͱରൺͯ͠
   ٞ࿦͢Δ͸طʹແཧےͬΆ͍
10. UGDPO ఏڙ෺ͷಛੑͱϢʔβʔମݧΛ;·͑ͯߟ͑ͨΒ
    ʮ݁Ռతʹ
    l41"
    PS
    .1"
    ͬΆ͍ઃܭz
    ʹͳͬͨʯ
    ͘Β͍ͷԹ౓ײ͕ద੾ͦ͏ ˞ैདྷతʹ΋
    .JDSP
    'SPOUFOET
    Λಥ͖٧ΊΔͱ
    )5.-
    அยͷ
    $PNQPTJUJPO
    େձʹͳΔͷͰࠓߋײ͸͋Δ
11. UGDPO ݱ୅
    8FC
    ͷઃܭʹ͓͚Δ
    ؔ৺ࣄͷ͓͞Β͍
12. UGDPO 8FC
    ͷઃܭʹ͓͍ͯԿΛॏཁࢹ͍ͯ͠Δͷ͔ w ੑೳʢύϑΥʔϚϯεʣ͸ιϑτ΢ΣΞͷॏཁͳՁ஋Ͱ͋Δ
    w ఏڙ෺ͷಛੑ
    ˠ
    ࣮ݱ͍ͨ͠Ϣʔβʔମݧ͔ΒΞʔΩςΫνϟΛٯࢉ
    w ฒߦͯ͠ɺίʔυͷϝϯςφϯεੑ΍शख़౓ɺطଘٕज़ʹ߹Θͤͨํ਑͕࿅ΒΕΔ
    w ΞʔΩςΫνϟͷલఏ੍໿৚݅ͱͯ͠૊৫౎߹Λ͢Γ߹ΘͤΔ෦෼͸େ୾ʹׂѪ
    w τϥσΟγϣφϧ
    .7$
    ͷ΄͏͕ख׳Εͨ૊৫΋͋Ε͹ɺ/FYU/VYU
    ͡Όͳ͍ͱ࡞Γ Α͏͕ແ͍૊৫ͩͬͯ͋Δ
    w ࣮ߦ࣌ͷੑೳ͸ͦͦ͜͜ʹɺѹ౗తϝϯςφϯεੑ΍ӡ༻ೳྗ͕ඞཁͳ৔໘΋͋Δ
    w ۚમίετ౳ɺຊདྷߟ͑ΒΕΔͦͷଞͷ؍఺͸೴಺ิ׬͓ئ͍͠·͢ʂ
13. UGDPO େ͖͍ؔ৺ࣄ͸)5.-ͷલޙΛ଎͘͢Δ͜ͱ w )5.-
    ΛಡΈࠐΉ·Ͱ
    w ϒϥ΢β͕
    )5.-
    Λϩʔυ͢Δ·Ͱɺయܕతʹ͸ΩϟογϡʹΑΔฦ٫଎౓Ͱղܾ
    w Ϣʔβʔґଘ৘ใ͕ͨ͘͞Μؚ·ΕΔͱΩϟογϡͰ͖ͳ͍ͷͰࠔΔ͜ͱ͸͋Δ
    w શൠతʹૣ͍ʹӽͨ͜͠ͱ͸ͳ͍ɺઃܭΛϛεΒͳ͚Ε͹ͦ͏ͦ͏஗͘ͳΒͳ͍
    w )5.-
    ΛಡΈࠐΜͩޙ
    w ϒϥ΢β͕αϒϦιʔεΛϩʔυͯ͠ɺϢʔβʔʹදࣔͱૢ࡞Λఏڙ͢Δ·Ͱ
    w ϨϯμϦϯάύεͷ࠷దԽ͸΋ͪΖΜɺۙ೥ͩͱ
    +4
    όϯυϧͷංେԽ͕૦ۄͷର৅
    w ϝσΟΞαΠτͰ༨ܭͳ͜ͱͯ͠஗͍ͱ൵͍͕͠ɺ4BB4
    ͩͱڐ༰͠΍͢͞͸͋Δ
14. UGDPO Ͳ͜Ͱ
    )5.-
    Λੜ੒͢Δ͔
    Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔
    ͲΕ͘Β͍
    +BWB4DSJQU
    ϔϏʔʹ͢Δ͔
15. UGDPO Ͳ͜Ͱ
    )5.-
    Λੜ੒͢Δ͔ w αʔόʔαΠυ
    w Α͏͸
    443ɺ/PEFKT
    Ұ଒Ͱ΋
    8PSE1SFTT
    Ͱ΋
    3VCZ
    PO
    3BJMT
    Ͱ΋͍͍
    w ΫϥΠΞϯταΠυ
    w Α͏͸
    $43ɺ͓Εͨͪͷ
    +BWB4DSJQU
    ͱ
    %0.
    "1*
    w $43
    ΦϯϦʔͳΒඞཁʹԠͯ͡Ϋϩʔϥʔ޲͚ͷ੩త
    )5.-
    ੜ੒αʔϏε͕෇ਵ
    w ΤοδαΠυ
    w ۙ೥ɺ$%/ʙΫϥ΢υۀऀΛத৺ʹΤοδͰॲཧͰ͖Δ؀ڥ͕੔͍ͭͭ͋Δ
    w 3FNJY
    ͷΑ͏ʹΤοδ্Ͱͷ࣮ߦΛ೦಄ʹ͓͍ͨϑϨʔϜϫʔΫ΋ͰͯΔ
16. UGDPO Ͳ͜ͷΩϟογϡΛޮ͔ͤΔ͔ w લఏɺ৭ʑͳͱ͜ΖͰΩϟογϡ͸Ͱ͖Δ
    w αʔόʔΞϓϦέʔγϣϯʢσʔλϕʔεͿͪࠐΈͱ͔ΦϯϝϞϦͱ͔ʣ
    w ϛυϧ΢ΣΞʢOHJOY
    
    QSPYZ
    DBDIF
    ͱ͔ɺ7BSOJTI
    ͱ͔ʣ
    w $%/ʢΩϟογϡ͍͖ͩ͢ίϯςϯπσϦόϦʔωοτϫʔΫ͞Μʣ
    w ϒϥ΢βʢϩʔΧϧΩϟογϡɺ4FSWJDF8PSLFS
    $BDIF4UPSBHF
    ͱ͔ʣ
    w )5.-
    ͓ΑͼࡐྉͷΩϟογϡ͸
    )5.-
    ͷલ޻ఔΛ଎͘͢Δ
    w αϒϦιʔεͷΩϟογϡ͸
    )5.-
    ͷޙ޻ఔΛ଎͘͢Δ
17. UGDPO ͲΕ͘Β͍
    +BWB4DSJQU
    ϔϏʔʹ͢Δ͔ w +BWB4DSJQU
    ͷόϯυϧαΠζ͸ɺΫϥΠΞϯταΠυͷ࢓ࣄྔͱൺྫ
    w ۃ୺ͳ࿩ɺ+BWB4DSJQU
    θϩͰ
    )5.-
    ࠷଎ฦ٫͠·͘Δ͚ͩͰ༏উՄೳ
    w ݱ࣮ʹ͸ͦ͏΋͍͔ͳ͍ͷͰόϯυϧ෼ׂ΍ݮྔʹྭΉΘ͚Ͱ͋Δ
    w ϔϏʔʹͳΓ͏Δύϥϝʔλ
    w ϏδϡΞϧදݱͷ༗ແʢ$44
    ͰղܾՄೳͳ΋ͷ΋૿͍͑ͯΔ͸ͣͳΜ͕ͩʜʣ
    w ΠϯλϥΫγϣϯ͕ඞཁͳ
    6*
    ͷ༗ແɺ͓Αͼͦͷෳࡶੑ
    w $43
    ͷ༗ແ
    w ϑϧελοΫ
    41"
    ϑϨʔϜϫʔΫͷ ༧๷త ಋೖͷ༗ແ
18. UGDPO ୤ઢ
    αόΫϥؒͷঢ়ଶҾ͖ܧ͗ΛͲ͏͢Δ͔ w +4
    քͰఆ൪Խͨ͠αόΫϥॲཧڞ௨ԽͰඞཁʹͳΔঢ়ଶͷҾ͖ܧ͗
    w 3FBDU
    ͔Β
    )ZESBUJPO
    քʢͱ͸͍͍ͬͨʜʣͷ࠷ڧΛୣऔͨͦ͠͏ͳ֤Ґ
    w 2XJLɺ.BSLPɺ"TUSPɺ΄͔ʹ΋͚͋ͬͨͲ࿦ஃͷҰ෦͕݂ͷؾଟ͍
    w )ZESBUJPO
    ࿦ஃͷུ֓ʹ͍ͭͯ
    w 3FQMBZBCMF
    WT
    3FTVNBCMF
    
    αʔόʔͰ΍ͬͨॲཧΛ΍Γ௚͔͢ɺଓ͖͔Β΍ΕΔ͔
    w "MM
    TUBHF
    WT
    1BSUJBM
    TUBUF
    
    αʔόʔ͔ΒશͯΛҾ͖ܧ͙ͷ͔ɺҰ෦Λબ୒Ͱ͖Δ͔
    w *OJUJBMMZ
    WT
    1SPHSFTTJWF
    -B[Z
    
    ॳظԽѻ͍ʹͳΔͷ͔ɺඞཁʹԠͯ͡஗ԆͰ͖Δ͔
19. UGDPO ఏڙ෺ͷཧ૝ঢ়ଶʹ͋Θͤͯ
    ͜ΕΒͷϙΠϯτΛ૯߹తʹ൑அ͢Δ
20. UGDPO ͪΐ͏Ͳྑ͍ྗՃݮΛݟ͚ͭΔཱྀ
21. UGDPO )PUXJSF
    3VCZ
    PO
    3BJMT
    ˞ࢀߟϦιʔε w 5VSCP
    ಈతͳը໘ߋ৽ʹ͓͍ͯ΋
    )5.-
    ੜ੒Λαʔόʔʹୗ͢
    w ݹͷ
    QKBY
    ͕࢓૊Έͱͯ͠શମతʹݡ͘ͳͬͨΑ͏ͳΠϝʔδ
    w 4UJNVMVTτϥσΟγϣφϧ
    .7$
    ΁ͷτοϐϯάͱͯ͠͸े෼ͦ͏
    w 3BJMT
    8BZ
    ʹ͓͍ͯந৅Խ͞Ε͍ͯΔ෼ϑϩϯτෳࡶҊ݅͸ݶք͋Δ͔΋ʢΤΞϓ
    w ͍ΘΏΔ
    l8FC
    ϑϩϯτΤϯυzͰΩϟϦΞங͍͍ͯΔਓʹ͸ʜ
    w 3FBDU/FYUKT
    ͱ͔
    7VF/VYUKT
    Λલఏͱͨ͠शख़ͱ͸͕͢͞ʹੈք؍ͷڑ཭͕͋Δ
22. UGDPO ϝϧΧϦ
    8FC
    ˞ࢀߟϦιʔε w (BUTCZ
    ͷ
    44(
    Ͱ੩తͳ
    41"
    ϦιʔεΛग़ྗ͍ͯ͠Δ໛༷
    w ੩తͳͷͰ
    /PEFKT
    αʔόʔʹґଘͤͣεέʔϧՄೳʹͳΔબ୒
    w 443
    ͠ͳ͍ͷ͸঎඼఺਺ͱߋ৽ස౓ΛؑΈΔʹ/PEFKT
    αʔόʔ΍
    )5.-
    ͷણࡉͳΩϟογϡͷ؅ཧΛ͢ΔίετʹΑΔҙࢥܾఆΆ͍
    w ܰྔͳ
    41"
    Λҡ࣋͢Δ࿹ྗͱ஌ੑΛ݉Ͷඋ͑ͨਓࡐ܈͕ඞཁ
    w 41"
    Ͱ
    &$
    Λ΍Δ΂͖Ͱͳ͍ͱ͍͏ٞ࿦΋͋Δ͕έʔεόΠέʔε
23. UGDPO 4IPQJGZ
    )ZESPHFO
    3FBDU
    4FSWFS
    $PNQPOFOUT
    ˞ࢀߟϦιʔε w 3FBDU
    Ͱ਺೥དྷଓ͍͍ͯΔ
    443 41"
    ͷྲྀΕΛ࠷దԽ͢ΔࢼΈ
    w )5.-
    γϦΞϥΠζ͞ΕͨԾ૝
    %0.
    ͷૉΛؚΉ
    ͸αʔόʔͰ΋ΫϥΠΞϯτͰ΋࡞ΒΕΔ
    w ΫϥΠΞϯταΠυʹঢ়ଶΛ࣋ͨͳ͍αʔόʔͷΈͰॲཧ͢ΔίϯϙʔωϯτΛ໌ࣔ͢Δ͜ ͱͰɺϒϥ΢βʹ഑৴͢Δ
    +4
    ͷྔΛݮΒ͢
    w )5.-
    ͷ഑৴લޙʹ
    443
    ॲཧͱ
    41"
    ॳظԽ͕௚ྻͩͬͨͷΛɺͱΓ͋͑ͣ
    )5.-
    Λε τϦʔϛϯάͰฦ͠ͳ͕Β
    443
    ॲཧͱ
    41"
    ॳظԽΛฒྻԽͤͨ͞Α͏ͳΠϝʔδ
    w ͜Ε͕ຊ౰ʹ෱ԻΛ΋ͨΒ͢ͷ͔͸·ͩ൑ผ͕͔ͭͳ͍ॴײ
    w αόΫϥؒͷ௨৴ྔ΍ΩϟογϡͳͲͷ໘Ͱ໨ʹݟ͑Δӡ༻஌ݟʹ๡͍͠ނʜ
24. UGDPO ·ͱΊʂ
25. UGDPO ॴײ w ·ͩ
    41".1"
    ͍ͬͯΜͷ͔͍ɺ͍ͬͯ͏ײ֮ͷํ͸ਖ਼ৗʂ
    w )5.-ɺΩϟογϡɺ+4ൺॏͱ͍͏צॴΛ্͓͑ͨ͞ͰɺͲ͏ΞϨϯ δ͍ͯ͠Δͷ͔Λ၆ᛌ͢Δͱཧղָ͕ʹͳΔͱࢥΘΕ·͢
    w ͱ͜ΖͰɺ࣌୅͸ΤοδαΠυΤϯδχΞʂ͍ͬͯ͏࿩͕࣍࿮ʹ͘Δͱ ϠϚு͍ͬͯͨͷͰ͕͢ɺͲ͏΍Β֎Ε·ͨ͠
26. UGDPO ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠ʂ ෳۀస৬ϚονϯάϓϥοτϑΥʔϜ
    0 ff FST
    ΋ΑΖ͘͠Ͷʂ