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.2k
マネーフォワードにおけるウェブメディア高速化の取り組み / 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
1k
WebSocket はどれくらい通じるのかの統計 / websocket-connectivity-survey
ttanimichi
0
540
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
12k
共通基盤システムの開発について
ttanimichi
5
13k
Other Decks in Programming
See All in Programming
Subclassing, Composition, Python, and You
hynek
3
120
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
280
App Router 悲喜交々
quramy
7
380
コードレビューと私の過去と未来
jxmtst
0
230
上手に付き合うコンポーネントテスト
quramy
3
1.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
6
260
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
3
190
Kubernetes上でOracle_Databaseの運用を楽にするOraOperatorの紹介
nnaka2992
0
150
Vue :: Better Testing 2024
up1
1
390
ECS向けのドリフト検知機構を実装してみた
tkikuc
0
280
RDBの世界をぬりかえていくモデルグラフDB〜truncus graphによるモデルファースト開発〜
jurabi
0
160
XP2024 っていう国際会議に行ってきたよの記 / XP2024 Conference Report
bonotake
4
200
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing with Data
zakiwarfel
98
5.1k
The World Runs on Bad Software
bkeepers
PRO
65
11k
The Cult of Friendly URLs
andyhume
77
6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Side Projects
sachag
452
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
Making the Leap to Tech Lead
cromwellryan
130
8.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4k
GraphQLとの向き合い方2022年版
quramy
43
13k
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