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

1.

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

2.

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

3.

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

5.

None

6.

None

7.

None

8.

ࠓճͷ։ൃʹ͍ͭͯ w 3VCZPO3BJMTͰϑϧεΫϥονͰ࡞Γ௚ͨ͠ w طଘ͸8PSE1SFTT w ͱʹ͔͘ߴ଎Խ͍ͨ͠ w
ճ༡཰ΛߴΊΔͨΊ w ඵͰ΋ߴ଎Խ͍ͨ͠

9.

'BTUMZલఏͰઃܭͨ͠΄͏͕͍͍ཧ༝2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTFFFEGFFDF ͳ͍ͥ·)FSPLVͳͷ͔2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF ෦෼44341"Ͱ443͢Δ͚ͲαΠυόʔ͚ͩ͸ඇಉظͰऔಘ ͍ͨ͠2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBFDBEE ؔ࿈͢Δهࣄʢެ։ࡁΈʣ

10.

ߴ଎ԽͱΞʔΩςΫνϟ

11.

ߴ଎ԽͷҊ w 41" w 'BTUMZಋೖ w 4FSWJDF8PSLFS 18"
w όοΫΤϯυΩϟογϡ w ͳͲͳͲ

12.

ߴ଎ԽͷҊ ରԠίετͷݟੵΓ 41" େ 'BTUMZಋೖ த 4FSWJDF8PSLFS 18" த όοΫΤϯυΩϟογϡ
খ

13.

w ରԠίετͷେখ͸͋ΕͲɺجຊతʹ͸͢΂ͯ΍Δ w ඵͰ΋ߴ଎Խ͍ͨ͠ w ͨͩ͠41"͸ݟૹΔ΂͖͔໎ͬͨ w ޻਺͕๲ΒΈͦ͏
w 41"ʹ͢ΔͷͰ͋Ε͹443΋ඞਢ w ΢ΣϒϝσΟΞͳͷͰ4&0͸ॏཁ͔ͩΒ

14.

w ݁ہɺ41"ͱͯ͠࡞Δ͜ͱʹͨ͠ w 3FBDU 3FEVYΛ࠾༻ w ඵͰ΋ߴ଎Խ͍ͨ͠ w
ޙ͔Β41"ʹ࡞Γม͑Δͷ͸ݱ࣮తʹແཧ w ΍ΔͳΒ࠷ॳ͔Β41"ͱͯ͠ઃܭ͢Δ͔͠ͳ͍ w ճ༡㲈هࣄ͔Βهࣄ΁ͷભҠ w 41"Ͱهࣄͷຊจ͚ͩࠩ͠ସ͑Δͱ଎ͦ͏

15.

ߏ੒

16.

όοΫΤϯυ͸)FSPLV w 4FSWJDF8PSLFSͷΩϟογϡͱ'BTUMZͷΩϟογϡ Ͱ΄ͱΜͲͷϨεϙϯε͸ฦͤΔ͸ͣ w PSJHJOʹ͸ɺ΄ͱΜͲϦΫΤετ͕དྷͳ͍૝ఆ w 4FSWJDF8PSLFSͷઌಡΈ΋͋Δ
w ϨΠςϯγ͕໰୊ͳ͍ͳΒӡ༻Λָʹ͍ͨ͠ ͳ͍ͥ·)FSPLVͳͷ͔2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF

17.

$MPVEJOBSZʹ͍ͭͯ w ػೳతʹ͸'BTUMZ*NBHF0QUJNJ[FSΛ࢖ͬͯ΋ྑ ͔ͬͨ w $%/ͱҰຊԽͰ͖Δͷ͸ྑͦ͞͏ w PSJHJOͷը૾ϑΝΠϧͷ؅ཧΛߟ͑ͨ͘ͳ͔ͬͨ

18.

SPA, SSR

19.

w ࠓ೔͸ৄ͘͠࿩࣌ؒ͢ͳͦ͞͏ w SFBDUSBJMT w 3BJMTͰ443 w ৄࡉ͸3BJMT%FWFMPQFS.FFUVQ%BZ Ͱ࿩͠·͢ w
41" 443

