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

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

Transcript

1. Webͷ͘͠Έ Vol.2 τϨϯυ @saboyutaka 2019/10/19 #codebase_lt
2. ͳΜͰτϨϯυΛ஌Δͱඞཁ͕͋Δʁ • ࠓޙͲ͏͍͏ٕज़͕དྷΔ͔༧૝ग़དྷΔ • ੜଘઓུͱ͓ͯͬͯ͘͠͠ͱྑ͍
3. ΞδΣϯμ • OS, Runtime • ΞϓϦέʔγϣϯ • ϑϩϯτΤϯυ • σʔλ • ܦࡁ
4. ڞ௨Խͷϓϩηε খ͘͞ελʔτ େ͖͘ͳΔ, ෳࡶԽ͢Δ ࡉ෼Խ͢Δ ڞ௨Խ͢Δ
5. OS, RuntimeͷτϨϯυ
6. Ծ૝Խ • ΦϯϓϨϛε • Ծ૝Ϛγϯ • ίϯςφ
7. Ծ૝Խ • ΦϯϓϨϛε(શ෦ࣗݾௐୡ) • Ծ૝Ϛγϯ(OSͷԾ૝Խ) • VirtualBox, Vagrant • ίϯςφ(RuntimeͷԾ૝Խ) • Docker, Kurbernetes
8. XaaS https://pt.slideshare.net/AlexZyl/functionsvslambda-presentation/4 OSͷԾ૝Խ Runtimeͷ Ծ૝Խ ΞϓϦέʔγϣϯ ͷԾ૝Խ • AWS EC2 • Ϩϯλϧαʔόʔ • Heroku • Netlify • AWS Lambda • Azure Functions શ෦ࣗݾௐୡ
9. ΦϯϓϨϛε, VMͷ࣌୅ • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊʹඞཁͳΠ ϯϑϥͷௐୡίετ͕ߴ͍ • ग़དྷΔ͚ͩ࠷খߏ੒Ͱ
10. XaaS • IaaS, OSͷԾ૝Խ • PaaS, RuntimeͷԾ૝Խ • FaaS, ΞϓϦέʔγϣϯͷԾ૝Խ ίϯςφٕज़ͷ੒ख़ͰRuntime, ΞϓϦέʔγϣϯͷԾ૝Խ·Ͱདྷͨ
11. Ծ૝ԽʹΑͬͯ • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊͷ౔୆(Πϯ ϑϥ)΁ͷίετ͕ݮ͖ͬͯͨ • ΞϓϦέʔγϣϯʹूதग़དྷΔΑ͏ʹͳͬͨ • ؅ཧίετ͕௿͘ͳ͖ͬͯͨͷͰେྔʹΞϓ ϦΛར༻Ͱ͖ΔΑ͏ʹͳͬͨ
12. ΞϓϦέʔγϣϯͷτϨϯυ
13. ΞϓϦέʔγϣϯͷΞʔΩςΫνϟ ϞϊϦγοΫ Microservices Serverless
14. ϞϊϦγοΫͷಛ௃ • Ұ൪ߏ੒ͱͯ͠γϯϓϧɺֶशίετ͕௿͍ • 1͔Β࢝ΊΔ࣌ʹશ෦ἧͬͯΔͷͰศར • ਓ΍γεςϜͷن໛͕େ͖͘ͳΔͱෳࡶԽ͢ Δ
15. Ծ૝ԽɾίϯςφԽʹΑͬͯ • ෳ਺ΞϓϦέʔγϣϯΛ؅ཧग़དྷΔΑ͏ʹͳͬͨ • Microservices, Serverless͕Մೳʹ • 1ͭͷΞϓϦέʔγϣϯ͕࣋ͭ୲౰Օॴ͕ࡉ෼Խ • ෳ਺ݴޠɺෳ਺ΞϓϦέʔγϣϯ͕લఏʹ • ڞ௨Խ͞Εͨॲཧ͸SaaSར༻ • Auth0, Ϣʔβʔೝূج൫ • Stripe, ܾࡁ • Algoria, ݕࡧ • Azure Cognitive Services, ػցֶशAPI
16. ΞϓϦέʔγϣϯͷτϨϯυ • ࡉ෼Խɺڞ௨෦඼ͷར༻ • Ϛϧνݴޠ, ݴޠຖͷಘҙͳͱ͜ΖΛ׆͔͢ • Rails, Laravel, Go, Python, Node.jsͷڞଘ • ֤ݴޠ, ֤DBͷෳ਺Πϯελϯεͷ૊Έ߹Θ ͤͰదࡐదॴΛ࣮ݱ
17. ϑϩϯτΤϯυͷτϨϯυ
18. ϑϩϯτΤϯυͰࠓग़ͯ͘Δ࿩୊ • UIͷίϯϙʔωϯτ(෦඼)Խ • Vue,js, React.js, Angular.js • Bootstrap, Material Design • ϚϧνϓϥοτϑΥʔϜ(Web, Mobile, Desktop) • αʔόʔαΠυͱͷ෼཭ • SPA, SSR
19. ϑϩϯτΤϯυͰى͖͍ͯΔࣄ • ίϯϙʔωϯτԽͯ͠࢖͍΍͘͢ • ؆୯ʹ͍͍ײ͡ͷσβΠϯʹ͍ͨ͠ • αʔόʔαΠυͱͷґଘؔ܎Λͳ͍ͨ͘͠ • Ͱ͖Ε͹ϊϯίʔσΟϯάͰ࡞Γ͍ͨ
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ͷΈ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌͍ͬͯΔ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌Βͳ͍
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) αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌͍ͬͯΔ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ஌Βͳ͍
22. σʔλϕʔεͷτϨϯυ
23. σʔλϕʔεͷߏ੒ཁૉ σʔλͷೖΕ෺ + API
24. ϦϨʔγϣφϧDBͷߏ੒ ςʔϒϧ + SQL
25. σʔλͷछྨ • ςʔϒϧ • ελοΫ • Ωϡʔ • υΩϡϝϯτ(ΦϒδΣΫτ) • ΩʔόϦϡʔ • άϥϑ
26. σʔλͷAPI • SQL • GraphQL • HTTP(JSON)
27. Ծ૝ԽɾίϯςφԽʹΑͬͯ • DBίϯςφΛ؆୯ʹݐͯΒΕΔΑ͏ʹͳͬͨ • ൚༻తͳ୯ҰͷRDB͔Βෳ਺ҟछDB΁ • దࡐదॴ
28. ܦࡁͷτϨϯυ
29. ࡉ෼Խ͍ͯ͠Δͷ͸γεςϜͩ ͚Ͱ͸ͳ͍ɺܦࡁͦͷ΋ͷ
30. ܦࡁͷmicroservicesԽ • Πϯλʔωοτ͕ਁಁͯ͠৘ใ͕؆୯ʹखʹ ೖΔΑ͏ʹͳ͖ͬͯͨ • େاۀ(৘ใͷϋϒ)͕ඞཁ͕ͳ͍ • গͳ͍ਓ਺Ͱग़དྷΔ͜ͱ͕૿͑ͨ • ઐۀاۀ, SaaS͕૿͑Δ
31. ·ͱΊ
32. τϨϯυͷ·ͱΊ • ࡉ෼Խɾڞ௨ԽɾઐۀԽ • Microservices • ૊৫ͷॖখԽ(ϦετϥΫγϣϯ) • ͱ͸͍͑ݪཧݪଇ͸มΘ͍ͬͯͳ͍ • ϓϩάϥϜͷݪཧ: ஞ࣍ɺ෼ذɺ൓෮ • σʔλߏ଄ • ໾ׂɺσβΠϯύλʔϯ • ਓͱ૊৫
33. ͱ͸͍͑ݪཧݪଇ͸มΘ͍ͬͯͳ͍ • ϓϩάϥϜͷݪཧ: ஞ࣍ɺ෼ذɺ൓෮ • σʔλߏ଄ • ໾ׂɺσβΠϯύλʔϯ • ਓͱ૊৫
34. ࠓޙͲ͏͍ͯ͘͠ͱ͍͍͔ • ݪཧݪଇͷཧղ • શମઃܭ͕ग़དྷΔΑ͏ʹͳΔ • ༷ʑͳαʔϏεɺݴޠɺϑϨʔϜϫʔΫΛཧ ղ͢Δ
35. ઃܭͷ͓͢͢Ίڭࡐ • https://martinfowler.com • Azure ΞʔΩςΫνϟηϯλʔ • Google Web Fundarmentals
36. σʔλϕʔε͓͢͢Ίڭࡐ