新規Railsアプリに小さく導入するReact

dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました
https://eventdots.jp/event/597088

Transcript

1. 倜鋉3BJMT،فٔח㼭ֻׁ㼪Ⰵׅ׷
   EPUT3FBDU⹈䓼⠓
   React
   !EFYU#JU+PVSOFZ *OD
   

   View Slide

2. כׄ׭ת׃ג
   ⳿〡顜⛲
   UX Engineer / Product Manager
   吳䒭⠓爡ؽحزآٍ٦ص٦
   (@dex1t)
   俱椚؝ىُصذ؍ 爡ⰻ䞔㜠Ⱏ剣خ٦ٕ,JCFMB
   _ _
   فٗتؙزوطآًٝزװِ٦ؠ٦⡤꿀ך鏣鎘ָ⚺ז䕵ⶴկ
   ؎ٝؿַٓ׵ؿٗٝزؒٝسתד䗳銲ח䘔ׄג⡦ד׮װ׶תׅկ
   

   View Slide

3. 荈爡؟٦ؽأ✲噟
   䪮遭곁㉏噟
   䪮遭׾欰ַ׃׋穈籼בֻ׶׾
   佄䴂׃גְתׅ
   
   8FˏSFIJSJOH
   IUUQTCJUKPVSOFZDPN
   

   View Slide

4. 荈爡؟٦ؽأ✲噟
   䪮遭곁㉏噟
   䪮遭׾欰ַ׃׋穈籼בֻ׶׾
   佄䴂׃גְתׅ
   
   ⯋$爡䪮遭鿇ꞿ $爡倜⼼劍欰
   ⯋$爡ꟼ鸬⠓爡 ⯋$爡Ꟛ涪㛇湍
   ⯋$爡رؠ؎ش٦
   8FˏSFIJSJOH
   IUUQTCJUKPVSOFZDPN
   

   View Slide

5. ⯓剢ذ؍ؠ٦؟؎ز׾ⰕꟚ׃ת׃׋
   IUUQTLJCFMB
   

   View Slide

6. ,JCFMBה3FBDU
   'FFEװ5SFF6*ծ&EJUPSזו㼭⚥鋉垷ך3FBDU$PNQPOFOUך꧊さ⡤
   

   View Slide

7. ,JCFMBך䪮遭أةحؙ
   ˖ 3BJMT3FBDUך䎃㢙ך㹀殢䠬֮׷圓䧭
   ˖ &4 #BCFM 8FCQBDL OQN
   ˖ ꬊ41" 4JOHMF1BHF"QQMJDBUJPO
   ךסאֲך3BJMT،فٔ
   ˖ K2VFSZ׮欽岀欽ꆀ׾㸚׏ג⢘欽
   –
   

   View Slide

8. ֿ׸ַ׵ֶ鑧ׅ׷ֿה
   ˖ 倜鋉فٗتؙزך甧׍♳־ה䎂遤׃גծ3FBDU׾
   וך״ֲח㼪Ⰵ׃גְ׏׋ַ
   ˖ 剑ⴱַ׵㸣樴׾湡䭷ׁזְ
   ˖ 饥׶זָ׵䖚ղח葺ֻׅ׷
   

   View Slide

9. 黈׷ֿה䎃㢙˘
   

   View Slide

10. 䎃㢙
    ˖ ,JCFMBךꟚ涪ָ劤呓⻉
    ˖ 䔲儗ծؒٝآص،כせ 荈ⴓה爡ꞿ
    
    ˖ 3BJMTךאְדח$PFF4DSJQU׾剅ֻ玎䏝ך穗꿀⦼
    ؿٗٝزؒٝس✲䞔ח毙ַ׏׋
    
    ˖ ؟٦ؽأ涸חؒر؍ةך⡲׶鴥׫כ䗳荚
    ˖ 3FBDU㼪Ⰵך堣麊넝ת׷
    

    View Slide

