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 "ZVNV4BUP
   c5FDI'FFE&YQFSUT/JHIUWPMɹ
   8FCϑϩϯτΤϯυͱ
   ΞʔΩςΫνϟࣄ৘ͷ࣋࿦Λ஻Δ
   ʙզʑ͸+BWB4DSJQUΤϯδχΞͰ͸ͳ͍ͱ͍͏ڧ͍ؾ࣋ͪΛఴ͑ͯ
   

   View Slide

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

   View Slide

3. લճͷ͓͞Β͍ͱࠓճͷ͜ͱ
   

   View Slide

4. w 41"WT.1"ͷߏਤ͸΋͏ແཧ
   w $43ͱ443ͷہॴ࢖͍෼͚͕࣮ঢ়
   w ϑϨʔϜϫʔΫαϙʔτ΋ଟ༷Խ
   w ΋͸΍ઃܭ۩ମͰ͸ͳ͘ภͬͨࢥ૝
   w ઃܭͷΩϞ͸Ͳ͜ʹ͋Δͷ͔
   w )5.-ɺΩϟογϡɺ+BWB4DSJQU
   w ৭ΜͳΞϓϩʔν͕͋ΔΑͶ
   w ࠓ೔͸ͬͪ͜Λओʹ࠶ฤ͓ͯ͠ಧ͚
   5FDI'FFE
   $POGFSFODF
   https://techfeed.io/entries/62a8534290ee1f2ca98b1a2a
   

   View Slide

5. ࠓճͷΞδΣϯμ
   w ϑϩϯτΤϯυͱ͸
   w ϑϩϯτΤϯυΞʔΩςΫνϟͱ͸
   w ΞʔΩςΫνϟઃܭͷཁ఺
   w ࣮ྫΛަ͑ͨγϛϡϨʔγϣϯ
   w ·ͱΊ
   

   View Slide

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

   View Slide

7. 'SPOUFOE
   ϢʔβʔͱαʔϏεΛ6*Ͱܨ͙ͨΊʹ
   )5.-ੜ੒ॲཧΛ੔͑ΔٕೳྖҬ
   03"/%
   γεςϜͱσβΠϯͷڥքͰ੹೚Λ࣋ͪ
   Ϣʔβʔʹಧ͚Δ඼࣭Λ࢘Δ৬ೳ
   

   View Slide

8. %FDBZTXJUIPVUEPJOHBOZUIJOH
   w ௨৴؀ڥɺσόΠεɺϢʔεέʔεɺσβΠϯτϨϯυFUD
   w ͢΂ͯ࣌ؒͷਐΈɺٕज़ͷาΈͱڞʹมԽ͠ଓ͚͍ͯΔ
   w ΫϥΠΞϯταΠυ͸ͦͷมԽΛ௚઀ͦͷ਎ʹड͚Δ
   w ͳʹ΋͠ͳ͚Ε͹Ϣʔβʔମݧ΋։ൃମݧ΋ٺ͍ͪͯ͘
   w ͔ͩΒͦ͜ɺϑϩϯτΤϯυٕज़͸)PXΛΞοϓσʔτ͠ଓ͚͍ͯΔ
   

   View Slide

9. 5SBOTJUJPOTPG'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
   $MJFOU4JEF
   4FSWFS4JEF
   όοΫΤϯυΤϯδχΞ͕ఏڙ͢ΔՁ஋ͷத৺΋
   8FCΞϓϦέʔγϣϯͷޙํʹγϑτ͍ͯ͠Δ
   ϞόΠϧΞϓϦͷଘࡏ΋"1*લޙͷઢҾ͖ʹӨڹʁ
   /PEFKTͷ୆಄ɺϑϧελοΫϑϨʔϜϫʔΫීٴ
   ͍Θ͹+BWB4DSJQUΤϯδχΞΛܦͯ
   8FCΞϓϦέʔγϣϯΤϯδχΞ΁ͷมԽ
   

   View Slide

