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

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

Ayumu Sato
September 21, 2022

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

Ayumu Sato

September 21, 2022
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

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

  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
  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. %FDBZTXJUIPVUEPJOHBOZUIJOH w ௨৴؀ڥɺσόΠεɺϢʔεέʔεɺσβΠϯτϨϯυFUD w ͢΂ͯ࣌ؒͷਐΈɺٕज़ͷาΈͱڞʹมԽ͠ଓ͚͍ͯΔ w ΫϥΠΞϯταΠυ͸ͦͷมԽΛ௚઀ͦͷ਎ʹड͚Δ w ͳʹ΋͠ͳ͚Ε͹Ϣʔβʔମݧ΋։ൃମݧ΋ٺ͍ͪͯ͘ w

    ͔ͩΒͦ͜ɺϑϩϯτΤϯυٕज़͸)PXΛΞοϓσʔτ͠ଓ͚͍ͯΔ
  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ΞϓϦέʔγϣϯΤϯδχΞ΁ͷมԽ
  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$44JO+4ʣ w αόΫϥڞ௨Խ͞ΕͨίʔυϕʔεʹOQNͰϥΠϒϥϦ͕ϚγϚγ
  12. 4FSJPVTMZCMPBUFE+BWB4DSJQU w ංେԽͷҰ్ΛḷͬͨΫϥΠΞϯταΠυͰ࣮ߦ͞ΕΔ+4 w ϑΝΠϧαΠζʹΑΔ/FUXPSLJOHίετͷ໰୊͸౰વ͋Δ w ͔͠͠σΟεΫΩϟογϡܦ༝Ͱ΋ੜ͡Δ$PNQVUJOHίετͷ΄͏͕ਂࠁ w +4Λ8FCͷ$0ͱᄻ͑ΒΕΔͷ΋ݴ͍ಘͯົ w

    ։ൃऀମݧΛࢧ͑ΔͨΊ+BWB4DSJQUʹґଘ͕ͪ͠ͳ8FC։ൃͷݱঢ় w )ZESBUJPO՝୊͸͖ͬͱ:PTVLF'VSVLBXBPSBOEΓ͌TBO͕஻Δ
  13. ઃܭͷཁ఺

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

  15. Ͳ͜Ͱ)5.-Λੜ੒͢Δ͔ w αʔόʔαΠυ w ಛʹ੩తͳίϯςϯπͳΒαʔόʔαΠυ $%/͕࠷଎Ͱ)5.-Λฦ͢ͷ͕࠷ڧ w ΫϥΠΞϯταΠυ w ͱ͸͍͑ɺΠϯλϥΫςΟϒͳαʔϏε͸ΫϥΠΞϯταΠυͰ΋ੜ੒͕ඞཁʹͳΔ

    w ΤοδαΠυ w ۙ೥ɺ$%/ʙΫϥ΢υۀऀΛத৺ʹΤοδͰॾʑΛॲཧͰ͖Δ؀ڥ͕੔͍ͭͭ͋Δ
  16. ͲͷΑ͏ʹΩϟογϡઓུΛඳ͔͘ w Ωϟογϡࣗମ͸͋ΒΏΔՕॴʹࠩ͠ࠐΉ༨஍͕͋Δ w αʔόʔΞϓϦέʔγϣϯʢσʔλϕʔεͱ͔ΦϯϝϞϦͱ͔ʣ w ϛυϧ΢ΣΞʢOHJOYQSPYZDBDIFͱ͔ɺ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. 8IFOTPMWJOHBQSPCMFNPGJOUFSFTU EPOPU TPMWFBNPSFHFOFSBMQSPCMFNBTBO JOUFSNFEJBUFTUFQ Statistical learning theory by Vapnik, V.

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