react-rails で SPA, SSR を実現する / react-rails-spa-ssr

SFBDUSBJMTͰ41" 443Λ࣮ݱ͢Δ 3BJMT%FWFMPQFST.FFUVQ%BZ !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

IUUQTTQFBLFSEFDLDPNUUBOJNJDIJZBNBHPZB

$%/ͬΆ͍෦෼ʹ͍ͭͯ࿩ͨ͠

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@SBJMT͸3FEVY΍SFBDUSPVUFSΛ  αϙʔτ͍ͯ͠Δ 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 ͦ΋ͦ΋3FBDU͸7JFX 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 3BJMT͸TUBUFΛ૊ΈཱͯΔ 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 ि೔ৗறͰ͖·͢ɻϦϞʔτෆՄ

react-rails で SPA, SSR を実現する / react-rails-spa...

react-rails で SPA, SSR を実現する / react-rails-spa-ssr

Tsukuru Tanimichi

More Decks by Tsukuru Tanimichi

Featured

Transcript

SFBDUSBJMTͰ41" 443Λ࣮ݱ͢Δ 3BJMT%FWFMPQFST.FFUVQ%BZ !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

IUUQTTQFBLFSEFDLDPNUUBOJNJDIJZBNBHPZB

$%/ͬΆ͍෦෼ʹ͍ͭͯ࿩ͨ͠

wͳͷͰࠓ೔͸41"ͬΆ͍෦෼ʹ͍ͭͯ࿩͠·͢ wຊ౰͸4FSWJDF8PSLFSͬΆ͍෦෼ʹ͍ͭͯ΋ ࿩͔͚ͨͬͨ͠Ͳɺࠓ೔͸࿩࣌ؒ͢ͳͦ͞͏ w·ͨࠓ౓ɺผͷ৔Ͱൃද͠·͢

લఏ஌ࣝ w 3FBDU 3FEVYͷ஌ࣝΛඞཁͱ͢Δղઆ͸ɺ Ͱ͖Δ͚ͩޙ൒ʹूΊ·ͨ͠ w લ൒͸ϑϩϯτͷ஌͕ࣝͳͯ͘΋ʢ͋Δఔ౓ʣ ෼͔Δ಺༰ͷ͸ͣ

ࣗݾ঺հ w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ w ϑϦʔϥϯε w

ཁ݅ w 3FBDU 3FEVYͰ41"Λ։ൃ͢Δ w αʔόʔαΠυ͸3BJMT w 443΋ඞਢ

࣮ݱ͍ͨ͜͠ͱ w ΧδϡΞϧʹ41"Λ࡞ΕΔΑ͏ʹ͍ͨ͠ w গͳ͍ίʔυྔͰ࣮ݱ͍ͨ͠ w 3FBDUͱ3BJMTͷΑΓྑ͍ڞଘ w

;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ w ϞϊϦγοΫͳ3BJMTΞϓϦέʔγϣϯ͕  ͍ͪ͹Μӡ༻͠΍͍͢ w 3FBDUͱ3BJMT͕ૄ݁߹Ͱ͋Δ͜ͱͱɺ  ΞϓϦέʔγϣϯͱͯ͠͸ϞϊϦγοΫͰ͋ Δ͜ͱΛཱ྆͢Δ

#''ʁ/FYUKTʁ w େن໛ͳ৔߹͸#''ͱ͔/FYUKTྑͦ͞͏ w ͪΐͬͱͨ͠΢ΣϒΞϓϦέʔγϣϯʹ͸  ͓͓͛͞ʹࢥ͑ͨ w ؂ࢹ͕ඞཁͳϓϩηεΛ૿΍ͨ͘͠ͳ͍

SFBDUSBJMT w SFBDUKTSFBDUSBJMT w 3FBDUͱ3BJMTͷ*OUFHSBUJPOΛͯ͘͠Ε ΔHFN

