$30 off During Our Annual Pro Sale. View Details »

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ΤϯδχΞͰ͸ͳ͍ͱ͍͏ڧ͍ؾ࣋ͪΛఴ͑ͯ

    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