Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webのしくみ Vol.2 ~トレンド~
Search
Yutaka Tachibana
October 19, 2019
Technology
0
170
Webのしくみ Vol.2 ~トレンド~
【プログラミング教室卒業生&受講生限定】同窓LT大会!
https://codebase.connpass.com/event/148508/
Yutaka Tachibana
October 19, 2019
Tweet
Share
More Decks by Yutaka Tachibana
See All by Yutaka Tachibana
道具としてのGraphQLから見る用途や解決する課題
saboyutaka
0
120
会社を実装する
saboyutaka
23
9.2k
GraphQLはどんな時に使うか
saboyutaka
39
10k
ハマる仕掛けと学習習慣
saboyutaka
1
1.4k
Other Decks in Technology
See All in Technology
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
310
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
890
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
AI エージェント開発を支える MaaS としての Azure AI Foundry
ryohtaka
6
630
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
290
現場で役立つAPIデザイン
nagix
35
13k
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
770
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
150
Reading Code Is Harder Than Writing It
trishagee
2
110
Share my, our lessons from the road to re:Invent
naospon
0
110
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.6k
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
Featured
See All Featured
A better future with KSS
kneath
238
17k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Statistics for Hackers
jakevdp
797
220k
Code Reviewing Like a Champion
maltzj
521
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Done Done
chrislema
182
16k
For a Future-Friendly Web
brad_frost
176
9.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building Your Own Lightsaber
phodgson
104
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Transcript
Webͷ͘͠Έ Vol.2 τϨϯυ @saboyutaka 2019/10/19 #codebase_lt
ͳΜͰτϨϯυΛΔͱඞཁ͕͋Δʁ • ࠓޙͲ͏͍͏ٕज़͕དྷΔ͔༧ग़དྷΔ • ੜଘઓུͱ͓ͯͬͯ͘͠͠ͱྑ͍
ΞδΣϯμ • OS, Runtime • ΞϓϦέʔγϣϯ • ϑϩϯτΤϯυ • σʔλ
• ܦࡁ
ڞ௨Խͷϓϩηε খ͘͞ελʔτ େ͖͘ͳΔ, ෳࡶԽ͢Δ ࡉԽ͢Δ ڞ௨Խ͢Δ
OS, RuntimeͷτϨϯυ
ԾԽ • ΦϯϓϨϛε • ԾϚγϯ • ίϯςφ
ԾԽ • ΦϯϓϨϛε(શ෦ࣗݾௐୡ) • ԾϚγϯ(OSͷԾԽ) • VirtualBox, Vagrant • ίϯςφ(RuntimeͷԾԽ)
• Docker, Kurbernetes
XaaS https://pt.slideshare.net/AlexZyl/functionsvslambda-presentation/4 OSͷԾԽ Runtimeͷ ԾԽ ΞϓϦέʔγϣϯ ͷԾԽ • AWS EC2
• Ϩϯλϧαʔόʔ • Heroku • Netlify • AWS Lambda • Azure Functions શ෦ࣗݾௐୡ
ΦϯϓϨϛε, VMͷ࣌ • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊʹඞཁͳΠ ϯϑϥͷௐୡίετ͕ߴ͍ • ग़དྷΔ͚ͩ࠷খߏͰ
XaaS • IaaS, OSͷԾԽ • PaaS, RuntimeͷԾԽ • FaaS, ΞϓϦέʔγϣϯͷԾԽ
ίϯςφٕज़ͷख़ͰRuntime, ΞϓϦέʔγϣϯͷԾԽ·Ͱདྷͨ
ԾԽʹΑͬͯ • ΞϓϦέʔγϣϯΛఏڙ͢ΔͨΊͷ(Πϯ ϑϥ)ͷίετ͕ݮ͖ͬͯͨ • ΞϓϦέʔγϣϯʹूதग़དྷΔΑ͏ʹͳͬͨ • ཧίετ͕͘ͳ͖ͬͯͨͷͰେྔʹΞϓ ϦΛར༻Ͱ͖ΔΑ͏ʹͳͬͨ
ΞϓϦέʔγϣϯͷτϨϯυ
ΞϓϦέʔγϣϯͷΞʔΩςΫνϟ ϞϊϦγοΫ Microservices Serverless
ϞϊϦγοΫͷಛ • Ұ൪ߏͱͯ͠γϯϓϧɺֶशίετ͕͍ • 1͔Β࢝ΊΔ࣌ʹશ෦ἧͬͯΔͷͰศར • ਓγεςϜͷن͕େ͖͘ͳΔͱෳࡶԽ͢ Δ
ԾԽɾίϯςφԽʹΑͬͯ • ෳΞϓϦέʔγϣϯΛཧग़དྷΔΑ͏ʹͳͬͨ • Microservices, Serverless͕Մೳʹ • 1ͭͷΞϓϦέʔγϣϯ͕࣋ͭ୲Օॴ͕ࡉԽ • ෳݴޠɺෳΞϓϦέʔγϣϯ͕લఏʹ
• ڞ௨Խ͞ΕͨॲཧSaaSར༻ • Auth0, Ϣʔβʔೝূج൫ • Stripe, ܾࡁ • Algoria, ݕࡧ • Azure Cognitive Services, ػցֶशAPI
ΞϓϦέʔγϣϯͷτϨϯυ • ࡉԽɺڞ௨෦ͷར༻ • Ϛϧνݴޠ, ݴޠຖͷಘҙͳͱ͜ΖΛ׆͔͢ • Rails, Laravel, Go,
Python, Node.jsͷڞଘ • ֤ݴޠ, ֤DBͷෳΠϯελϯεͷΈ߹Θ ͤͰదࡐదॴΛ࣮ݱ
ϑϩϯτΤϯυͷτϨϯυ
ϑϩϯτΤϯυͰࠓग़ͯ͘Δ • UIͷίϯϙʔωϯτ(෦)Խ • Vue,js, React.js, Angular.js • Bootstrap, Material
Design • ϚϧνϓϥοτϑΥʔϜ(Web, Mobile, Desktop) • αʔόʔαΠυͱͷ • SPA, SSR
ϑϩϯτΤϯυͰى͖͍ͯΔࣄ • ίϯϙʔωϯτԽ͍ͯ͘͢͠ • ؆୯ʹ͍͍ײ͡ͷσβΠϯʹ͍ͨ͠ • αʔόʔαΠυͱͷґଘؔΛͳ͍ͨ͘͠ • Ͱ͖ΕϊϯίʔσΟϯάͰ࡞Γ͍ͨ
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ͷΈ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ͍ͬͯΔ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛΒͳ͍
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) αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛ͍ͬͯΔ αʔόʔ͕ϓϨθϯςʔγϣϯ ϩδοΫΛΒͳ͍
σʔλϕʔεͷτϨϯυ
σʔλϕʔεͷߏཁૉ σʔλͷೖΕ + API
ϦϨʔγϣφϧDBͷߏ ςʔϒϧ + SQL
σʔλͷछྨ • ςʔϒϧ • ελοΫ • Ωϡʔ • υΩϡϝϯτ(ΦϒδΣΫτ) •
ΩʔόϦϡʔ • άϥϑ
σʔλͷAPI • SQL • GraphQL • HTTP(JSON)
ԾԽɾίϯςφԽʹΑͬͯ • DBίϯςφΛ؆୯ʹݐͯΒΕΔΑ͏ʹͳͬͨ • ൚༻తͳ୯ҰͷRDB͔ΒෳҟछDB • దࡐదॴ
ܦࡁͷτϨϯυ
ࡉԽ͍ͯ͠ΔͷγεςϜͩ ͚Ͱͳ͍ɺܦࡁͦͷͷ
ܦࡁͷmicroservicesԽ • Πϯλʔωοτ͕ਁಁͯ͠ใ͕؆୯ʹखʹ ೖΔΑ͏ʹͳ͖ͬͯͨ • େاۀ(ใͷϋϒ)͕ඞཁ͕ͳ͍ • গͳ͍ਓͰग़དྷΔ͜ͱ͕૿͑ͨ • ઐۀاۀ,
SaaS͕૿͑Δ
·ͱΊ
τϨϯυͷ·ͱΊ • ࡉԽɾڞ௨ԽɾઐۀԽ • Microservices • ৫ͷॖখԽ(ϦετϥΫγϣϯ) • ͱ͍͑ݪཧݪଇมΘ͍ͬͯͳ͍ •
ϓϩάϥϜͷݪཧ: ஞ࣍ɺذɺ෮ • σʔλߏ • ׂɺσβΠϯύλʔϯ • ਓͱ৫
ͱ͍͑ݪཧݪଇมΘ͍ͬͯͳ͍ • ϓϩάϥϜͷݪཧ: ஞ࣍ɺذɺ෮ • σʔλߏ • ׂɺσβΠϯύλʔϯ • ਓͱ৫
ࠓޙͲ͏͍ͯ͘͠ͱ͍͍͔ • ݪཧݪଇͷཧղ • શମઃܭ͕ग़དྷΔΑ͏ʹͳΔ • ༷ʑͳαʔϏεɺݴޠɺϑϨʔϜϫʔΫΛཧ ղ͢Δ
ઃܭͷ͓͢͢Ίڭࡐ • https://martinfowler.com • Azure ΞʔΩςΫνϟηϯλʔ • Google Web Fundarmentals
σʔλϕʔε͓͢͢Ίڭࡐ