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
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Building Your Own Lightsaber
phodgson
103
6.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
GraphQLとの向き合い方2022年版
quramy
44
13k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
GitHub's CSS Performance
jonrohan
1030
460k
Making the Leap to Tech Lead
cromwellryan
133
9k
Gamification - CAS2011
davidbonilla
80
5.1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Rails Girls Zürich Keynote
gr2m
94
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 िৗறͰ͖·͢ɻϦϞʔτෆՄ