11. 3BJMT8BZWT.PEFSO+48BZ
    SBJMTBTTFUT
    4QSPDLFUT
    SBLF (VMQ
    #PXFS
    XFCQBDL
    

    View Slide

12. 鼅䫛肇֮׶ֺׅ鳞ְ㉏겗
    SBJMTBTTFUT
    4QSPDLFUT
    SBLF (VMQ
    #PXFS
    XFCQBDL
    

    View Slide

13. 1IBTFת׆כ3FBDU׾⢪ְ㨣׭׷
    

    View Slide

14. 1IBTFך湡涸
    ˖ ⡦כה׮֮׸3FBDU׾⢪׏ג׫׷
    ˖ ٌتٝ+4涸זكأزז圓䧭כ湡䭷ׁזְ
    ˖ ה׶ִ֮׆⢪ֲ׌ֽ
    

    View Slide

15. ֿֿדװ׏׋ֿה
    ˖ SFBDUSBJMT׾㼪Ⰵׅ׷
    ˖ 3BJMT،فٔד3FBDU⢪ֲ׌ֽז׵馄ֶ䩛鯪
    ˖ SFBDU@VKTָ㖑㄂ח⤑ⵃ
    ˖ &4כת׌⢪׻זְ׃ծٓ؎ـٓٔ盖椚׮#VOEMFS
    ˖ 3FBDUDSFBUF$MBTTךⵃ欽 3FBDU涸חכꬊ䱿㤺ך崧׸
    
    var CommentBox = React.createClass({
    render: function() {
    return (
    
    Hello, world!
    
    );
    }
    });
    

    View Slide

16. 1IBTFך穠卓
    ˖ 3FBDUװ׏גְֽ׉ֲז孡ָׅ׷
    ˖ 爡ⰻד㉔褏׃׋׶ծⰅꟌ3FBDU׾铣׿׌׶
    ˖ 如ך妜実ָ欰ת׸׷
    ˖ չSBJMTBTTFUT䰍ג׋ְպչ&4אְַ׋ְպ
    

    View Slide

17. 1IBTF.PEFSO+4PO3BJMT
    

    View Slide

18. 1IBTFך湡涸
    ˖ 3BJMT8BZ ⚺ח4QSPDLFUT
    ח⛦׏׋תתٌتٝ+4圓䧭ח
    鵚בֽ׷
    ˖ OQNח״׷ٓ؎ـٓٔ盖椚
    ˖ &4ךⵃ欽
    ˖ &4.PEVMFT JNQPSUFYQPSU
    ח״׷⣛㶷鍑寸
    

    View Slide

19. ֿֿדװ׏׋ֿה
    ˖ CSPXTFSJGZSBJMT׾㼪Ⰵ
    ˖ TQSPDLFUTךفؚٓ؎ٝזךד㼪Ⰵָ䩛鯪
    ˖ SBJMTTFSWFS⟃㢩ךفٗإأ饯⹛ָ♶銲
    ˖ ؽٕسח儗꟦ַַָ׷رًٔحزכ鏩㺁
    ˖ #BCFM #BCFMJGZ
    ך㼪Ⰵ
    ˖ ؿٗٝزؒٝسךٓ؎ـٓٔ盖椚כCVOEMFSַ׵
    OQNח㸣Ⰻ獳遤
    

    View Slide

20. 1IBTFך穠卓
    ˖ 3FBDUؒ؝ءأذيך䛷䜋ָ「ֽ׵׸׷
    ˖ 傀㶷ך3FBDU$PNQPOFOU׾崞欽׃גفٗتؙز
    Ꟛ涪ךأؾ٦س،حف
    ˖ .PEBM 5PPMUJQ 5PBTU 1BHJOBUJPOזו״ֻ֮׷
    6*ػة٦ٝכ$PNQPOFOUָⰕꟚׁ׸גְ׷
    ˖ IUUQTKTDPBDISFBDU
    

    View Slide

21. 1IBTF駈㜥׾㔿׭׷
    

    View Slide

22. 1IBTFך湡涸
    ˖ ث٦يח3FBDUָ嵴鷲׃גֹ׋ךד駈⚛׫׾䲧ִ׷
    ˖ ֿךة؎ىؚٝדث٦يًٝغ٦׮㟓ִ㨣׭׋
    

    View Slide

23. ֿֿדװ׏׋ֿה
    ˖ &4-JOU׾㼪Ⰵ
    ˖ أة؎ٕ窟♧הְֲ״׶&4ך嵴鷲湡涸
    ˖ FTMJOUQMVHJOSFBDU
    ˖ 1SPQ5ZQFTך鎸鶢׾䗳갭ח
    ˖ 㹀劍涸ז荈⹛OQNVQEBUF
    ˖ 剑鵚ך3FBDUכ 鹈꟦ח♧䏝و؎ش٦ٔٔ٦أ
    

    View Slide

24. <⡭锑>CJUKPVSOFZDJOQNVQEBUF
    ˖ !HGY⡲
    ˖ 荈⹛דOQNVQEBUF׃גفؙٕٔؒأز׾鷏׷
    ˖ OQNTISJOLXSBQ㼎䘔
    ˖ DSPOד$JSDMF$*ך/JHIUMZ#VJMET׾㹀劍㹋遤
    ˖ ➭ך$*؟٦ؽأד׮㼎䘔〳腉
    

    View Slide

25. 1IBTFך穠卓
    ˖ ث٦يⰋ㆞ָ3FBDU׾剅ֹכׄ׭׋
    ˖ رؠ؎ش٦׮3FBDU׾剅ֻ
    ˖ فٗتؙزꟚ涪ָ鹌׬חא׸ծכׄ׭כ㼭ַׁ׏׋
    3FBDU$PNQPOFOUָ肪׏גֻ׷
    ˖ غ؛خٖٔ٦ח气׸כׄ׭׷
    

    View Slide

26. غ؛خٖٔ٦气׸
    ˖ 4UBUFכ鋵ָ♧⯋盖椚ׅ׷ךָ⾱⵱
    ˖ 4UBUFָ$PNQPOFOUⰻח㸣Ⰻחꟗׄ׷㜥さכ㶨ָ䭯א
    ֿה׮ ⢽%SPQEPXO6*ךꟚꟗ
    
    ˖ 鋵כ4UBUFה)BOEMFS׾1SPQTה׃ג㶨ח床׃ծ㶨כ׉׸
    ׾⢪ֲ
    ˖ $PNQPOFOUָ㣐ֹֻז׷ה׉ך「ֽ床׃ָ醱꧟⻉
    鋵 㶨 㷝
    props props event
    handlerͰevent఻೻͠stateΛߋ৽
    state
    

    View Slide

27. 1IBTF㼭ֻׁ'MVY׃ג׫׷
    

    View Slide

28. 1IBTFך湡涸
    ˖ غ؛خٖٔ٦气׸׾鯪幾ׅ׷
    ˖ SFEVYכ⢪׻זְ
    ˖ ꬊ41"חכװ׶麓ֺז䠬ׄ
    ˖ $PNQPOFOUָ״׶㣐ֹֻז׏גֹ׋׵ת׋
    罋ִ׷
    

    View Slide

29. ֿֿדװ׏׋ֿה
    ˖ IPLBDDIBSFBDUNJDSPDPOUBJOFSך㼪Ⰵ
    ˖ DPOUBJOFS 鋵
    ח醱꧟ׁ׾㺔ׇ׷
    ˖ 㶨כEJTQBUDI׾鸐׃גFWFOU⠗乄
    ˖ IUUQRJJUBDPNIPLBDDIBJUFNT
    FD
    鋵 㶨 㷝
    props props
    event
    dispatch
    state
    

    View Slide

30. 1IBTFך穠卓
    ˖ 醱꧟⻉׃גְ׋♧鿇$PNQPFOUך㹋鄲ַָז׶أح
    ؗٔ׃׋
    ˖ ➙䏝כؽٕس儗꟦ָ孡חז׶כׄ׭׷
    ˖ Ꟛ涪橆㞮ד#SPXTFSJGZךٍؗحءָُ⸬ַזְ朐
    䡾׌ה_猱ך䖉׍ָ涪欰׃גְ׋
    

    View Slide

31. 1IBTFؽٕس儗꟦ך瀉簭
    

    View Slide

32. 1IBTFך湡涸
    ˖ Ꟛ涪橆㞮דךؽٕس儗꟦׾瀉簭ׅ׷
    ˖ 3BJMT8BZ׾㢩׸׷ֿהכ鏩㺁ׅ׷
    ˖ 4QSPDLFUTח劍䖉׃אא
    

    View Slide

33. ֿֿדװ׏׋ֿה
    ˖ CSPXTFSJGZSBJMTַ׵XFCQBDLSBJMTח獳遤
    ˖ KTך؝٦س׾BQQBTTFUTKBWBTDSJQUַ׵
    DMJFOUח獳⹛׃TQSPDLFUT׾鸐ׁזְ
    ˖ EFWFMPQNFOUדכXFCQBDLEFWTFSWFS׾饯⹛
    ˖ QSPEVDUJPOדכؽٕس䖓חEJHFTU➰♷
    

    View Slide

34. 1IBTFך穠卓
    ˖ Ꟛ涪橆㞮דךؽٕسָ旗鸞ח
    ˖ ؽٕس䖉׍ך꟦ח5XJUUFS׾鋅זֻג幥׬
    ˖ 如ך铬겗
    ˖ 6OJU5FTU橆㞮
    ˖ KTךؿ؋؎ٕ؟؎ؤ肍㣐⻉
    

    View Slide

35. תה׭
    

    View Slide

36. תה׭
    ˖ 1IBTF_1IBTFתד׌ְ׋ְ٠剢玎䏝
    ˖ أة٦ز،حفכفٗتؙزꟚ涪ָ⮚⯓חז׶ָ׍
    ˖ 㼭ֻׁכׄ׭גծ饥׶זָ׵كأزח鵚בֽ׷
    8FˏSFIJSJOH
    IUUQTCJUKPVSOFZDPN
    

    View Slide