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
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
490
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
140
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
510
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
280
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
620
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
Node.js 2025: What's new and what's next
ruyadorno
0
130
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
120
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
180
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
260
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
How to train your dragon (web standard)
notwaldorf
96
6.3k
A Tale of Four Properties
chriscoyier
161
23k
Mobile First: as difficult as doing things right
swwweet
224
10k
Making Projects Easy
brettharned
119
6.4k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Typedesign – Prime Four
hannesfritz
42
2.8k
Navigating Team Friction
lara
190
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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
σʔλϕʔε͓͢͢Ίڭࡐ