Pro Yearly is on sale from $80 to $50! »

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

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

Fastly Yamagoya Meetup 2018

Cc81dc2acad7b0d070a2f2d3f10eef7d?s=128

Tsukuru Tanimichi

October 24, 2018
Tweet

Transcript

  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 ࣗಈՈܭ฽ɾࢿ࢈؅ཧαʔϏεʮϚωʔϑΥϫʔυʯ ಺Ͱ΋ӾཡͰ͖Δ
  4.  

  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. 'BTUMZલఏͰઃܭ͢΂͖ཧ༝    αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτ͸ඇಉظʹ͢΂͖͔ͩΒ  όοΫΤϯυͷΩϟογϡ͸ͦ΋ͦ΋ෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β 

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

    ΞΫηεϥϯΩϯά΍ΞΫηεΧ΢ϯλΛ࡞Δ৔߹ɺ ൃ૝Λࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
  41. όοΫΤϯυΩϟογϡ͸ෆཁ͔΋   w .FNDBDIFE΍3FEJTͳͲͷΩϟογϡ w 3BJMTͳΒ.FN$BDIF4UPSFͳͲ w ͦ΋ͦ΋PSJHJOʹϦΫΤετ͕΄ͱΜͲདྷͳ͍৔߹ w

    'BTUMZͷΩϟογϡͱQVSHFͷ৚͕݅ॏෳ͢Δ৔߹ w සൟʹߋ৽͞ΕΔϦιʔεΛ͘͝୹࣌ؒΩϟογϡ͢Δ ͳͲͷ༻్͕͋Δ৔߹͸༗༻͔΋
  42. 'BTUMZલఏͰઃܭ͢΂͖ཧ༝    αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτ͸ඇಉظʹ͢΂͖͔ͩΒ  όοΫΤϯυͷΩϟογϡ͸ͦ΋ͦ΋ෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β 

    ΞΫηεϥϯΩϯά΍ΞΫηεΧ΢ϯλΛ࡞Δ৔߹ɺ ൃ૝Λࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
  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