Webフロントエンドと アーキテクチャ事情の持論を喋る

PDF 版: https://s.aho.mu/220922-techfeed_expert_night_4.pdf

TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る https://techfeed.io/events/techfeed-experts-night-4 でフロントエンド設計をテーマとして使用したスライドです。本編5分。

=====

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

SPA/MPA 議論の俯瞰と現代における設計のポイント（あほむ） — TechFeed Conference 2022講演より - TechFeed

The "Developer Experience" Bait-and-Switch - Infrequently Noted

The Cost of Javascript Frameworks - Web Performance Consulting | TimKadlec.com

radEventListener: a Tale of Client-side Framework Performance | CSS-Tricks - CSS-Tricks

Transcript

1. !BIPNV
   "ZVNV
   4BUP
   c
   5FDI'FFE
   &YQFSUT
   /JHIU
   WPMɹ 8FCϑϩϯτΤϯυͱ
   ΞʔΩςΫνϟࣄ৘ͷ࣋࿦Λ஻Δ ʙ
   զʑ͸
   +BWB4DSJQU
   ΤϯδχΞͰ͸ͳ͍ͱ͍͏ڧ͍ؾ࣋ͪΛఴ͑ͯ
2. w 5FDI'FFE
   0 ffi DJBM
   &YQFSU
   /P
   w 8FC
   'SPOUFOE
   &OHJOFFS
   71P&
   w 0 ff FST
   c
   PWFS fl PX
   JOD
   w "VUIPS
   PG
   ௒଎ຊ
   w X!DI !BIPNV
3. લճͷ͓͞Β͍ͱࠓճͷ͜ͱ
4. w 41"
   WT
   .1"
   ͷߏਤ͸΋͏ແཧ
   w $43
   ͱ
   443
   ͷہॴ࢖͍෼͚͕࣮ঢ়
   w ϑϨʔϜϫʔΫαϙʔτ΋ଟ༷Խ
   w ΋͸΍ઃܭ۩ମͰ͸ͳ͘ภͬͨࢥ૝
   w ઃܭͷΩϞ͸Ͳ͜ʹ͋Δͷ͔
   w )5.-ɺΩϟογϡɺ+BWB4DSJQU
   w ৭ΜͳΞϓϩʔν͕͋ΔΑͶ
   w ࠓ೔͸ͬͪ͜Λओʹ࠶ฤ͓ͯ͠ಧ͚ 5FDI'FFE
   $POGFSFODF
    https://techfeed.io/entries/62a8534290ee1f2ca98b1a2a
5. ࠓճͷΞδΣϯμ w ϑϩϯτΤϯυͱ͸
   w ϑϩϯτΤϯυΞʔΩςΫνϟͱ͸
   w ΞʔΩςΫνϟઃܭͷཁ఺
   w ࣮ྫΛަ͑ͨγϛϡϨʔγϣϯ
   w ·ͱΊ
6. Ͱ͸΍͍͖ͬͯ·͠ΐ͏
7. 'SPOUFOE
   ϢʔβʔͱαʔϏεΛ
   6*
   Ͱܨ͙ͨΊʹ
   )5.-
   ੜ੒ॲཧΛ੔͑ΔٕೳྖҬ
   03"/%
   γεςϜͱσβΠϯͷڥքͰ੹೚Λ࣋ͪ
   Ϣʔβʔʹಧ͚Δ඼࣭Λ࢘Δ৬ೳ
8. %FDBZT
   XJUIPVU
   EPJOH
   BOZUIJOH w ௨৴؀ڥɺσόΠεɺϢʔεέʔεɺσβΠϯτϨϯυ
   FUD
   w ͢΂ͯ࣌ؒͷਐΈɺٕज़ͷาΈͱڞʹมԽ͠ଓ͚͍ͯΔ
   w ΫϥΠΞϯταΠυ͸ͦͷมԽΛ௚઀ͦͷ਎ʹड͚Δ
   w ͳʹ΋͠ͳ͚Ε͹Ϣʔβʔମݧ΋։ൃମݧ΋ٺ͍ͪͯ͘
   w ͔ͩΒͦ͜ɺϑϩϯτΤϯυٕज़͸
   )PX
   ΛΞοϓσʔτ͠ଓ͚͍ͯΔ
9. 5SBOTJUJPOT
   PG
   'SPOUFOE Server Framework HTML Template CSS Styling Web Application - CI/CD Cache Strategy - Edge Computing UI Components JavaScript a.k.a jQuery API Gateway Truly Backend Services Database $MJFOU
   4JEF 4FSWFS
   4JEF όοΫΤϯυΤϯδχΞ͕ఏڙ͢ΔՁ஋ͷத৺΋
   8FCΞϓϦέʔγϣϯͷޙํʹγϑτ͍ͯ͠Δ
   ϞόΠϧΞϓϦͷଘࡏ΋
   "1*
   લޙͷઢҾ͖ʹӨڹʁ /PEFKT
   ͷ୆಄ɺϑϧελοΫϑϨʔϜϫʔΫීٴ
   ͍Θ͹
   +BWB4DSJQU
   ΤϯδχΞΛܦͯ
   8FCΞϓϦέʔγϣϯΤϯδχΞ΁ͷมԽ
