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
590
大規模 Padrino アプリケーション Rails 移行 / Migrating to Rails from Padrino
ttanimichi
0
13k
共通基盤システムの開発について
ttanimichi
5
13k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Invisible Side of Design
smashingmag
301
51k
RailsConf 2023
tenderlove
30
1.1k
Faster Mobile Websites
deanohume
307
31k
Designing for Performance
lara
610
69k
For a Future-Friendly Web
brad_frost
179
9.8k
A Tale of Four Properties
chriscoyier
160
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
A designer walks into a library…
pauljervisheath
207
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 िৗறͰ͖·͢ɻϦϞʔτෆՄ