マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018

ϚωʔϑΥϫʔυʹ͓͚Δ ΢ΣϒϝσΟΞߴ଎ԽͷऔΓ૊Έ 'BTUMZ:BNBHPZB !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

ࣗݾ঺հ w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ w ϑϦʔϥϯε w
೥݄ʙϚωʔϑΥϫʔυʹৗற w ΢ΣϒϝσΟΞͷϦϓϨʔεߴ଎ԽΛ୲౰ w αʔόʔΤϯδχΞ w 3VCZPO3BJMT %FW0QT 'SPOUFOE

αʔϏε঺հ w .0/&:1-64 w IUUQTNFEJBNPOFZGPSXBSEDPN w ϚωʔϑΥϫʔυ͕ӡӦ͢Δ΢ΣϒϝσΟΞ w
Ոܭ΍ܦࡁʹؔ͢Δهࣄ w ࣗಈՈܭ฽ɾࢿ࢈؅ཧαʔϏεʮϚωʔϑΥϫʔυʯ ಺Ͱ΋ӾཡͰ͖Δ

ࠓճͷ։ൃʹ͍ͭͯ 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લఏͰઃܭ͢΂͖ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτ͸ඇಉظʹ͢΂͖͔ͩΒ όοΫΤϯυͷΩϟογϡ͸ͦ΋ͦ΋ෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯά΍ΞΫηεΧ΢ϯλΛ࡞Δ৔߹ɺ ൃ૝Λࠜຊతʹม͑Δඞཁ͕͋Δ͔Β

ϥΠϑαΠΫϧ͕ҟͳΔίϯϙʔωϯτ 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

όοΫΤϯυΩϟογϡ͸ෆཁ͔΋ w .FNDBDIFE΍3FEJTͳͲͷΩϟογϡ w 3BJMTͳΒ.FN$BDIF4UPSFͳͲ w ͦ΋ͦ΋PSJHJOʹϦΫΤετ͕΄ͱΜͲདྷͳ͍৔߹ w
'BTUMZͷΩϟογϡͱQVSHFͷ৚͕݅ॏෳ͢Δ৔߹ w සൟʹߋ৽͞ΕΔϦιʔεΛ͘͝୹࣌ؒΩϟογϡ͢Δ ͳͲͷ༻్͕͋Δ৔߹͸༗༻͔΋

ΞΫηεΧ΢ϯλΞΫηεϥϯΩϯά 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

マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018

マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018

More Decks by Tsukuru Tanimichi

Other Decks in Programming

Featured

Transcript