Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Tsukuru Tanimichi
December 08, 2018
890

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

Tsukuru Tanimichi

December 08, 2018
Tweet

Transcript

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

    View full-size slide

  2. IUUQTTQFBLFSEFDLDPNUUBOJNJDIJZBNBHPZB

    View full-size slide

  3. $%/ͬΆ͍෦෼ʹ͍ͭͯ࿩ͨ͠

    View full-size slide

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

    View full-size slide

  5. લఏ஌ࣝ


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

    View full-size slide

  6. ࣗݾ঺հ


    w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

    w ϑϦʔϥϯε
    w 3VCZPO3BJMT %FW0QT 'SPOUFOE
    w SFBDUSBJMTϝϯςφʔ

    View full-size slide

  7. ཁ݅


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

    View full-size slide

  8. ࣮ݱ͍ͨ͜͠ͱ


    w ΧδϡΞϧʹ41"Λ࡞ΕΔΑ͏ʹ͍ͨ͠
    w গͳ͍ίʔυྔͰ࣮ݱ͍ͨ͠
    w 3FBDUͱ3BJMTͷΑΓྑ͍ڞଘ
    w ϑϩϯτΤϯυΤϯδχΞ͸3BJMTΛ

    ʢ΄ͱΜͲʣҙࣝ͠ͳ͍͍ͯ͘
    w αʔόʔΠϯϑϥΤϯδχΞʹͱͬͯ͸ɺ

    ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ

    View full-size slide

  9. ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ


    w ϞϊϦγοΫͳ3BJMTΞϓϦέʔγϣϯ͕

    ͍ͪ͹Μӡ༻͠΍͍͢
    w 3FBDUͱ3BJMT͕ૄ݁߹Ͱ͋Δ͜ͱͱɺ

    ΞϓϦέʔγϣϯͱͯ͠͸ϞϊϦγοΫͰ͋
    Δ͜ͱΛཱ྆͢Δ
    w ίʔυϕʔεͷ݈શ͞ͱ։ൃ޻਺અ໿Λ

    ཱ͍྆ͨ͠

    View full-size slide

  10. #''ʁ/FYUKTʁ


    w େن໛ͳ৔߹͸#''ͱ͔/FYUKTྑͦ͞͏
    w ͪΐͬͱͨ͠΢ΣϒΞϓϦέʔγϣϯʹ͸

    ͓͓͛͞ʹࢥ͑ͨ
    w ؂ࢹ͕ඞཁͳϓϩηεΛ૿΍ͨ͘͠ͳ͍
    w ϞϊϦγοΫʹ࡞ͬͯ։ൃޮ཰Λ্͍͛ͨ

    View full-size slide

  11. SFBDUSBJMT


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

    View full-size slide

  12. SFBDUSBJMTͰ41"ʁ


    w SFBDUSBJMTͰ41"ͬͯ࡞ΕΔͷʁ
    w 3&"%.&ʹ͸طଘͷ3BJMTΞϓϦέʔγϣϯ
    ͷ7JFXʹ$PNPQOFOUΛࠩ͠ࠐΉΑ͏ͳ࢖͍
    ํ͕ओʹ঺հ͞Ε͍ͯΔ
    w ࢖͍ํ࣍ୈͰ͸41"ʹ͓͍ͯ443͢Δ͜ͱʹ
    ΋ར༻Ͱ͖Δ

    View full-size slide

  13. <%= react_component('HelloMessage', name: 'John') %>
    render component: 'TodoList', props: { todos: @todos }
    $POUSPMMFS3FOEFSFS
    7JFX)FMQFS
    41"ʹ͓͍ͯ443͢Δʹ͸

    SFOEFSDPNQPOFOUΛ࢖͏ͱྑ͍
    طଘͷ7JFXʹ3FBDU$PNQPOFUΛ

    ࠩ͠ࠐΉ৔߹͸7JFX)FMQFSΛ࢖͏

    View full-size slide



  14. w ౰࣌ɺ࢖͍͍ͨػೳ͕஍ຯʹόά͍ͬͯͨ
    w Կ౓͔13͍ͯ͠Δ͏ͪʹϝϯςφʔʹ༠ΘΕͨ
    w ͜ͷHFN͕ࢮ͵ͱ͓࢓ࣄͷ։ൃ͕٧ΉͷͰɺ

    ࣗ෼ͰϝϯςͰ͖Δͷ͸޷౎߹ͩͬͨ

    View full-size slide

  15. SFBDUSBJMTWTSFBDU@PO@SBJMT


    w ͲͪΒͷHFNͷ΄͏͕ྑ͍͔
    w ݁࿦SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢
    w ˞ϙδγϣχϯάτʔΫͰ͢
    w SFBDUSBJMT͸!SFBDUKTͷΦϑΟγϟϧͳHFN
    w ॳ୅ͷ։ൃऀ͕![QBP

    View full-size slide

  16. SFBDUSBJMTWTSFBDU@PO@SBJMT


    w SFBDU@PO@SBJMT͸3FEVY΍SFBDUSPVUFSΛ

    αϙʔτ͍ͯ͠Δ
    w ͜ͷϨΠϠʔͰ3FEVYΛҙࣝ͢Δͷ͸͓͔͍͠
    w ͦ͏͍͏͜ͱΛͯ͠͠·͏ͱ3BJMTͱ3FBDUͷ
    ີ݁߹ΛੜΉ
    w SFBDUSPVUFS͸ے͕ѱ͍ʢޙड़ʣ

    View full-size slide



  17. another gem which can lead to unnecessary complexities
    react_on_rails ͸ෆඞཁͳෳࡶੑΛ΋ͨΒ͢
    SFBDUSBJMTWTSFBDU@PO@SBJMT

    View full-size slide

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

    View full-size slide

  19. ϧʔςΟϯάΛͲ͏͢Δ͔ʁ


    w SFBDUSPVUFS͸ے͕ѱ͍
    w ͦ΋ͦ΋3FBDU͸7JFX
    w ϧʔςΟϯάΛ͍͍࢘ͬͯϨΠϠʔͰ͸ͳ͍
    w %0.͸TUBUFͷࣸ૾Ͱ͋Δͱ͍͏qVYͷ

    લఏ่͕ΕΔ
    w QBDLBHF໊͕4&0తʹڧͯ͘άάΔͱ

    SFBDUSPVUFS͕Ұ൪্ʹग़ͯ͠·͏

    View full-size slide

  20. ϧʔςΟϯάΛͲ͏͢Δ͔ʁ


    w ϧʔςΟϯά͸3BJMT͕஌͍ͬͯΔ
    w 3FBDUͰ΋3BJMTͷϧʔςΟϯά৘ใΛ

    ڞ௨Խͯ͠࢖͑͹͍͍

    View full-size slide

  21. "QQMJDBUJPO$POUSPMMFSSPVUF@OBNF


    w ໋໊نଇͰɺ͜ͷ"SUJDMFT4IPX͕DPNQPOFOU
    ໊ͱDPOUBJOFS໊ʹͳΔ
    w ·ͨɺ3BJMTଆͰ΋#VJME1SPQTʢޙड़ʣͷΫϥε໊
    ʹ΋ͳΔ
    def route_name
    [controller_path, action_name].map(&:camelize).join
    end
    route_name #=> "ArticlesShow"

    View full-size slide

  22. ॲཧͷϑϩʔ


    w 3BJMT͸TUBUFΛ૊ΈཱͯΔ
    w ͦΕΛSFBDUSBJMT͕3FBDUʹ౉ͯ͠

    3FEVYͷTUPSFʹ֨ೲ͢Δ
    w ը໘ભҠ࣌͸"1*Λୟ͍ͯɺ3BJMT͕·ͨ

    ৽͍͠TUBUFΛ+40/Ͱు͍ͯɺ3FEVY͸
    ͦΕΛऔΓࠐΉ
    w 3BJMTͱ͸3FBDUͷTUBUFCVJMEFSͰ͋Δ

    View full-size slide

  23. "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

    View full-size slide



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



    );
    }
    w "QQίϯϙʔωϯτ͸ड͚औͬͨQSPQT͔Β

    3FEVYͷTUPSFΛ૊ΈཱͯΔ
    w 3BJMTͷSPVUF@OBNFΛ΋ͱʹΫϥΠΞϯταΠυͰ

    ϧʔςΟϯά͢Δ

    View full-size slide



  25. w "QQ QSPQT
    ͕3BJMTͱ3FBDUͷΠϯλʔϑΣʔε
    w 3BJMT͸"QQҎ֎ͷ$PNQPOFOUʹ͸

    ؔ஌͠ͳ͍
    w ϑϩϯτΤϯυ͸ɺ"QQҎ֎ͷ$PNQPOFOU͸

    ;ͭ͏ͷ3FBDUΞϓϦέʔγϣϯ
    w 41"ͱͯ͠ը໘ભҠͨ͠৔߹΋443ͨ͠৔߹΋

    ಉ͡63-Ͱ͋Ε͹ಉ͡TUBUFʹͳΔ
    3FBDUͱ3BJMTͷૄ݁߹

    View full-size slide

  26. ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ


    w ͪΐͬͱൃද͕࣌ؒ଍Γͳ͔ͬͨ
    w ޙ೔΋ͬͱৄ͍͠ղઆΛ2JJUBʹॻ͖·͢
    w )551ΤϥʔΛͲ͏ѻ͏͔
    w LBNJOBSJͷϖʔδωʔγϣϯ৘ใΛ΋ͱʹ
    3FBDUͷϖʔδωʔλʔΛ૊ΈཱͯΔ
    w ͳͲͳͲ

    View full-size slide

  27. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠


    w Ҋ݅ɺืूதͰ͢
    w ೥݄ʙ
    w ॏࢹ͢Δ৚݅୯ՁɺՈ͔Β͍ۙ͜ͱ

    ʢେ࡚͔ΒӺҎ಺͔ࣗసंݍ಺͕๬·͍͠ʣ
    w ि೔ৗறͰ͖·͢ɻϦϞʔτෆՄ

    View full-size slide