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

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

Fastly Yamagoya Meetup 2018

Cc81dc2acad7b0d070a2f2d3f10eef7d?s=128

Tsukuru Tanimichi

October 24, 2018
Tweet

Transcript

  1. 2.

    ࣗݾ঺հ   w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ  w ϑϦʔϥϯε w

    ೥݄ʙϚωʔϑΥϫʔυʹৗற w ΢ΣϒϝσΟΞͷϦϓϨʔεߴ଎ԽΛ୲౰ w αʔόʔΤϯδχΞ w 3VCZPO3BJMT %FW0QT 'SPOUFOE
  2. 3.

    αʔϏε঺հ   w .0/&:1-64 w IUUQTNFEJBNPOFZGPSXBSEDPN w ϚωʔϑΥϫʔυ͕ӡӦ͢Δ΢ΣϒϝσΟΞ w

    Ոܭ΍ܦࡁʹؔ͢Δهࣄ w ࣗಈՈܭ฽ɾࢿ࢈؅ཧαʔϏεʮϚωʔϑΥϫʔυʯ ಺Ͱ΋ӾཡͰ͖Δ
  3. 4.

     

  4. 5.
  5. 6.
  6. 7.
  7. 11.
  8. 14.

      w ݁ہɺ41"ͱͯ͠࡞Δ͜ͱʹͨ͠ w 3FBDU 3FEVYΛ࠾༻ w ඵͰ΋ߴ଎Խ͍ͨ͠ w

    ޙ͔Β41"ʹ࡞Γม͑Δͷ͸ݱ࣮తʹແཧ w ΍ΔͳΒ࠷ॳ͔Β41"ͱͯ͠ઃܭ͢Δ͔͠ͳ͍ w ճ༡㲈هࣄ͔Βهࣄ΁ͷભҠ w 41"Ͱهࣄͷຊจ͚ͩࠩ͠ସ͑Δͱ଎ͦ͏
  9. 16.

    όοΫΤϯυ͸)FSPLV   w 4FSWJDF8PSLFSͷΩϟογϡͱ'BTUMZͷΩϟογϡ Ͱ΄ͱΜͲͷϨεϙϯε͸ฦͤΔ͸ͣ w PSJHJOʹ͸ɺ΄ͱΜͲϦΫΤετ͕དྷͳ͍૝ఆ w 4FSWJDF8PSLFSͷઌಡΈ΋͋Δ

    w ϨΠςϯγ͕໰୊ͳ͍ͳΒӡ༻Λָʹ͍ͨ͠ ͳ͍ͥ·)FSPLVͳͷ͔2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF
  10. 18.
  11. 21.

    'BTUMZಋೖ   w GBTUMZGBTUMZSBJMT w ΄΅͢΂ͯͷΤϯυϙΠϯτΛ'BTUMZͰΩϟογϡ w 8FC"1*ͷ+40/ w

    443݁Ռͷ)5.- w Ωϟογϡ͍ͯ͠ΔϦιʔε͕ߋ৽͞ΕͨΒQVSHF w ΢ΣϒϝσΟΞͳͷͰࠓͷͱ͜Ζ΄ͱΜͲͷߋ৽͸ ฤूऀ͕؅ཧը໘ͰهࣄΛߋ৽ͨ͠ͱ͖
  12. 24.

    ౰ॳ૝ఆ͍ͯͨ͠։ൃͷॱং   w ࠷ॳ͸Ωϟογϡ͕ͳ͍ঢ়ଶͰಈ͘΋ͷΛ࡞Δ w ࣍ʹόοΫΤϯυΩϟογϡΛಋೖ w ࣍ʹ'BTUMZͷΩϟογϡΛಋೖ w

    ࠷ޙʹ4FSWJDF8PSLFSͷΩϟογϡΛಋೖ w Ԟ͔ΒखલͷॱʹΩϟογϡ͍ͯ͘͠ w ઌʹखલͰΩϟογϡͯ͠͠·͏ͱԞͷΩϟο γϡͷಈ࡞֬ೝ͕೉͘͠ͳΔ
  13. 28.
  14. 29.
  15. 30.
  16. 31.
  17. 33.

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

    4&0తʹॏཁͳϦιʔεͩͬͨΒ&4*Λ࢖͏͔͠ͳ͍ w IUUQTEPDTGBTUMZDPNHVJEFTQFSGPSNBODF UVOJOHVTJOHFEHFTJEFJODMVEFT
  18. 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
  19. 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
  20. 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
  21. 41.

    όοΫΤϯυΩϟογϡ͸ෆཁ͔΋   w .FNDBDIFE΍3FEJTͳͲͷΩϟογϡ w 3BJMTͳΒ.FN$BDIF4UPSFͳͲ w ͦ΋ͦ΋PSJHJOʹϦΫΤετ͕΄ͱΜͲདྷͳ͍৔߹ w

    'BTUMZͷΩϟογϡͱQVSHFͷ৚͕݅ॏෳ͢Δ৔߹ w සൟʹߋ৽͞ΕΔϦιʔεΛ͘͝୹࣌ؒΩϟογϡ͢Δ ͳͲͷ༻్͕͋Δ৔߹͸༗༻͔΋
  22. 44.

    αʔόʔϩάܕWTϏʔίϯܕ   w αʔόʔϩάܕΞΫηεϩά w Ϗʔίϯܕදࣔ࣌ʹϒϥ΢β͔Β"1*Λୟ͍ͯΞΫηε ਺ΛՃࢉ͢Δ w ࠓճͷ৔߹ɺϏʔίϯܕͰɺΞΫηεϥϯΩϯά͸

    3FEJTͷ4PSUFE4FUͰ࣮૷ w Ωϟογϡ͞ΕΔͱා͍ͷͰ1045ʹͨ͠ w (PPHMF"OBMZUJDT͔ΒΞΫηε਺Λऔಘ͢Δͱ͍͏Ҋ ΋͋Δ͔΋
  23. 46.

    4FSWJDF8PSLFS 18"   w ·ͩಋೖͰ͖͍ͯͳ͍ɻޙ೔௥Ճ͢Δ༧ఆ w YISͰ͸ͳ͘GFUDIΛ࢖͏ͳͲɺ४උ͸͍ͯ͠Δ w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Ε͹4FSWJDF

    8PSLFS͕ϨεϙϯεΛฦ͢ w 'BTUMZ͕Ωϟογϡ͍ͯ͠Ε͹'BTUMZ͕ฦ͢ w खલͰΩϟογϡ͞Ε͍ͯΔ΄Ͳ଎͍ w ۃྗखલͰϨεϙϯεΛฦ͍ͨ͠
  24. 47.

    ·ͱΊ   w ΩϟογϡΛલఏʹઃܭ͢Δ w ߴ͍Ωϟογϡώοτ཰ w ߴ଎Խ w

    ΞΫηεΧ΢ϯλͳͲ͸ΩϟογϡΛߟྀ࣮ͯ͠૷͠ ͳ͍ͱద੾ʹಈ͔ͳ͍৔߹͕͋Δ