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

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

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

C33c448e4b5d5ca673aaecf04d3e126f?s=128

Takaya Deguchi

September 05, 2016
Tweet

Transcript

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

  2. כׄ׭ת׃ג ⳿〡顜⛲ UX Engineer / Product Manager 吳䒭⠓爡ؽحزآٍ٦ص٦ (@dex1t) 俱椚؝ىُصذ؍

    爡ⰻ䞔㜠Ⱏ剣خ٦ٕ,JCFMB _ _ فٗتؙزوطآًٝزװِ٦ؠ٦⡤꿀ך鏣鎘ָ⚺ז䕵ⶴկ ؎ٝؿַٓ׵ؿٗٝزؒٝسתד䗳銲ח䘔ׄג⡦ד׮װ׶תׅկ
  3. 荈爡؟٦ؽأ✲噟 䪮遭곁㉏噟 䪮遭׾欰ַ׃׋穈籼בֻ׶׾ 佄䴂׃גְתׅ  8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN

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

    8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN
  5. ⯓剢ذ؍ؠ٦؟؎ز׾ⰕꟚ׃ת׃׋ IUUQTLJCFMB

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

  7. ,JCFMBך䪮遭أةحؙ ˖ 3BJMT3FBDUך䎃㢙ך㹀殢䠬֮׷圓䧭 ˖ &4 #BCFM 8FCQBDL OQN ˖ ꬊ41"

    4JOHMF1BHF"QQMJDBUJPO ךסאֲך3BJMT،فٔ ˖ K2VFSZ׮欽岀欽ꆀ׾㸚׏ג⢘欽 –
  8. ֿ׸ַ׵ֶ鑧ׅ׷ֿה ˖ 倜鋉فٗتؙزך甧׍♳־ה䎂遤׃גծ3FBDU׾ וך״ֲח㼪Ⰵ׃גְ׏׋ַ ˖ 剑ⴱַ׵㸣樴׾湡䭷ׁזְ ˖ 饥׶זָ׵䖚ղח葺ֻׅ׷

  9. 黈׷ֿה䎃㢙˘

  10. 䎃㢙 ˖ ,JCFMBךꟚ涪ָ劤呓⻉ ˖ 䔲儗ծؒٝآص،כせ 荈ⴓה爡ꞿ  ˖ 3BJMTךאְדח$PFF4DSJQU׾剅ֻ玎䏝ך穗꿀⦼ ؿٗٝزؒٝس✲䞔ח毙ַ׏׋

     ˖ ؟٦ؽأ涸חؒر؍ةך⡲׶鴥׫כ䗳荚 ˖ 3FBDU㼪Ⰵך堣麊넝ת׷
  11. 3BJMT8BZWT.PEFSO+48BZ SBJMTBTTFUT 4QSPDLFUT SBLF (VMQ #PXFS XFCQBDL

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

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

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

  15. ֿֿדװ׏׋ֿה ˖ SFBDUSBJMT׾㼪Ⰵׅ׷ ˖ 3BJMT،فٔד3FBDU⢪ֲ׌ֽז׵馄ֶ䩛鯪 ˖ SFBDU@VKTָ㖑㄂ח⤑ⵃ ˖ &4כת׌⢪׻זְ׃ծٓ؎ـٓٔ盖椚׮#VOEMFS ˖

    3FBDUDSFBUF$MBTTךⵃ欽 3FBDU涸חכꬊ䱿㤺ך崧׸ var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! </div> ); } });
  16. 1IBTFך穠卓 ˖ 3FBDUװ׏גְֽ׉ֲז孡ָׅ׷ ˖ 爡ⰻד㉔褏׃׋׶ծⰅꟌ3FBDU׾铣׿׌׶ ˖ 如ך妜実ָ欰ת׸׷ ˖ չSBJMTBTTFUT䰍ג׋ְպչ&4אְַ׋ְպ

  17. 1IBTF.PEFSO+4PO3BJMT

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

    ˖ &4.PEVMFT JNQPSUFYQPSU ח״׷⣛㶷鍑寸
  19. ֿֿדװ׏׋ֿה ˖ CSPXTFSJGZSBJMT׾㼪Ⰵ ˖ TQSPDLFUTךفؚٓ؎ٝזךד㼪Ⰵָ䩛鯪 ˖ SBJMTTFSWFS⟃㢩ךفٗإأ饯⹛ָ♶銲 ˖ ؽٕسח儗꟦ַַָ׷رًٔحزכ鏩㺁 ˖

    #BCFM #BCFMJGZ ך㼪Ⰵ ˖ ؿٗٝزؒٝسךٓ؎ـٓٔ盖椚כCVOEMFSַ׵ OQNח㸣Ⰻ獳遤
  20. 1IBTFך穠卓 ˖ 3FBDUؒ؝ءأذيך䛷䜋ָ「ֽ׵׸׷ ˖ 傀㶷ך3FBDU$PNQPOFOU׾崞欽׃גفٗتؙز Ꟛ涪ךأؾ٦س،حف ˖ .PEBM 5PPMUJQ 5PBTU

    1BHJOBUJPOזו״ֻ֮׷ 6*ػة٦ٝכ$PNQPOFOUָⰕꟚׁ׸גְ׷ ˖ IUUQTKTDPBDISFBDU
  21. 1IBTF駈㜥׾㔿׭׷

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

  23. ֿֿדװ׏׋ֿה ˖ &4-JOU׾㼪Ⰵ ˖ أة؎ٕ窟♧הְֲ״׶&4ך嵴鷲湡涸 ˖ FTMJOUQMVHJOSFBDU ˖ 1SPQ5ZQFTך鎸鶢׾䗳갭ח ˖

    㹀劍涸ז荈⹛OQNVQEBUF ˖ 剑鵚ך3FBDUכ 鹈꟦ח♧䏝و؎ش٦ٔٔ٦أ
  24. <⡭锑>CJUKPVSOFZDJOQNVQEBUF ˖ !HGY⡲ ˖ 荈⹛דOQNVQEBUF׃גفؙٕٔؒأز׾鷏׷ ˖ OQNTISJOLXSBQ㼎䘔 ˖ DSPOד$JSDMF$*ך/JHIUMZ#VJMET׾㹀劍㹋遤 ˖

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

  26. غ؛خٖٔ٦气׸ ˖ 4UBUFכ鋵ָ♧⯋盖椚ׅ׷ךָ⾱⵱ ˖ 4UBUFָ$PNQPOFOUⰻח㸣Ⰻחꟗׄ׷㜥さכ㶨ָ䭯א ֿה׮ ⢽%SPQEPXO6*ךꟚꟗ  ˖ 鋵כ4UBUFה)BOEMFS׾1SPQTה׃ג㶨ח床׃ծ㶨כ׉׸

    ׾⢪ֲ ˖ $PNQPOFOUָ㣐ֹֻז׷ה׉ך「ֽ床׃ָ醱꧟⻉ 鋵 㶨 㷝 props props event handlerͰevent఻೻͠stateΛߋ৽ state
  27. 1IBTF㼭ֻׁ'MVY׃ג׫׷

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

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

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

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

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

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

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

    KTךؿ؋؎ٕ؟؎ؤ肍㣐⻉
  35. תה׭

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