20.

Fastly ಋೖ

21.

'BTUMZಋೖ w GBTUMZGBTUMZSBJMT w ΄΅͢΂ͯͷΤϯυϙΠϯτΛ'BTUMZͰΩϟογϡ w 8FC"1*ͷ+40/ w
443݁Ռͷ)5.- w Ωϟογϡ͍ͯ͠ΔϦιʔε͕ߋ৽͞ΕͨΒQVSHF w ΢ΣϒϝσΟΞͳͷͰࠓͷͱ͜Ζ΄ͱΜͲͷߋ৽͸ ฤूऀ͕؅ཧը໘ͰهࣄΛߋ৽ͨ͠ͱ͖

22.

w هࣄ͕όζ͍ͬͯΔ࣌΄ͲΞΫηεͷہॴੑ͕ߴ·Δ w ߴ͍Ωϟογϡώοτ཰͕ظ଴Ͱ͖ͦ͏

23.

Fastly Λલఏͱͨ͠ઃܭ

24.

౰ॳ૝ఆ͍ͯͨ͠։ൃͷॱং w ࠷ॳ͸Ωϟογϡ͕ͳ͍ঢ়ଶͰಈ͘΋ͷΛ࡞Δ w ࣍ʹόοΫΤϯυΩϟογϡΛಋೖ w ࣍ʹ'BTUMZͷΩϟογϡΛಋೖ w
࠷ޙʹ4FSWJDF8PSLFSͷΩϟογϡΛಋೖ w Ԟ͔ΒखલͷॱʹΩϟογϡ͍ͯ͘͠ w ઌʹखલͰΩϟογϡͯ͠͠·͏ͱԞͷΩϟο γϡͷಈ࡞֬ೝ͕೉͘͠ͳΔ

25.

'BTUMZΛલఏͱͨ͠ઃܭ w $%/ͳΜͩ͠ޙ͔Βߟ͑Ε͹͍͍΍ͱࢥ͍ͬͯͨ w ࣮ࡍʹ͸'BTUMZલఏͰઃܭ͢΂͖ͩͬͨ w ࣮ଶ͸7BSOJTIBTB4FSWJDF w
ͭ·Γϛυϧ΢ΣΞ w ϛυϧ΢ΣΞͳΒ͹ઃܭ౰ॳ͔Βௐࠪͯ͠ݕ౼͢ Δͷ͸ී௨

26.

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

27.


28.

None

29.

None

30.

None

31.

None

32.

ϥΠϑαΠΫϧ͕ҟͳΔίϯϙʔωϯτ w ୯७ʹϖʔδΩϟογϡͯ͠͠·͏ͱQVSHF͕සൃ͠ ͯΩϟογϡώοτ཰͕௿͘ͳΔ w هࣄϖʔδ͸਺ઍ͋Δ w ͢΂ͯҰ࣌ؒʹҰճQVSHF͞Εͯ͠·͏
w αΠυόʔΛඇಉظʹͯ͠هࣄϖʔδ͔Β੾Γ཭͢ w ͋Δ͍͸&4* &EHF4JEF*ODMVEFT Λ࢖͏

33.

ඇಉظWT&4* w ࠓճͷ৔߹ɺαΠυόʔͷϦιʔε͸4&0తʹෆཁ w ϥϯΩϯάͷදࣔ͸هࣄͷ4&0ରࡦͱ͸ؔ܎ͳ͍ w ඇಉظͰऔಘ͢Δ͜ͱʹͨ͠ w
4&0తʹॏཁͳϦιʔεͩͬͨΒ&4*Λ࢖͏͔͠ͳ͍ w IUUQTEPDTGBTUMZDPNHVJEFTQFSGPSNBODF UVOJOHVTJOHFEHFTJEFJODMVEFT

34.

͜ΕΛ React, Redux ͰͲ͏දݱ͢Δ͔

35.

