Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

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

Fastly Yamagoya Meetup 2018

Tsukuru Tanimichi

October 24, 2018
Tweet

More Decks by Tsukuru Tanimichi

Other Decks in Programming

Transcript

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

    ೥݄ʙϚωʔϑΥϫʔυʹৗற w ΢ΣϒϝσΟΞͷϦϓϨʔεߴ଎ԽΛ୲౰ w αʔόʔΤϯδχΞ w 3VCZPO3BJMT %FW0QT 'SPOUFOE
  2. αʔϏε঺հ   w .0/&:1-64 w IUUQTNFEJBNPOFZGPSXBSEDPN w ϚωʔϑΥϫʔυ͕ӡӦ͢Δ΢ΣϒϝσΟΞ w

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

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

    ޙ͔Β41"ʹ࡞Γม͑Δͷ͸ݱ࣮తʹແཧ w ΍ΔͳΒ࠷ॳ͔Β41"ͱͯ͠ઃܭ͢Δ͔͠ͳ͍ w ճ༡㲈هࣄ͔Βهࣄ΁ͷભҠ w 41"Ͱهࣄͷຊจ͚ͩࠩ͠ସ͑Δͱ଎ͦ͏
  5. όοΫΤϯυ͸)FSPLV   w 4FSWJDF8PSLFSͷΩϟογϡͱ'BTUMZͷΩϟογϡ Ͱ΄ͱΜͲͷϨεϙϯε͸ฦͤΔ͸ͣ w PSJHJOʹ͸ɺ΄ͱΜͲϦΫΤετ͕དྷͳ͍૝ఆ w 4FSWJDF8PSLFSͷઌಡΈ΋͋Δ

    w ϨΠςϯγ͕໰୊ͳ͍ͳΒӡ༻Λָʹ͍ͨ͠ ͳ͍ͥ·)FSPLVͳͷ͔2JJUB IUUQTRJJUBDPNUUBOJNJDIJJUFNTBCDFCDFBCF
  6. 'BTUMZಋೖ   w GBTUMZGBTUMZSBJMT w ΄΅͢΂ͯͷΤϯυϙΠϯτΛ'BTUMZͰΩϟογϡ w 8FC"1*ͷ+40/ w

    443݁Ռͷ)5.- w Ωϟογϡ͍ͯ͠ΔϦιʔε͕ߋ৽͞ΕͨΒQVSHF w ΢ΣϒϝσΟΞͳͷͰࠓͷͱ͜Ζ΄ͱΜͲͷߋ৽͸ ฤूऀ͕؅ཧը໘ͰهࣄΛߋ৽ͨ͠ͱ͖
  7. ౰ॳ૝ఆ͍ͯͨ͠։ൃͷॱং   w ࠷ॳ͸Ωϟογϡ͕ͳ͍ঢ়ଶͰಈ͘΋ͷΛ࡞Δ w ࣍ʹόοΫΤϯυΩϟογϡΛಋೖ w ࣍ʹ'BTUMZͷΩϟογϡΛಋೖ w

    ࠷ޙʹ4FSWJDF8PSLFSͷΩϟογϡΛಋೖ w Ԟ͔ΒखલͷॱʹΩϟογϡ͍ͯ͘͠ w ઌʹखલͰΩϟογϡͯ͠͠·͏ͱԞͷΩϟο γϡͷಈ࡞֬ೝ͕೉͘͠ͳΔ
  8. ඇಉظWT&4*   w ࠓճͷ৔߹ɺαΠυόʔͷϦιʔε͸4&0తʹෆཁ w ϥϯΩϯάͷදࣔ͸هࣄͷ4&0ରࡦͱ͸ؔ܎ͳ͍ w ඇಉظͰऔಘ͢Δ͜ͱʹͨ͠ w

    4&0తʹॏཁͳϦιʔεͩͬͨΒ&4*Λ࢖͏͔͠ͳ͍ w IUUQTEPDTGBTUMZDPNHVJEFTQFSGPSNBODF UVOJOHVTJOHFEHFTJEFJODMVEFT
  9.   // Layout.js class Layout extends React.Component { +

    componentDidMount() { + this.props.fetchAside(); + } render() { return ( // snip ); } } Layout.propTypes = { fetchAside: PropTypes.func.isRequired, }; DPNQPOFOU%JE.PVOUͰEJTQBUDI
  10.   // actions/fetchAside.js import fetchResource from '../utils/fetchResource'; export default

    function fetchAside() { return { type: 'FETCH_ASIDE', payload: fetchResource('/api/v1/async/aside'), }; } 3FEVYͷBDUJPODSFBUPS
  11.   // 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
  12. όοΫΤϯυΩϟογϡ͸ෆཁ͔΋   w .FNDBDIFE΍3FEJTͳͲͷΩϟογϡ w 3BJMTͳΒ.FN$BDIF4UPSFͳͲ w ͦ΋ͦ΋PSJHJOʹϦΫΤετ͕΄ͱΜͲདྷͳ͍৔߹ w

    'BTUMZͷΩϟογϡͱQVSHFͷ৚͕݅ॏෳ͢Δ৔߹ w සൟʹߋ৽͞ΕΔϦιʔεΛ͘͝୹࣌ؒΩϟογϡ͢Δ ͳͲͷ༻్͕͋Δ৔߹͸༗༻͔΋
  13. αʔόʔϩάܕWTϏʔίϯܕ   w αʔόʔϩάܕΞΫηεϩά w Ϗʔίϯܕදࣔ࣌ʹϒϥ΢β͔Β"1*Λୟ͍ͯΞΫηε ਺ΛՃࢉ͢Δ w ࠓճͷ৔߹ɺϏʔίϯܕͰɺΞΫηεϥϯΩϯά͸

    3FEJTͷ4PSUFE4FUͰ࣮૷ w Ωϟογϡ͞ΕΔͱා͍ͷͰ1045ʹͨ͠ w (PPHMF"OBMZUJDT͔ΒΞΫηε਺Λऔಘ͢Δͱ͍͏Ҋ ΋͋Δ͔΋
  14. 4FSWJDF8PSLFS 18"   w ·ͩಋೖͰ͖͍ͯͳ͍ɻޙ೔௥Ճ͢Δ༧ఆ w YISͰ͸ͳ͘GFUDIΛ࢖͏ͳͲɺ४උ͸͍ͯ͠Δ w 4FSWJDF8PSLFS͕Ωϟογϡ͍ͯ͠Ε͹4FSWJDF

    8PSLFS͕ϨεϙϯεΛฦ͢ w 'BTUMZ͕Ωϟογϡ͍ͯ͠Ε͹'BTUMZ͕ฦ͢ w खલͰΩϟογϡ͞Ε͍ͯΔ΄Ͳ଎͍ w ۃྗखલͰϨεϙϯεΛฦ͍ͨ͠
  15. ·ͱΊ   w ΩϟογϡΛલఏʹઃܭ͢Δ w ߴ͍Ωϟογϡώοτ཰ w ߴ଎Խ w

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