10. 8FC
    'SPOUFOE
    "SDIJUFDUVSF w ιϑτ΢ΣΞʹͱͬͯੑೳʢ଎͞ʣ͸Ձ஋ͦͷ΋ͷ
    w ΞʔΩςΫνϟ͸ੑೳͱ޲͖߹͍ͬͯΔ
    w ҰํͰɺ։ൃମݧޮ཰ͷ໊ͷԼʹอकੑ΍ੜ࢈ੑͱ΋޲͖߹͍ͬͯΔ
    w ੑೳͱ։ൃମݧͷఱṝΛ༳Β͠ଓ͚͍ͯΔͷ͕ۙ೥ͷϑϩϯτΤϯυ
11. .PEFSO
    )JTUPSZ
    هԱ͕ఆ͔Ͱͳ͍ͷͰॱෆಉ w ֤छϥΠϒϥϦͷ୆಄ʹΑΓίϯϙʔωϯτࢤ޲։ൃ͕ຊ֨తʹීٴ
    w /PEFKT
    Λத৺ͱͨ͠ϏϧυϓϩηεͱΤίγεςϜ͕ॏ૚తʹൃୡ
    w ͭͷίʔυϕʔεͰ
    4FSWFS
    
    $MJFOU
    ʹରԠ͢Δ࣮૷
    443
    
    $43
    w 4FSWFS
    ˠ
    $MJFOU
    Ͱঢ়ଶΛҾ͖ܧ͙ͨΊ
    )ZESBUJPO
    ͕஀ੜ
    w +BWB4DSJQU
    Ͱ͢΂ͯΛղܾ͢Δ։ൃऀମݧͷޚضʢFH
    $44
    JO
    +4ʣ
    w αόΫϥڞ௨Խ͞Εͨίʔυϕʔεʹ
    OQN
    ͰϥΠϒϥϦ͕ϚγϚγ
12. 4FSJPVTMZ
    CMPBUFE
    +BWB4DSJQU w ංେԽͷҰ్ΛḷͬͨΫϥΠΞϯταΠυͰ࣮ߦ͞ΕΔ
    +4
    w ϑΝΠϧαΠζʹΑΔ
    /FUXPSLJOH
    ίετͷ໰୊͸౰વ͋Δ
    w ͔͠͠σΟεΫΩϟογϡܦ༝Ͱ΋ੜ͡Δ
    $PNQVUJOH
    ίετͷ΄͏͕ਂࠁ
    w +4
    Λ
    8FC
    ͷ
    $0
    ͱᄻ͑ΒΕΔͷ΋ݴ͍ಘͯົ
    w ։ൃऀମݧΛࢧ͑ΔͨΊ
    +BWB4DSJQU
    ʹґଘ͕ͪ͠ͳ
    8FC
    ։ൃͷݱঢ়
    w )ZESBUJPO
    ՝୊͸͖ͬͱ
    :PTVLF
    'VSVLBXB
    PSBOE
    
    Γ͌TBO
    ͕஻Δ
13. ઃܭͷཁ఺
14. Ͳ͜Ͱ
    )5.-
    Λੜ੒͢Δ͔
    ͲͷΑ͏ʹΩϟογϡઓུΛඳ͔͘
    ͲΕ͘Β͍
    +BWB4DSJQU
    ΛࡌͤΔ͔
15. Ͳ͜Ͱ
    )5.-
    Λੜ੒͢Δ͔ w αʔόʔαΠυ
    w ಛʹ੩తͳίϯςϯπͳΒαʔόʔαΠυ
    
    $%/
    ͕࠷଎Ͱ
    )5.-
    Λฦ͢ͷ͕࠷ڧ
    w ΫϥΠΞϯταΠυ
    w ͱ͸͍͑ɺΠϯλϥΫςΟϒͳαʔϏε͸ΫϥΠΞϯταΠυͰ΋ੜ੒͕ඞཁʹͳΔ
    w ΤοδαΠυ
    w ۙ೥ɺ$%/ʙΫϥ΢υۀऀΛத৺ʹΤοδͰॾʑΛॲཧͰ͖Δ؀ڥ͕੔͍ͭͭ͋Δ
