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

Webのしくみ Vol.2 ~トレンド~

Webのしくみ Vol.2 ~トレンド~

【プログラミング教室卒業生&受講生限定】同窓LT大会!
https://codebase.connpass.com/event/148508/

Yutaka Tachibana

October 19, 2019
Tweet

More Decks by Yutaka Tachibana

Other Decks in Technology

Transcript

  1. Webͷ͘͠Έ Vol.2
    τϨϯυ
    @saboyutaka
    2019/10/19 #codebase_lt

    View full-size slide

  2. ͳΜͰτϨϯυΛ஌Δͱඞཁ͕͋Δʁ
    • ࠓޙͲ͏͍͏ٕज़͕དྷΔ͔༧૝ग़དྷΔ
    • ੜଘઓུͱ͓ͯͬͯ͘͠͠ͱྑ͍

    View full-size slide

  3. ΞδΣϯμ
    • OS, Runtime
    • ΞϓϦέʔγϣϯ
    • ϑϩϯτΤϯυ
    • σʔλ
    • ܦࡁ

    View full-size slide

  4. ڞ௨Խͷϓϩηε
    খ͘͞ελʔτ
    େ͖͘ͳΔ, ෳࡶԽ͢Δ
    ࡉ෼Խ͢Δ
    ڞ௨Խ͢Δ

    View full-size slide

  5. OS, RuntimeͷτϨϯυ

    View full-size slide

  6. Ծ૝Խ
    • ΦϯϓϨϛε
    • Ծ૝Ϛγϯ
    • ίϯςφ

    View full-size slide

  7. Ծ૝Խ
    • ΦϯϓϨϛε(શ෦ࣗݾௐୡ)
    • Ծ૝Ϛγϯ(OSͷԾ૝Խ)
    • VirtualBox, Vagrant
    • ίϯςφ(RuntimeͷԾ૝Խ)
    • Docker, Kurbernetes

    View full-size slide

  8. XaaS
    https://pt.slideshare.net/AlexZyl/functionsvslambda-presentation/4
    OSͷԾ૝Խ Runtimeͷ
    Ծ૝Խ
    ΞϓϦέʔγϣϯ
    ͷԾ૝Խ
    • AWS EC2
    • Ϩϯλϧαʔόʔ
    • Heroku
    • Netlify
    • AWS Lambda
    • Azure Functions
    શ෦ࣗݾௐୡ

    View full-size slide

  9. ΦϯϓϨϛε, VMͷ࣌୅
    • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊʹඞཁͳΠ
    ϯϑϥͷௐୡίετ͕ߴ͍
    • ग़དྷΔ͚ͩ࠷খߏ੒Ͱ

    View full-size slide

  10. XaaS
    • IaaS, OSͷԾ૝Խ
    • PaaS, RuntimeͷԾ૝Խ
    • FaaS, ΞϓϦέʔγϣϯͷԾ૝Խ
    ίϯςφٕज़ͷ੒ख़ͰRuntime, ΞϓϦέʔγϣϯͷԾ૝Խ·Ͱདྷͨ

    View full-size slide

  11. Ծ૝ԽʹΑͬͯ
    • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊͷ౔୆(Πϯ
    ϑϥ)΁ͷίετ͕ݮ͖ͬͯͨ
    • ΞϓϦέʔγϣϯʹूதग़དྷΔΑ͏ʹͳͬͨ
    • ؅ཧίετ͕௿͘ͳ͖ͬͯͨͷͰେྔʹΞϓ
    ϦΛར༻Ͱ͖ΔΑ͏ʹͳͬͨ

    View full-size slide

  12. ΞϓϦέʔγϣϯͷτϨϯυ

    View full-size slide

  13. ΞϓϦέʔγϣϯͷΞʔΩςΫνϟ
    ϞϊϦγοΫ Microservices Serverless

    View full-size slide

  14. ϞϊϦγοΫͷಛ௃
    • Ұ൪ߏ੒ͱͯ͠γϯϓϧɺֶशίετ͕௿͍
    • 1͔Β࢝ΊΔ࣌ʹશ෦ἧͬͯΔͷͰศར
    • ਓ΍γεςϜͷن໛͕େ͖͘ͳΔͱෳࡶԽ͢
    Δ

    View full-size slide

  15. Ծ૝ԽɾίϯςφԽʹΑͬͯ
    • ෳ਺ΞϓϦέʔγϣϯΛ؅ཧग़དྷΔΑ͏ʹͳͬͨ
    • Microservices, Serverless͕Մೳʹ
    • 1ͭͷΞϓϦέʔγϣϯ͕࣋ͭ୲౰Օॴ͕ࡉ෼Խ
    • ෳ਺ݴޠɺෳ਺ΞϓϦέʔγϣϯ͕લఏʹ
    • ڞ௨Խ͞Εͨॲཧ͸SaaSར༻
    • Auth0, Ϣʔβʔೝূج൫
    • Stripe, ܾࡁ
    • Algoria, ݕࡧ
    • Azure Cognitive Services, ػցֶशAPI

    View full-size slide

  16. ΞϓϦέʔγϣϯͷτϨϯυ
    • ࡉ෼Խɺڞ௨෦඼ͷར༻
    • Ϛϧνݴޠ, ݴޠຖͷಘҙͳͱ͜ΖΛ׆͔͢
    • Rails, Laravel, Go, Python, Node.jsͷڞଘ
    • ֤ݴޠ, ֤DBͷෳ਺Πϯελϯεͷ૊Έ߹Θ
    ͤͰదࡐదॴΛ࣮ݱ

    View full-size slide

  17. ϑϩϯτΤϯυͷτϨϯυ

    View full-size slide

  18. ϑϩϯτΤϯυͰࠓग़ͯ͘Δ࿩୊
    • UIͷίϯϙʔωϯτ(෦඼)Խ
    • Vue,js, React.js, Angular.js
    • Bootstrap, Material Design
    • ϚϧνϓϥοτϑΥʔϜ(Web, Mobile, Desktop)
    • αʔόʔαΠυͱͷ෼཭
    • SPA, SSR

    View full-size slide

  19. ϑϩϯτΤϯυͰى͖͍ͯΔࣄ
    • ίϯϙʔωϯτԽͯ͠࢖͍΍͘͢
    • ؆୯ʹ͍͍ײ͡ͷσβΠϯʹ͍ͨ͠
    • αʔόʔαΠυͱͷґଘؔ܎Λͳ͍ͨ͘͠
    • Ͱ͖Ε͹ϊϯίʔσΟϯάͰ࡞Γ͍ͨ

    View full-size slide

  20. WebϑϩϯτΤϯυͷͭ͘Γ͔ͨ
    1. HTMLͷΈ
    αʔόʔ͕HTMLΛฦ͢
    2. HTML on JS
    αʔόʔ͕HTMLΛฦ͢ +JSͰ૷০
    3. HTML on Component JS
    αʔόʔ͕HTMLΛฦ͢ +ίϯϙʔωϯτϥΠϒϥϦ(Vue.js, React)
    4. SPA or BFF
    HTMLΛฦ͢, αʔόʔ͸JSON APIͷΈ
    αʔόʔ͕ϓϨθϯςʔγϣϯ
    ϩδοΫΛ஌͍ͬͯΔ
    αʔόʔ͕ϓϨθϯςʔγϣϯ
    ϩδοΫΛ஌Βͳ͍

    View full-size slide

  21. WebϑϩϯτΤϯυͷྫ
    1. HTMLͷΈ
    αʔόʔαΠυWAF
    2. HTML on JS
    Railsͱ jQUery
    3. HTML on Component JS
    RailsͱVue.js
    4. SPA or BFF + API
    Nuxt.js(Vue.js) + Rails(API)
    αʔόʔ͕ϓϨθϯςʔγϣϯ
    ϩδοΫΛ஌͍ͬͯΔ
    αʔόʔ͕ϓϨθϯςʔγϣϯ
    ϩδοΫΛ஌Βͳ͍

    View full-size slide

  22. σʔλϕʔεͷτϨϯυ

    View full-size slide

  23. σʔλϕʔεͷߏ੒ཁૉ
    σʔλͷೖΕ෺ + API

    View full-size slide

  24. ϦϨʔγϣφϧDBͷߏ੒
    ςʔϒϧ + SQL

    View full-size slide

  25. σʔλͷछྨ
    • ςʔϒϧ
    • ελοΫ
    • Ωϡʔ
    • υΩϡϝϯτ(ΦϒδΣΫτ)
    • ΩʔόϦϡʔ
    • άϥϑ

    View full-size slide

  26. σʔλͷAPI
    • SQL
    • GraphQL
    • HTTP(JSON)

    View full-size slide

  27. Ծ૝ԽɾίϯςφԽʹΑͬͯ
    • DBίϯςφΛ؆୯ʹݐͯΒΕΔΑ͏ʹͳͬͨ
    • ൚༻తͳ୯ҰͷRDB͔Βෳ਺ҟछDB΁
    • దࡐదॴ

    View full-size slide

  28. ܦࡁͷτϨϯυ

    View full-size slide

  29. ࡉ෼Խ͍ͯ͠Δͷ͸γεςϜͩ
    ͚Ͱ͸ͳ͍ɺܦࡁͦͷ΋ͷ

    View full-size slide

  30. ܦࡁͷmicroservicesԽ
    • Πϯλʔωοτ͕ਁಁͯ͠৘ใ͕؆୯ʹखʹ
    ೖΔΑ͏ʹͳ͖ͬͯͨ
    • େاۀ(৘ใͷϋϒ)͕ඞཁ͕ͳ͍
    • গͳ͍ਓ਺Ͱग़དྷΔ͜ͱ͕૿͑ͨ
    • ઐۀاۀ, SaaS͕૿͑Δ

    View full-size slide

  31. τϨϯυͷ·ͱΊ
    • ࡉ෼Խɾڞ௨ԽɾઐۀԽ
    • Microservices
    • ૊৫ͷॖখԽ(ϦετϥΫγϣϯ)
    • ͱ͸͍͑ݪཧݪଇ͸มΘ͍ͬͯͳ͍
    • ϓϩάϥϜͷݪཧ: ஞ࣍ɺ෼ذɺ൓෮
    • σʔλߏ଄
    • ໾ׂɺσβΠϯύλʔϯ
    • ਓͱ૊৫

    View full-size slide

  32. ͱ͸͍͑ݪཧݪଇ͸มΘ͍ͬͯͳ͍
    • ϓϩάϥϜͷݪཧ: ஞ࣍ɺ෼ذɺ൓෮
    • σʔλߏ଄
    • ໾ׂɺσβΠϯύλʔϯ
    • ਓͱ૊৫

    View full-size slide

  33. ࠓޙͲ͏͍ͯ͘͠ͱ͍͍͔
    • ݪཧݪଇͷཧղ
    • શମઃܭ͕ग़དྷΔΑ͏ʹͳΔ
    • ༷ʑͳαʔϏεɺݴޠɺϑϨʔϜϫʔΫΛཧ
    ղ͢Δ

    View full-size slide

  34. ઃܭͷ͓͢͢Ίڭࡐ
    • https://martinfowler.com
    • Azure ΞʔΩςΫνϟηϯλʔ
    • Google Web Fundarmentals

    View full-size slide

  35. σʔλϕʔε͓͢͢Ίڭࡐ

    View full-size slide