Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
react-rails で SPA, SSR を実現する / react-rails-spa-ssr
Tsukuru Tanimichi
December 08, 2018
2
390
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
ttanimichi
7
1.6k
ttanimichi
0
420
ttanimichi
0
12k
ttanimichi
4
12k
Featured
See All Featured
malarkey
193
8.6k
3n
163
22k
swwweet
206
6.9k
eileencodes
113
25k
chriscoyier
498
130k
cherdarchuk
71
260k
kneath
219
15k
wjessup
339
16k
lemiorhan
627
43k
productmarketing
6
720
zenorocha
296
40k
geoffreycrofte
21
930
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 िৗறͰ͖·͢ɻϦϞʔτෆՄ