$30 off During Our Annual Pro Sale. View Details »

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

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

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

Takaya Deguchi

September 05, 2016
Tweet

More Decks by Takaya Deguchi

Other Decks in Technology

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