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
200
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
150
会社を実装する
saboyutaka
23
9.5k
GraphQLはどんな時に使うか
saboyutaka
39
11k
ハマる仕掛けと学習習慣
saboyutaka
1
1.5k
Other Decks in Technology
See All in Technology
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
11k
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
160
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
920
Language Update: Java
skrb
2
300
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
140
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
450
テストを軸にした生き残り術
kworkdev
PRO
0
200
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
370
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
180
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Code Review Best Practice
trishagee
70
19k
Bash Introduction
62gerente
615
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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
σʔλϕʔε͓͢͢Ίڭࡐ