10. 8FC'SPOUFOE"SDIJUFDUVSF
    w ιϑτ΢ΣΞʹͱͬͯੑೳʢ଎͞ʣ͸Ձ஋ͦͷ΋ͷ
    w ΞʔΩςΫνϟ͸ੑೳͱ޲͖߹͍ͬͯΔ
    w ҰํͰɺ։ൃମݧޮ཰ͷ໊ͷԼʹอकੑ΍ੜ࢈ੑͱ΋޲͖߹͍ͬͯΔ
    w ੑೳͱ։ൃମݧͷఱṝΛ༳Β͠ଓ͚͍ͯΔͷ͕ۙ೥ͷϑϩϯτΤϯυ
    

    View Slide

11. .PEFSO)JTUPSZ هԱ͕ఆ͔Ͱͳ͍ͷͰॱෆಉ
    
    w ֤छϥΠϒϥϦͷ୆಄ʹΑΓίϯϙʔωϯτࢤ޲։ൃ͕ຊ֨తʹීٴ
    w /PEFKTΛத৺ͱͨ͠ϏϧυϓϩηεͱΤίγεςϜ͕ॏ૚తʹൃୡ
    w ͭͷίʔυϕʔεͰ4FSWFS$MJFOUʹରԠ͢Δ࣮૷ 443$43
    
    w 4FSWFSˠ$MJFOUͰঢ়ଶΛҾ͖ܧ͙ͨΊ)ZESBUJPO͕஀ੜ
    w +BWB4DSJQUͰ͢΂ͯΛղܾ͢Δ։ൃऀମݧͷޚضʢFH$44JO+4ʣ
    w αόΫϥڞ௨Խ͞ΕͨίʔυϕʔεʹOQNͰϥΠϒϥϦ͕ϚγϚγ
    

    View Slide

12. 4FSJPVTMZCMPBUFE+BWB4DSJQU
    w ංେԽͷҰ్ΛḷͬͨΫϥΠΞϯταΠυͰ࣮ߦ͞ΕΔ+4
    w ϑΝΠϧαΠζʹΑΔ/FUXPSLJOHίετͷ໰୊͸౰વ͋Δ
    w ͔͠͠σΟεΫΩϟογϡܦ༝Ͱ΋ੜ͡Δ$PNQVUJOHίετͷ΄͏͕ਂࠁ
    w +4Λ8FCͷ$0ͱᄻ͑ΒΕΔͷ΋ݴ͍ಘͯົ
    w ։ൃऀମݧΛࢧ͑ΔͨΊ+BWB4DSJQUʹґଘ͕ͪ͠ͳ8FC։ൃͷݱঢ়
    w )ZESBUJPO՝୊͸͖ͬͱ:PTVLF'VSVLBXBPSBOEΓ͌TBO͕஻Δ
    

    View Slide

13. ઃܭͷཁ఺
    

    View Slide

14. Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔
    ͲͷΑ͏ʹΩϟογϡઓུΛඳ͔͘
    ͲΕ͘Β͍+BWB4DSJQUΛࡌͤΔ͔
    

    View Slide

15. Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔
    w αʔόʔαΠυ
    w ಛʹ੩తͳίϯςϯπͳΒαʔόʔαΠυ$%/͕࠷଎Ͱ)5.-Λฦ͢ͷ͕࠷ڧ
    w ΫϥΠΞϯταΠυ
    w ͱ͸͍͑ɺΠϯλϥΫςΟϒͳαʔϏε͸ΫϥΠΞϯταΠυͰ΋ੜ੒͕ඞཁʹͳΔ
    w ΤοδαΠυ
    w ۙ೥ɺ$%/ʙΫϥ΢υۀऀΛத৺ʹΤοδͰॾʑΛॲཧͰ͖Δ؀ڥ͕੔͍ͭͭ͋Δ
    

    View Slide