w αΠυόʔΛඇಉظʹ͢Δ'BTUMZʹΩϟογϡͤ͞ ͨ͘ͳ͍ίϯϙʔωϯτΛ443͔Βআ֎͢Δ w ෦෼443 ෦෼44341"Ͱ443͢Δ͚ͲαΠυόʔ͚ͩ͸ඇಉظͰ औಘ͍ͨ͠2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBFDBEE

36.

(&5BSUJDMFT αΠυόʔΛআ֎ͯ͠443ͨ݁͠ՌΛ'BTUMZ͕Ωϟογϡ

37.

// Layout.js class Layout extends React.Component { +
componentDidMount() { + this.props.fetchAside(); + } render() { return ( // snip ); } } Layout.propTypes = { fetchAside: PropTypes.func.isRequired, }; DPNQPOFOU%JE.PVOUͰEJTQBUDI

38.

// actions/fetchAside.js import fetchResource from '../utils/fetchResource'; export default
function fetchAside() { return { type: 'FETCH_ASIDE', payload: fetchResource('/api/v1/async/aside'), }; } 3FEVYͷBDUJPODSFBUPS

39.

// 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

40.


41.

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

42.


43.

ΞΫηεΧ΢ϯλΞΫηεϥϯΩϯά w αʔόʔϩάܕͷΞΫηεΧ΢ϯλ w 'BTUMZ͕Ωϟογϡ͍ͯ͠Δ৔߹ w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Δ৔߹ w
PSJHJO·ͰϦΫΤετ͕ಧ͔ͳ͍৔߹͕͋ΔͷͰਖ਼ৗ ʹಈ͔ͳ͍ w Ϗʔίϯܕʹ͢Δ

44.

αʔόʔϩάܕWTϏʔίϯܕ w αʔόʔϩάܕΞΫηεϩά w Ϗʔίϯܕදࣔ࣌ʹϒϥ΢β͔Β"1*Λୟ͍ͯΞΫηε ਺ΛՃࢉ͢Δ w ࠓճͷ৔߹ɺϏʔίϯܕͰɺΞΫηεϥϯΩϯά͸
3FEJTͷ4PSUFE4FUͰ࣮૷ w Ωϟογϡ͞ΕΔͱා͍ͷͰ1045ʹͨ͠ w (PPHMF"OBMZUJDT͔ΒΞΫηε਺Λऔಘ͢Δͱ͍͏Ҋ ΋͋Δ͔΋

45.

Service Worker (PWA)

46.

4FSWJDF8PSLFS 18" w ·ͩಋೖͰ͖͍ͯͳ͍ɻޙ೔௥Ճ͢Δ༧ఆ w YISͰ͸ͳ͘GFUDIΛ࢖͏ͳͲɺ४උ͸͍ͯ͠Δ w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Ε͹4FSWJDF
8PSLFS͕ϨεϙϯεΛฦ͢ w 'BTUMZ͕Ωϟογϡ͍ͯ͠Ε͹'BTUMZ͕ฦ͢ w खલͰΩϟογϡ͞Ε͍ͯΔ΄Ͳ଎͍ w ۃྗखલͰϨεϙϯεΛฦ͍ͨ͠

47.

·ͱΊ w ΩϟογϡΛલఏʹઃܭ͢Δ w ߴ͍Ωϟογϡώοτ཰ w ߴ଎Խ w
ΞΫηεΧ΢ϯλͳͲ͸ΩϟογϡΛߟྀ࣮ͯ͠૷͠ ͳ͍ͱద੾ʹಈ͔ͳ͍৔߹͕͋Δ

48.

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ 3FBDUɺ3FEVYɺ18"ͰϝσΟΞ։ൃ͢Δ ϑϩϯτΤϯδχΞΛืूʂ8BOUFEMZ IUUQTXXXXBOUFEMZDPNQSPKFDUT 3BJMTŊ3FBDUͰ41"ͷϝσΟΞΛ ։ൃ͢ΔΤϯδχΞΛืू8BOUFEMZ IUUQTXXXXBOUFEMZDPNQSPKFDUT

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

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

Want more?

Transcript