16. ͲͷΑ͏ʹΩϟογϡઓུΛඳ͔͘ w Ωϟογϡࣗମ͸͋ΒΏΔՕॴʹࠩ͠ࠐΉ༨஍͕͋Δ
    w αʔόʔΞϓϦέʔγϣϯʢσʔλϕʔεͱ͔ΦϯϝϞϦͱ͔ʣ
    w ϛυϧ΢ΣΞʢOHJOY
    
    QSPYZ
    DBDIF
    ͱ͔ɺ7BSOJTI
    ͱ͔ʣ
    w $%/ʢΩϟογϡ͍͖ͩ͢ίϯςϯπσϦόϦʔωοτϫʔΫ͞Μʣ
    w ϒϥ΢βʢϩʔΧϧΩϟογϡɺ4FSWJDF8PSLFS
    $BDIF4UPSBHF
    ͱ͔ʣ
    w ઱౓
    
    ੔߹ੑͱઓ͍ͭͭͭ΋
    )5.-
    ͸
    $%/
    ʹ৯Θ͍ͤͨͷ͕ຊ໋
    w $%/
    ͸సૹڑ཭ͷ՝୊΋ղܾ͢ΔͷͰ಄ͻͱͭൈ͚͍ͯΔ
    w ετϦʔϛϯάಈըϑΝΠϧ΋ήʔϜͷύονϑΝΠϧ΋
    $%/
    ͕େ޷͖α
17. ͲΕ͘Β͍
    +BWB4DSJQU
    ΛࡌͤΔ͔ w +BWB4DSJQU
    ͷόϯυϧαΠζ͸ɺΫϥΠΞϯταΠυͷ࢓ࣄྔͱൺྫ
    w ۃ୺ͳ࿩ɺ+BWB4DSJQU
    θϩͰ
    )5.-
    ࠷଎ฦ٫͠·͘Δ͚ͩͰ༏উՄೳ
    w ݱ࣮ʹ͸ͦ͏΋͍͔ͳ͍ͷͰόϯυϧ෼ׂ΍ݮྔʹྭΉΘ͚Ͱ͋Δ
    w ϔϏʔʹͳΓ͏Δύϥϝʔλ
    w ΠϯλϥΫγϣϯ͕ඞཁͳ
    6*
    ͷ༗ແɺ͓Αͼͦͷෳࡶੑ
    w $43
    ͷ༗ແ
    w ϑϧελοΫ
    41"
    ϑϨʔϜϫʔΫͷ ༧๷త ಋೖͷ༗ແ
    w )ZESBUJPO
    ͷ༗ແ
18. ఏڙ෺ͷཧ૝ঢ়ଶʹ͋Θͤͯ
    ͜ΕΒͷཁ఺Λ૯߹తʹ൑அ͢Δ
19. γϛϡϨʔγϣϯ
20. w ੩తͳΦ΢ϯυϝσΟΞ
    w ϦΞϧλΠϜੑ͕๡͍͠
    w ΠϯλϥΫςΟϒੑ͸ۃ௿
    w ϩάΠϯґଘॲཧ΋΄ͱΜͲͳ͍
    w Ͳ͏͍͏)PX͕͋ΔͩΖ͏͔
    w )5.-
    ͸
    443ʁ
    ࣄલ੩తੜ੒ʁ
    w Ωϟογϡ͸
    $%/
    ʹஔ͚ͦ͏ʁ
    w $43
    
    )ZESBUJPO
    ͸ຊ౰ʹඞཁʁ 0GGFST
    .BHB[JOF
21. w ϩάΠϯલఏͷαʔϏε
    w )5.-͸Ωϟογϡ͠Α͏͕ͳ͍
    w ݕࡧͳͲಈతͳ
    6*
    ͕ଟ͍
    w 41"
    ͬΆ͘͢Δ༨஍͕͋Δ
    w Ͳ͏͍͏)PX͕͋ΔͩΖ͏͔
    w )5.-
    ͷΩϟογϡ͸ແཧͦ͏ʁ
    w ׂΓ͖ͬͯ
    41"
    ͬΆ͘ߏ੒͢Δʁ
    w ංେԽ͠͏Δ+4ΛͲ͏࠷దԽ͢Δʁ 0GGFST
    ީิऀݕࡧ
22. ·ͱΊ
23. αϚϦ w ϑϩϯτΤϯυ͸
    8FC
    ΞϓϦέʔγϣϯશҬ͕कඋൣғʹͳΓ͏Δ
    w ੑೳͱ։ൃମݧͷؒͰ༳ΒΕΔͳ͔Ͱઃܭ্ͷ՝୊΋ੜ·Ε͍ͯΔ
    w ઃܭͷϙΠϯτ͸ɺ)5.-ੜ੒ɾΩϟογϡઓུɾ+BWB4DSJQU
    ੵࡌྔ
    w ΞϓϦέʔγϣϯͷཁ݅ʹ͋ΘͤͨઃܭΛʂ
24. 8IFO
    TPMWJOH
    B
    QSPCMFN
    PG
    JOUFSFTU
    EP
    OPU
    TPMWF
    B
    NPSF
    HFOFSBM
    QSPCMFN
    BT
    BO
    JOUFSNFEJBUF
    TUFQ Statistical learning theory by Vapnik, V. N, 1998
25. ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠ʂ ෳۀస৬ϚονϯάϓϥοτϑΥʔϜ
    0 ff FST
    ΋ΑΖ͘͠Ͷʂ