Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018
Tsukuru Tanimichi
October 24, 2018
Programming
7
1.8k
マネーフォワードにおけるウェブメディア高速化の取り組み / 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
550
WebSocket はどれくらい通じるのかの統計 / websocket-connectivity-survey
ttanimichi
0
450
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
12k
共通基盤システムの開発について
ttanimichi
5
12k
Other Decks in Programming
See All in Programming
【Qiita Night】新卒エンジニアによるSwift6与太予想
eiji127
0
180
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
28
18k
mrubyを1300円のボードで動かそう
yuuu
0
180
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
1.1k
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
2.5k
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
540
バンドル最適化マニアクス at tfconf
mizchi
3
2.2k
Learning DDD輪読会#4 / Learning DDD Book Club #4
suzushin54
1
140
Modern Web Apps with Spring Boot, Angular & TypeScript
toedter
12
14k
JGS594 Lecture 23
javiergs
PRO
0
400
WindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成
oniak3ibm
PRO
0
330
byte列のbit表現を得るencodingライブラリ作った
convto
1
100
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
14
34k
Bash Introduction
62gerente
596
210k
Support Driven Design
roundedbygravity
86
8.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Practical Orchestrator
shlominoach
178
8.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Why Our Code Smells
bkeepers
PRO
324
54k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Bootstrapping a Software Product
garrettdimon
295
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
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