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
140
会社を実装する
saboyutaka
23
9.5k
GraphQLはどんな時に使うか
saboyutaka
39
11k
ハマる仕掛けと学習習慣
saboyutaka
1
1.5k
Other Decks in Technology
See All in Technology
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
150
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.5k
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
4
4.8k
帳票Vibe Coding
terurou
0
150
Backboneとしてのtimm2025
yu4u
5
1.7k
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
150
LLMエージェント時代に適応した開発フロー
hiragram
1
440
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
870
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
16
8.1k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
720
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
1
250
DeNA での思い出 / Memories at DeNA
orgachem
PRO
4
1.8k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Invisible Side of Design
smashingmag
301
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
A Tale of Four Properties
chriscoyier
160
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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
σʔλϕʔε͓͢͢Ίڭࡐ