16. ͲͷΑ͏ʹΩϟογϡઓུΛඳ͔͘
    w Ωϟογϡࣗମ͸͋ΒΏΔՕॴʹࠩ͠ࠐΉ༨஍͕͋Δ
    w αʔόʔΞϓϦέʔγϣϯʢσʔλϕʔεͱ͔ΦϯϝϞϦͱ͔ʣ
    w ϛυϧ΢ΣΞʢOHJOYQSPYZDBDIFͱ͔ɺ7BSOJTIͱ͔ʣ
    w $%/ʢΩϟογϡ͍͖ͩ͢ίϯςϯπσϦόϦʔωοτϫʔΫ͞Μʣ
    w ϒϥ΢βʢϩʔΧϧΩϟογϡɺ4FSWJDF8PSLFS$BDIF4UPSBHFͱ͔ʣ
    w ઱౓੔߹ੑͱઓ͍ͭͭͭ΋)5.-͸$%/ʹ৯Θ͍ͤͨͷ͕ຊ໋
    w $%/͸సૹڑ཭ͷ՝୊΋ղܾ͢ΔͷͰ಄ͻͱͭൈ͚͍ͯΔ
    w ετϦʔϛϯάಈըϑΝΠϧ΋ήʔϜͷύονϑΝΠϧ΋$%/͕େ޷͖α
    

    View Slide

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

    View Slide

18. ఏڙ෺ͷཧ૝ঢ়ଶʹ͋Θͤͯ
    ͜ΕΒͷཁ఺Λ૯߹తʹ൑அ͢Δ
    

    View Slide

19. γϛϡϨʔγϣϯ
    

    View Slide

20. w ੩తͳΦ΢ϯυϝσΟΞ
    w ϦΞϧλΠϜੑ͕๡͍͠
    w ΠϯλϥΫςΟϒੑ͸ۃ௿
    w ϩάΠϯґଘॲཧ΋΄ͱΜͲͳ͍
    w Ͳ͏͍͏)PX͕͋ΔͩΖ͏͔
    w )5.-͸443ʁࣄલ੩తੜ੒ʁ
    w Ωϟογϡ͸$%/ʹஔ͚ͦ͏ʁ
    w $43)ZESBUJPO͸ຊ౰ʹඞཁʁ
    0GGFST.BHB[JOF
    

    View Slide

21. w ϩάΠϯલఏͷαʔϏε
    w )5.-͸Ωϟογϡ͠Α͏͕ͳ͍
    w ݕࡧͳͲಈతͳ6*͕ଟ͍
    w 41"ͬΆ͘͢Δ༨஍͕͋Δ
    w Ͳ͏͍͏)PX͕͋ΔͩΖ͏͔
    w )5.-ͷΩϟογϡ͸ແཧͦ͏ʁ
    w ׂΓ͖ͬͯ41"ͬΆ͘ߏ੒͢Δʁ
    w ංେԽ͠͏Δ+4ΛͲ͏࠷దԽ͢Δʁ
    0GGFSTީิऀݕࡧ
    

    View Slide

22. ·ͱΊ
    

    View Slide

23. αϚϦ
    w ϑϩϯτΤϯυ͸8FCΞϓϦέʔγϣϯશҬ͕कඋൣғʹͳΓ͏Δ
    w ੑೳͱ։ൃମݧͷؒͰ༳ΒΕΔͳ͔Ͱઃܭ্ͷ՝୊΋ੜ·Ε͍ͯΔ
    w ઃܭͷϙΠϯτ͸ɺ)5.-ੜ੒ɾΩϟογϡઓུɾ+BWB4DSJQUੵࡌྔ
    w ΞϓϦέʔγϣϯͷཁ݅ʹ͋ΘͤͨઃܭΛʂ
    

    View Slide

24. 8IFOTPMWJOHBQSPCMFNPGJOUFSFTU EPOPU
    TPMWFBNPSFHFOFSBMQSPCMFNBTBO
    JOUFSNFEJBUFTUFQ
    Statistical learning theory by Vapnik, V. N, 1998
    

    View Slide

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

    View Slide