Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018
Search
Tsukuru Tanimichi
October 24, 2018
Programming
7
2.3k
マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018
Fastly Yamagoya Meetup 2018
Tsukuru Tanimichi
October 24, 2018
Tweet
Share
More Decks by Tsukuru Tanimichi
See All by Tsukuru Tanimichi
react-rails で SPA, SSR を実現する / react-rails-spa-ssr
ttanimichi
2
1.1k
WebSocket はどれくらい通じるのかの統計 / websocket-connectivity-survey
ttanimichi
0
560
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
13k
共通基盤システムの開発について
ttanimichi
5
13k
Other Decks in Programming
See All in Programming
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
540
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
1.8k
Amazon Nova Reelの可能性
hideg
0
280
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
130
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.1k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
210
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
530
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
260
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
昭和の職場からアジャイルの世界へ
kumagoro95
1
320
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
190
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The World Runs on Bad Software
bkeepers
PRO
67
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Pragmatic Product Professional
lauravandoore
32
6.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
GitHub's CSS Performance
jonrohan
1030
460k
Embracing the Ebb and Flow
colly
84
4.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
300
Music & Morning Musume
bryan
46
6.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Transcript
ϚωʔϑΥϫʔυʹ͓͚Δ ΣϒϝσΟΞߴԽͷऔΓΈ 'BTUMZ:BNBHPZB !UUBOJNJDIJ୩ಓ 5TVLVSV5BOJNJDIJ
ࣗݾհ w !UUBOJNJDIJ୩ಓ 5TVLVSV5BOJNJDIJ w ϑϦʔϥϯε w
݄ʙϚωʔϑΥϫʔυʹৗற w ΣϒϝσΟΞͷϦϓϨʔεߴԽΛ୲ w αʔόʔΤϯδχΞ w 3VCZPO3BJMT %FW0QT 'SPOUFOE
αʔϏεհ w .0/&:1-64 w IUUQTNFEJBNPOFZGPSXBSEDPN w ϚωʔϑΥϫʔυ͕ӡӦ͢ΔΣϒϝσΟΞ w
Ոܭܦࡁʹؔ͢Δهࣄ w ࣗಈՈܭɾࢿ࢈ཧαʔϏεʮϚωʔϑΥϫʔυʯ ͰӾཡͰ͖Δ
None
None
None
ࠓճͷ։ൃʹ͍ͭͯ 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લఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
'BTUMZલఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
None
None
None
None
ϥΠϑαΠΫϧ͕ҟͳΔίϯϙʔωϯτ 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
'BTUMZલఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
όοΫΤϯυΩϟογϡෆཁ͔ w .FNDBDIFE3FEJTͳͲͷΩϟογϡ w 3BJMTͳΒ.FN$BDIF4UPSFͳͲ w ͦͦPSJHJOʹϦΫΤετ͕΄ͱΜͲདྷͳ͍߹ w
'BTUMZͷΩϟογϡͱQVSHFͷ͕݅ॏෳ͢Δ߹ w සൟʹߋ৽͞ΕΔϦιʔεΛ࣌ؒ͘͝Ωϟογϡ͢Δ ͳͲͷ༻్͕͋Δ߹༗༻͔
'BTUMZલఏͰઃܭ͖͢ཧ༝ αΠυόʔͳͲϝΠϯͷίϯςϯπͱϥΠϑαΠΫϧ ͕ҟͳΔίϯϙʔωϯτඇಉظʹ͖͔ͩ͢Β όοΫΤϯυͷΩϟογϡͦͦෆཁʹͳΔՄೳ ੑ͕͋Δ͔Β
ΞΫηεϥϯΩϯάΞΫηεΧϯλΛ࡞Δ߹ɺ ൃΛࠜຊతʹม͑Δඞཁ͕͋Δ͔Β
ΞΫηεΧϯλΞΫηεϥϯΩϯά 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