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
マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018
Search
Tsukuru Tanimichi
October 24, 2018
Programming
7
2.3k
マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018
Fastly Yamagoya Meetup 2018
Tsukuru Tanimichi
October 24, 2018
Tweet
Share
More Decks by Tsukuru Tanimichi
See All by Tsukuru Tanimichi
react-rails で SPA, SSR を実現する / react-rails-spa-ssr
ttanimichi
2
1.1k
WebSocket はどれくらい通じるのかの統計 / websocket-connectivity-survey
ttanimichi
0
600
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
13k
共通基盤システムの開発について
ttanimichi
5
13k
Other Decks in Programming
See All in Programming
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
🔨 小さなビルドシステムを作る
momeemt
4
680
RDoc meets YARD
okuramasafumi
4
170
Swift Updates - Learn Languages 2025
koher
2
480
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
チームのテスト力を鍛える
goyoki
3
210
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
320
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
230
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
760
Design Foundational Data Engineering Observability
sucitw
3
200
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
YesSQL, Process and Tooling at Scale
rocio
173
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Code Reviewing Like a Champion
maltzj
525
40k
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
347
40k
Transcript
ϚωʔϑΥϫʔυʹ͓͚Δ ΣϒϝσΟΞߴԽͷऔΓΈ 'BTUMZ:BNBHPZB !UUBOJNJDIJ୩ಓ 5TVLVSV5BOJNJDIJ
ࣗݾհ w !UUBOJNJDIJ୩ಓ 5TVLVSV5BOJNJDIJ w ϑϦʔϥϯε w
݄ʙϚωʔϑΥϫʔυʹৗற w ΣϒϝσΟΞͷϦϓϨʔεߴԽΛ୲ w αʔόʔΤϯδχΞ w 3VCZPO3BJMT %FW0QT 'SPOUFOE
αʔϏεհ w .0/&:1-64 w IUUQTNFEJBNPOFZGPSXBSEDPN w ϚωʔϑΥϫʔυ͕ӡӦ͢ΔΣϒϝσΟΞ w
Ոܭܦࡁʹؔ͢Δهࣄ w ࣗಈՈܭɾࢿ࢈ཧαʔϏεʮϚωʔϑΥϫʔυʯ ͰӾཡͰ͖Δ
None
None
None
ࠓճͷ։ൃʹ͍ͭͯ w 3VCZPO3BJMTͰϑϧεΫϥονͰ࡞Γͨ͠ w طଘ8PSE1SFTT w ͱʹ͔͘ߴԽ͍ͨ͠ w
ճ༡ΛߴΊΔͨΊ w ඵͰߴԽ͍ͨ͠
'BTUMZલఏͰઃܭͨ͠΄͏͕͍͍ཧ༝2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTFFFEGFFDF ͳ͍ͥ·)FSPLVͳͷ͔2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF ෦44341"Ͱ443͢Δ͚ͲαΠυόʔ͚ͩඇಉظͰऔಘ ͍ͨ͠2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBFDBEE ؔ࿈͢Δهࣄʢެ։ࡁΈʣ
ߴԽͱΞʔΩςΫνϟ
ߴԽͷҊ w 41" w 'BTUMZಋೖ w 4FSWJDF8PSLFS 18"
w όοΫΤϯυΩϟογϡ w ͳͲͳͲ
ߴԽͷҊ ରԠίετͷݟੵΓ 41" େ 'BTUMZಋೖ த 4FSWJDF8PSLFS 18" த όοΫΤϯυΩϟογϡ
খ
w ରԠίετͷେখ͋ΕͲɺجຊతʹͯ͢Δ w ඵͰߴԽ͍ͨ͠ w ͨͩ͠41"ݟૹΔ͖͔໎ͬͨ w ͕ΒΈͦ͏
w 41"ʹ͢ΔͷͰ͋Ε443ඞਢ w ΣϒϝσΟΞͳͷͰ4&0ॏཁ͔ͩΒ
w ݁ہɺ41"ͱͯ͠࡞Δ͜ͱʹͨ͠ w 3FBDU 3FEVYΛ࠾༻ w ඵͰߴԽ͍ͨ͠ w
ޙ͔Β41"ʹ࡞Γม͑Δͷݱ࣮తʹແཧ w ΔͳΒ࠷ॳ͔Β41"ͱͯ͠ઃܭ͢Δ͔͠ͳ͍ w ճ༡㲈هࣄ͔ΒهࣄͷભҠ w 41"Ͱهࣄͷຊจ͚ͩࠩ͠ସ͑Δͱͦ͏
ߏ
όοΫΤϯυ)FSPLV w 4FSWJDF8PSLFSͷΩϟογϡͱ'BTUMZͷΩϟογϡ Ͱ΄ͱΜͲͷϨεϙϯεฦͤΔͣ w PSJHJOʹɺ΄ͱΜͲϦΫΤετ͕དྷͳ͍ఆ w 4FSWJDF8PSLFSͷઌಡΈ͋Δ
w ϨΠςϯγ͕ͳ͍ͳΒӡ༻Λָʹ͍ͨ͠ ͳ͍ͥ·)FSPLVͳͷ͔2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF
$MPVEJOBSZʹ͍ͭͯ w ػೳతʹ'BTUMZ*NBHF0QUJNJ[FSΛͬͯྑ ͔ͬͨ w $%/ͱҰຊԽͰ͖Δͷྑͦ͞͏ w PSJHJOͷը૾ϑΝΠϧͷཧΛߟ͑ͨ͘ͳ͔ͬͨ
SPA, SSR
w ࠓৄ࣌ؒ͘͢͠ͳͦ͞͏ w SFBDUSBJMT w 3BJMTͰ443 w ৄࡉ3BJMT%FWFMPQFS.FFUVQ%BZ Ͱ͠·͢ w
41" 443
Fastly ಋೖ
'BTUMZಋೖ w GBTUMZGBTUMZSBJMT w ΄΅ͯ͢ͷΤϯυϙΠϯτΛ'BTUMZͰΩϟογϡ w 8FC"1*ͷ+40/ w
443݁Ռͷ)5.- w Ωϟογϡ͍ͯ͠ΔϦιʔε͕ߋ৽͞ΕͨΒQVSHF w ΣϒϝσΟΞͳͷͰࠓͷͱ͜Ζ΄ͱΜͲͷߋ৽ ฤूऀ͕ཧը໘ͰهࣄΛߋ৽ͨ͠ͱ͖
w هࣄ͕όζ͍ͬͯΔ࣌΄ͲΞΫηεͷہॴੑ͕ߴ·Δ w ߴ͍Ωϟογϡώοτ͕ظͰ͖ͦ͏
Fastly Λલఏͱͨ͠ઃܭ
ॳఆ͍ͯͨ͠։ൃͷॱং w ࠷ॳΩϟογϡ͕ͳ͍ঢ়ଶͰಈ͘ͷΛ࡞Δ w ࣍ʹόοΫΤϯυΩϟογϡΛಋೖ w ࣍ʹ'BTUMZͷΩϟογϡΛಋೖ w
࠷ޙʹ4FSWJDF8PSLFSͷΩϟογϡΛಋೖ w Ԟ͔ΒखલͷॱʹΩϟογϡ͍ͯ͘͠ w ઌʹखલͰΩϟογϡͯ͠͠·͏ͱԞͷΩϟο γϡͷಈ࡞֬ೝ͕͘͠ͳΔ
'BTUMZΛલఏͱͨ͠ઃܭ w $%/ͳΜͩ͠ޙ͔Βߟ͑Ε͍͍ͱࢥ͍ͬͯͨ w ࣮ࡍʹ'BTUMZલఏͰઃܭ͖ͩͬͨ͢ w ࣮ଶ7BSOJTIBTB4FSWJDF w
ͭ·ΓϛυϧΣΞ w ϛυϧΣΞͳΒઃܭॳ͔Βௐࠪͯ͠ݕ౼͢ Δͷී௨
'BTUMZલఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
'BTUMZલఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
None
None
None
None
ϥΠϑαΠΫϧ͕ҟͳΔίϯϙʔωϯτ w ୯७ʹϖʔδΩϟογϡͯ͠͠·͏ͱQVSHF͕සൃ͠ ͯΩϟογϡώοτ͕͘ͳΔ w هࣄϖʔδઍ͋Δ w ͯ͢Ұ࣌ؒʹҰճQVSHF͞Εͯ͠·͏
w αΠυόʔΛඇಉظʹͯ͠هࣄϖʔδ͔ΒΓ͢ w ͋Δ͍&4* &EHF4JEF*ODMVEFT Λ͏
ඇಉظWT&4* w ࠓճͷ߹ɺαΠυόʔͷϦιʔε4&0తʹෆཁ w ϥϯΩϯάͷදࣔهࣄͷ4&0ରࡦͱؔͳ͍ w ඇಉظͰऔಘ͢Δ͜ͱʹͨ͠ w
4&0తʹॏཁͳϦιʔεͩͬͨΒ&4*Λ͏͔͠ͳ͍ w IUUQTEPDTGBTUMZDPNHVJEFTQFSGPSNBODF UVOJOHVTJOHFEHFTJEFJODMVEFT
͜ΕΛ React, Redux ͰͲ͏දݱ͢Δ͔
w αΠυόʔΛඇಉظʹ͢Δ'BTUMZʹΩϟογϡͤ͞ ͨ͘ͳ͍ίϯϙʔωϯτΛ443͔Βআ֎͢Δ w ෦443 ෦44341"Ͱ443͢Δ͚ͲαΠυόʔ͚ͩඇಉظͰ औಘ͍ͨ͠2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBFDBEE
(&5BSUJDMFT αΠυόʔΛআ֎ͯ͠443ͨ݁͠ՌΛ'BTUMZ͕Ωϟογϡ
// Layout.js class Layout extends React.Component { +
componentDidMount() { + this.props.fetchAside(); + } render() { return ( // snip ); } } Layout.propTypes = { fetchAside: PropTypes.func.isRequired, }; DPNQPOFOU%JE.PVOUͰEJTQBUDI
// actions/fetchAside.js import fetchResource from '../utils/fetchResource'; export default
function fetchAside() { return { type: 'FETCH_ASIDE', payload: fetchResource('/api/v1/async/aside'), }; } 3FEVYͷBDUJPODSFBUPS
// utils/fetchResource.js export default async function fetchResource(path) {
const response = await fetch(path); return response.json(); } 4FSWJDF8PSLFSΛ͏༧ఆͳͷͰGFUDI w 'BTUMZͰ443Ͱ͖ΔͱͬͱγϯϓϧʹͰ͖ͦ͏ w &EHFͰ443 w TBOECPY
'BTUMZલఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
όοΫΤϯυΩϟογϡෆཁ͔ w .FNDBDIFE3FEJTͳͲͷΩϟογϡ w 3BJMTͳΒ.FN$BDIF4UPSFͳͲ w ͦͦPSJHJOʹϦΫΤετ͕΄ͱΜͲདྷͳ͍߹ w
'BTUMZͷΩϟογϡͱQVSHFͷ͕݅ॏෳ͢Δ߹ w සൟʹߋ৽͞ΕΔϦιʔεΛ࣌ؒ͘͝Ωϟογϡ͢Δ ͳͲͷ༻్͕͋Δ߹༗༻͔
'BTUMZલఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
ΞΫηεΧϯλΞΫηεϥϯΩϯά w αʔόʔϩάܕͷΞΫηεΧϯλ w 'BTUMZ͕Ωϟογϡ͍ͯ͠Δ߹ w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Δ߹ w
PSJHJO·ͰϦΫΤετ͕ಧ͔ͳ͍߹͕͋ΔͷͰਖ਼ৗ ʹಈ͔ͳ͍ w Ϗʔίϯܕʹ͢Δ
αʔόʔϩάܕWTϏʔίϯܕ w αʔόʔϩάܕΞΫηεϩά w Ϗʔίϯܕදࣔ࣌ʹϒϥβ͔Β"1*Λୟ͍ͯΞΫηε ΛՃࢉ͢Δ w ࠓճͷ߹ɺϏʔίϯܕͰɺΞΫηεϥϯΩϯά
3FEJTͷ4PSUFE4FUͰ࣮ w Ωϟογϡ͞ΕΔͱා͍ͷͰ1045ʹͨ͠ w (PPHMF"OBMZUJDT͔ΒΞΫηεΛऔಘ͢Δͱ͍͏Ҋ ͋Δ͔
Service Worker (PWA)
4FSWJDF8PSLFS 18" w ·ͩಋೖͰ͖͍ͯͳ͍ɻޙՃ͢Δ༧ఆ w YISͰͳ͘GFUDIΛ͏ͳͲɺ४උ͍ͯ͠Δ w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Ε4FSWJDF
8PSLFS͕ϨεϙϯεΛฦ͢ w 'BTUMZ͕Ωϟογϡ͍ͯ͠Ε'BTUMZ͕ฦ͢ w खલͰΩϟογϡ͞Ε͍ͯΔ΄Ͳ͍ w ۃྗखલͰϨεϙϯεΛฦ͍ͨ͠
·ͱΊ w ΩϟογϡΛલఏʹઃܭ͢Δ w ߴ͍Ωϟογϡώοτ w ߴԽ w
ΞΫηεΧϯλͳͲΩϟογϡΛߟྀ࣮ͯ͠͠ ͳ͍ͱదʹಈ͔ͳ͍߹͕͋Δ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ 3FBDUɺ3FEVYɺ18"ͰϝσΟΞ։ൃ͢Δ ϑϩϯτΤϯδχΞΛืूʂ8BOUFEMZ IUUQTXXXXBOUFEMZDPNQSPKFDUT 3BJMTŊ3FBDUͰ41"ͷϝσΟΞΛ ։ൃ͢ΔΤϯδχΞΛืू8BOUFEMZ IUUQTXXXXBOUFEMZDPNQSPKFDUT