SFBDUSBJMTͰ41"ʁ w SFBDUSBJMTͰ41"ͬͯ࡞ΕΔͷʁ w 3&"%.&ʹ͸طଘͷ3BJMTΞϓϦέʔγϣϯ ͷ7JFXʹ$PNPQOFOUΛࠩ͠ࠐΉΑ͏ͳ࢖͍ ํ͕ओʹ঺հ͞Ε͍ͯΔ w

<%= react_component('HelloMessage', name: 'John') %> render component: 'TodoList', props: {

w ౰࣌ɺ࢖͍͍ͨػೳ͕஍ຯʹόά͍ͬͯͨ w Կ౓͔13͍ͯ͠Δ͏ͪʹϝϯςφʔʹ༠ΘΕͨ w ͜ͷHFN͕ࢮ͵ͱ͓࢓ࣄͷ։ൃ͕٧ΉͷͰɺ  ࣗ෼ͰϝϯςͰ͖Δͷ͸޷౎߹ͩͬͨ

SFBDUSBJMTWTSFBDU@PO@SBJMT w ͲͪΒͷHFNͷ΄͏͕ྑ͍͔ w ݁࿦SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢ w

SFBDUSBJMTWTSFBDU@PO@SBJMT w SFBDU@PO@SBJMT͸3FEVY΍SFBDUSPVUFSΛ  αϙʔτ͍ͯ͠Δ w ͜ͷϨΠϠʔͰ3FEVYΛҙࣝ͢Δͷ͸͓͔͍͠ w ͦ͏͍͏͜ͱΛͯ͠͠·͏ͱ3BJMTͱ3FBDUͷ

another gem which can lead to unnecessary complexities

w ݁࿦SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢

ϧʔςΟϯάΛͲ͏͢Δ͔ʁ w SFBDUSPVUFS͸ے͕ѱ͍ w ͦ΋ͦ΋3FBDU͸7JFX w ϧʔςΟϯάΛ͍͍࢘ͬͯϨΠϠʔͰ͸ͳ͍ w

ϧʔςΟϯάΛͲ͏͢Δ͔ʁ w ϧʔςΟϯά͸3BJMT͕஌͍ͬͯΔ w 3FBDUͰ΋3BJMTͷϧʔςΟϯά৘ใΛ  ڞ௨Խͯ͠࢖͑͹͍͍

"QQMJDBUJPO$POUSPMMFSSPVUF@OBNF w ໋໊نଇͰɺ͜ͷ"SUJDMFT4IPX͕DPNQPOFOU ໊ͱDPOUBJOFS໊ʹͳΔ w ·ͨɺ3BJMTଆͰ΋#VJME1SPQTʢޙड़ʣͷΫϥε໊ ʹ΋ͳΔ def

ॲཧͷϑϩʔ w 3BJMT͸TUBUFΛ૊ΈཱͯΔ w ͦΕΛSFBDUSBJMT͕3FBDUʹ౉ͯ͠  3FEVYͷTUPSFʹ֨ೲ͢Δ w ը໘ભҠ࣌͸"1*Λୟ͍ͯɺ3BJMT͕·ͨ

"QQMJDBUJPO$POUSPMMFSSFOEFS@BQQ w ͢΂ͯͷΤϯυϙΠϯτ͸SFOEFS@BQQ͢Δ w 41"ͳͷͰ443࣌͸ৗʹ"QQΛSFOEFS͢Δ def render_app #

function App(props) { const store = buildStore(props); return

w "QQ QSPQT ͕3BJMTͱ3FBDUͷΠϯλʔϑΣʔε w 3BJMT͸"QQҎ֎ͷ$PNQPOFOUʹ͸  ؔ஌͠ͳ͍ w

ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ w ͪΐͬͱൃද͕࣌ؒ଍Γͳ͔ͬͨ w ޙ೔΋ͬͱৄ͍͠ղઆΛ2JJUBʹॻ͖·͢ w )551ΤϥʔΛͲ͏ѻ͏͔ w

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ w Ҋ݅ɺืूதͰ͢ w ೥݄ʙ w ॏࢹ͢Δ৚݅୯ՁɺՈ͔Β͍ۙ͜ͱ  ʢେ࡚͔ΒӺҎ಺͔ࣗసंݍ಺͕๬·͍͠ʣ