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

Transcript

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

   View Slide

2. View Slide

3. IUUQTTQFBLFSEFDLDPNUUBOJNJDIJZBNBHPZB
   

   View Slide

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

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

8. ࣗݾ঺հ
   
   
   w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ
   
   w ϑϦʔϥϯε
   w 3VCZPO3BJMT %FW0QT 'SPOUFOE
   w SFBDUSBJMTϝϯςφʔ
   

   View Slide

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

   View Slide

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

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

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

    View Slide

11. ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ
    
    
    w ϞϊϦγοΫͳ3BJMTΞϓϦέʔγϣϯ͕

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

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

    ཱ͍྆ͨ͠
    

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

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

    View Slide

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

    View Slide

18. SFBDUSBJMTWTSFBDU@PO@SBJMT
    
    
    w SFBDU@PO@SBJMT͸3FEVY΍SFBDUSPVUFSΛ

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

    View Slide

22. ϧʔςΟϯάΛͲ͏͢Δ͔ʁ
    
    
    w ϧʔςΟϯά͸3BJMT͕஌͍ͬͯΔ
    w 3FBDUͰ΋3BJMTͷϧʔςΟϯά৘ใΛ

    ڞ௨Խͯ͠࢖͑͹͍͍
    

    View Slide

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

24. ॲཧͷϑϩʔ
    
    
    w 3BJMT͸TUBUFΛ૊ΈཱͯΔ
    w ͦΕΛSFBDUSBJMT͕3FBDUʹ౉ͯ͠

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

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

    View Slide

25. "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 Slide

26. 
    
    function App(props) {
    const store = buildStore(props);
    return (
    
    
    
    );
    }
    w "QQίϯϙʔωϯτ͸ड͚औͬͨQSPQT͔Β

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

    ϧʔςΟϯά͢Δ
    

    View Slide

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

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

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

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

    View Slide

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

    View Slide

29. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    
    
    w Ҋ݅ɺืूதͰ͢
    w ೥݄ʙ
    w ॏࢹ͢Δ৚݅୯ՁɺՈ͔Β͍ۙ͜ͱ

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

    View Slide