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
react-rails で SPA, SSR を実現する / react-rails-spa...
Search
Tsukuru Tanimichi
December 08, 2018
2
1.1k
react-rails で SPA, SSR を実現する / react-rails-spa-ssr
Tsukuru Tanimichi
December 08, 2018
Tweet
Share
More Decks by Tsukuru Tanimichi
See All by Tsukuru Tanimichi
マネーフォワードにおけるウェブメディア高速化の取り組み / yamagoya2018
ttanimichi
7
2.3k
WebSocket はどれくらい通じるのかの統計 / websocket-connectivity-survey
ttanimichi
0
550
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
13k
共通基盤システムの開発について
ttanimichi
5
13k
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Documentation Writing (for coders)
carmenintech
67
4.5k
How GitHub (no longer) Works
holman
312
140k
Fireside Chat
paigeccino
34
3.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
210
Building an army of robots
kneath
302
45k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Making Projects Easy
brettharned
116
6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Statistics for Hackers
jakevdp
797
220k
Transcript
SFBDUSBJMTͰ41" 443Λ࣮ݱ͢Δ 3BJMT%FWFMPQFST.FFUVQ%BZ !UUBOJNJDIJ୩ಓ 5TVLVSV5BOJNJDIJ
None
IUUQTTQFBLFSEFDLDPNUUBOJNJDIJZBNBHPZB
$%/ͬΆ͍෦ʹ͍ͭͯͨ͠
None
wͳͷͰࠓ41"ͬΆ͍෦ʹ͍ͭͯ͠·͢ wຊ4FSWJDF8PSLFSͬΆ͍෦ʹ͍ͭͯ ͔͚ͨͬͨ͠Ͳɺࠓ࣌ؒ͢ͳͦ͞͏ w·ͨࠓɺผͷͰൃද͠·͢
લఏࣝ w 3FBDU 3FEVYͷࣝΛඞཁͱ͢Δղઆɺ Ͱ͖Δ͚ͩޙʹूΊ·ͨ͠ w લϑϩϯτͷ͕ࣝͳͯ͘ʢ͋Δఔʣ ͔Δ༰ͷͣ
ࣗݾհ w !UUBOJNJDIJ୩ಓ 5TVLVSV5BOJNJDIJ w ϑϦʔϥϯε w
3VCZPO3BJMT %FW0QT 'SPOUFOE w SFBDUSBJMTϝϯςφʔ
ཁ݅ w 3FBDU 3FEVYͰ41"Λ։ൃ͢Δ w αʔόʔαΠυ3BJMT w 443ඞਢ
࣮ݱ͍ͨ͜͠ͱ w ΧδϡΞϧʹ41"Λ࡞ΕΔΑ͏ʹ͍ͨ͠ w গͳ͍ίʔυྔͰ࣮ݱ͍ͨ͠ w 3FBDUͱ3BJMTͷΑΓྑ͍ڞଘ w
ϑϩϯτΤϯυΤϯδχΞ3BJMTΛ ʢ΄ͱΜͲʣҙࣝ͠ͳ͍͍ͯ͘ w αʔόʔΠϯϑϥΤϯδχΞʹͱͬͯɺ ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ
;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ w ϞϊϦγοΫͳ3BJMTΞϓϦέʔγϣϯ͕ ͍ͪΜӡ༻͍͢͠ w 3FBDUͱ3BJMT͕ૄ݁߹Ͱ͋Δ͜ͱͱɺ ΞϓϦέʔγϣϯͱͯ͠ϞϊϦγοΫͰ͋ Δ͜ͱΛཱ྆͢Δ
w ίʔυϕʔεͷ݈શ͞ͱ։ൃઅΛ ཱ͍྆ͨ͠
#''ʁ/FYUKTʁ w େنͳ߹#''ͱ͔/FYUKTྑͦ͞͏ w ͪΐͬͱͨ͠ΣϒΞϓϦέʔγϣϯʹ ͓͓͛͞ʹࢥ͑ͨ w ࢹ͕ඞཁͳϓϩηεΛ૿ͨ͘͠ͳ͍
w ϞϊϦγοΫʹ࡞ͬͯ։ൃޮΛ্͍͛ͨ
SFBDUSBJMT w SFBDUKTSFBDUSBJMT w 3FBDUͱ3BJMTͷ*OUFHSBUJPOΛͯ͘͠Ε ΔHFN
SFBDUSBJMTͰ41"ʁ w SFBDUSBJMTͰ41"ͬͯ࡞ΕΔͷʁ w 3&"%.&ʹطଘͷ3BJMTΞϓϦέʔγϣϯ ͷ7JFXʹ$PNPQOFOUΛࠩ͠ࠐΉΑ͏ͳ͍ ํ͕ओʹհ͞Ε͍ͯΔ w
͍ํ࣍ୈͰ41"ʹ͓͍ͯ443͢Δ͜ͱʹ ར༻Ͱ͖Δ
<%= react_component('HelloMessage', name: 'John') %> render component: 'TodoList', props: {
todos: @todos } $POUSPMMFS3FOEFSFS 7JFX)FMQFS 41"ʹ͓͍ͯ443͢Δʹ SFOEFSDPNQPOFOUΛ͏ͱྑ͍ طଘͷ7JFXʹ3FBDU$PNQPOFUΛ ࠩ͠ࠐΉ߹7JFX)FMQFSΛ͏
w ࣌ɺ͍͍ͨػೳ͕ຯʹόά͍ͬͯͨ w Կ͔13͍ͯ͠Δ͏ͪʹϝϯςφʔʹ༠ΘΕͨ w ͜ͷHFN͕ࢮ͵ͱ͓ࣄͷ։ൃ͕٧ΉͷͰɺ ࣗͰϝϯςͰ͖Δͷ߹ͩͬͨ
SFBDUSBJMTWTSFBDU@PO@SBJMT w ͲͪΒͷHFNͷ΄͏͕ྑ͍͔ w ݁SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢ w
SFBDUSBJMT!SFBDUKTͷΦϑΟγϟϧͳHFN w ॳͷ։ൃऀ͕![QBP
SFBDUSBJMTWTSFBDU@PO@SBJMT w SFBDU@PO@SBJMT3FEVYSFBDUSPVUFSΛ αϙʔτ͍ͯ͠Δ w ͜ͷϨΠϠʔͰ3FEVYΛҙࣝ͢Δͷ͓͔͍͠ w ͦ͏͍͏͜ͱΛͯ͠͠·͏ͱ3BJMTͱ3FBDUͷ
ີ݁߹ΛੜΉ w SFBDUSPVUFSے͕ѱ͍ʢޙड़ʣ
another gem which can lead to unnecessary complexities
react_on_rails ෆඞཁͳෳࡶੑΛͨΒ͢ SFBDUSBJMTWTSFBDU@PO@SBJMT
w ݁SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢
ϧʔςΟϯάΛͲ͏͢Δ͔ʁ w SFBDUSPVUFSے͕ѱ͍ w ͦͦ3FBDU7JFX w ϧʔςΟϯάΛ͍͍࢘ͬͯϨΠϠʔͰͳ͍ w
%0.TUBUFͷࣸ૾Ͱ͋Δͱ͍͏qVYͷ લఏ่͕ΕΔ w QBDLBHF໊͕4&0తʹڧͯ͘άάΔͱ SFBDUSPVUFS͕Ұ൪্ʹग़ͯ͠·͏
ϧʔςΟϯάΛͲ͏͢Δ͔ʁ w ϧʔςΟϯά3BJMT͕͍ͬͯΔ w 3FBDUͰ3BJMTͷϧʔςΟϯάใΛ ڞ௨Խ͍͍ͯ͑͠
"QQMJDBUJPO$POUSPMMFSSPVUF@OBNF w ໋໊نଇͰɺ͜ͷ"SUJDMFT4IPX͕DPNQPOFOU ໊ͱDPOUBJOFS໊ʹͳΔ w ·ͨɺ3BJMTଆͰ#VJME1SPQTʢޙड़ʣͷΫϥε໊ ʹͳΔ def
route_name [controller_path, action_name].map(&:camelize).join end route_name #=> "ArticlesShow"
ॲཧͷϑϩʔ w 3BJMTTUBUFΛΈཱͯΔ w ͦΕΛSFBDUSBJMT͕3FBDUʹͯ͠ 3FEVYͷTUPSFʹ֨ೲ͢Δ w ը໘ભҠ࣌"1*Λୟ͍ͯɺ3BJMT͕·ͨ
৽͍͠TUBUFΛ+40/Ͱు͍ͯɺ3FEVY ͦΕΛऔΓࠐΉ w 3BJMTͱ3FBDUͷTUBUFCVJMEFSͰ͋Δ
"QQMJDBUJPO$POUSPMMFSSFOEFS@BQQ w ͯ͢ͷΤϯυϙΠϯτSFOEFS@BQQ͢Δ w 41"ͳͷͰ443࣌ৗʹ"QQΛSFOEFS͢Δ def render_app #
BuildProps::ArticlesShow.callʢHash ΛΈཱͯΔʣ props = BuildProps.const_get(route_name).call if api? render json: props else # SSR render component: 'App', props: props, prerender: true end end
function App(props) { const store = buildStore(props); return
( <Provider store={store}> <Router /> </Provider> ); } w "QQίϯϙʔωϯτड͚औͬͨQSPQT͔Β 3FEVYͷTUPSFΛΈཱͯΔ w 3BJMTͷSPVUF@OBNFΛͱʹΫϥΠΞϯταΠυͰ ϧʔςΟϯά͢Δ
w "QQ QSPQT ͕3BJMTͱ3FBDUͷΠϯλʔϑΣʔε w 3BJMT"QQҎ֎ͷ$PNQPOFOUʹ ؔ͠ͳ͍ w
ϑϩϯτΤϯυɺ"QQҎ֎ͷ$PNQPOFOU ;ͭ͏ͷ3FBDUΞϓϦέʔγϣϯ w 41"ͱͯ͠ը໘ભҠͨ͠߹443ͨ͠߹ ಉ͡63-Ͱ͋Εಉ͡TUBUFʹͳΔ 3FBDUͱ3BJMTͷૄ݁߹
ࠓͤͳ͔ͬͨ͜ͱ w ͪΐͬͱൃද͕࣌ؒΓͳ͔ͬͨ w ޙͬͱৄ͍͠ղઆΛ2JJUBʹॻ͖·͢ w )551ΤϥʔΛͲ͏ѻ͏͔ w
LBNJOBSJͷϖʔδωʔγϣϯใΛͱʹ 3FBDUͷϖʔδωʔλʔΛΈཱͯΔ w ͳͲͳͲ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ w Ҋ݅ɺืूதͰ͢ w ݄ʙ w ॏࢹ͢Δ݅୯ՁɺՈ͔Β͍ۙ͜ͱ ʢେ࡚͔ΒӺҎ͔ࣗసंݍ͕·͍͠ʣ
w िৗறͰ͖·͢ɻϦϞʔτෆՄ