Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
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.2k
WebSocket はどれくらい通じるのかの統計 / websocket-connectivity-survey
ttanimichi
0
550
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
12k
共通基盤システムの開発について
ttanimichi
5
13k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Building Your Own Lightsaber
phodgson
103
6.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Being A Developer After 40
akosma
87
590k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Designing for humans not robots
tammielis
250
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Writing Fast Ruby
sferik
627
61k
Scaling GitHub
holman
458
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Typedesign – Prime Four
hannesfritz
40
2.4k
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 िৗறͰ͖·͢ɻϦϞʔτෆՄ