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
590
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
13k
共通基盤システムの開発について
ttanimichi
5
13k
Other Decks in Programming
See All in Programming
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
テスト駆動Kaggle
isax1015
1
620
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
ソフトウェア設計とAI技術の活用
masuda220
PRO
14
3.2k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
400
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
6
1.2k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Featured
See All Featured
Visualization
eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
KATA
mclloyd
30
14k
The Cult of Friendly URLs
andyhume
79
6.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building Applications with DynamoDB
mza
95
6.5k
For a Future-Friendly Web
brad_frost
179
9.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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