Vue.js on Rails / vue-js-on-rails

Transcript

1. ໦ଜ޿ւ(.01FQBCP *OD
   ϖύϘςοΫΧϯϑΝϨϯε
   7VFKTPO3BJMT
   

   View Slide

2. ೥ೖࣾ෱Ԭࢧࣾ
   ໦ଜ޿ւ!LJNSPNJ
   ϗεςΟϯάࣄۀ෦ɹϜʔϜʔυϝΠϯνʔϜΤϯδχΞ
   IUUQTLJNSPNJHJUIVCJP
   

   View Slide

3. ໦ଜ޿ւ!LJNSPNJ
   ϗεςΟϯάࣄۀ෦ɹϜʔϜʔυϝΠϯνʔϜΤϯδχΞ
   IUUQTLJNSPNJHJUIVCJP
   ೥ೖࣾ෱Ԭࢧࣾ
   

   View Slide

4. PO
   

   View Slide

5. !4FSWFS4JEF3FOEFSJOH
   !4JOHMF1BHF"QQMJDBUJPO
   طʹ3BJMTͰαʔϏεӡ༻͍ͯ͠Δ
   ৽͘͠3BJMTͰαʔϏεΛ࡞Δ
   !7VFKTͷࡉ͔͍࣮૷ͷ࿩
   

   View Slide

6. ϜʔϜʔυϝΠϯ
   wυϝΠϯ౷߹αʔϏε
   w೥݄ʹϩʔϯνʢࠓ೥Ͱ೥໨ʣ
   wʙׂ͸1)1Ͱͷ࣮૷
   w3VCZPO3BJMTʹগͣͭ͠Ҡߦத
   wεϚʔτϑΥϯ༻αΠτ͸3VCZPO3BJMT
   

   View Slide

7. IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU
   

   View Slide

8. ݱঢ়ͷ3BJMTͷ+BWB4DSJQU؀ڥͷ໰୊఺
   wK2VFSZΰϦΰϦ
   wK2VFSZɺੜ+BWB4DSJQUɺ$P⒎FF4DSJQU͕ೖΓཚΕ
   w୯ମςετ͸ͳ͠ʢSTQFDͷGFBUVSFTςετͰͳΜͱ͔ʣ
   wMJOU΋͞Ε͍ͯͳ͍
   

   View Slide

9. Ͳ͛Μ͔ͤΜͱ͍͔Μ
   

   View Slide

10. +BWB4DSJQU
    ͳΜͱ͔͢Δͧʂ
    

    View Slide

11. 7VFKTPO3BJMT΍ʂ
    

    View Slide

12. 8IZ7VFKT
    wฐࣾαʔϏεͰͷಋೖ࣮੷͕૿͖͑ͯͨ
    wάʔϖɺΧϥʔϛʔ
    wϩϦϙοϓϚωʔδυΫϥ΢υ
    wϜʔϜʔυϝΠϯͷࣾ಺γεςϜͰಋೖ࣮੷͕͋Γ஌͕ࣝ͋ͬͨ
    wฐࣾΤϯδχΞʹ೔ຊޠυΩϡϝϯτ຋༁ऀ͕͍Δ

    ʢ!JOPVFUBLVZBɺ!IZQFSNLUʣ
    wֶशίετ௿͍
    

    View Slide

13. View Slide

14. 7VFKTPO3BJMT
    Ͳ͏΍Δ͔ʁ
    

    View Slide

15. ΍Γ͍ͨ͜ͱ੔ཧ
    w7VFKTΛ࢖͍͍ͨʂ
    w୯ମςετΛॻ͖͍ͨʂ
    wMJOU΋΍Γ͍ͨʂ
    

    View Slide

16. OQN͔͠ͳ͍ʂ
    

    View Slide

17. OQN
    w/PEFKTͷύοέʔδ؅ཧπʔϧ
    wQBDLBHFKTPOͰ࢖༻͢ΔύοέʔδΛ؅ཧ
    

    View Slide

18. :BSO࢖ͬͨ
    w3BJMT͔Βਪ঑͞Ε͍ͯΔ
    wZBSO·ͨ͸ZBSOJOTUBMMίϚϯυͰґଘϥΠϒϥϦΛΠϯετʔϧ
    wZBSOMPDLϑΝΠϧ͕Ͱ͖Δ
    wϥΠϒϥϦͷόʔδϣϯΛݻఆͰ͖Δ
    wϦϙδτϦ؅ཧ͢Δ͜ͱͰόʔδϣϯҧ͍ʹΑΔόά͕͓͖ʹ͍͘ɹ
    wOQN΋W͔Β͸QBDLBHFMPDLKTPOͰόʔδϣϯݻఆͰ͖Δ

    Α͏ʹͳͬͨɾɾɾ
    

    View Slide

19. ༨ஊ
    QBDLBHFKTPOͷTDSJQUTػೳ
    {
    "private": true,
    "scripts": {
    "show-version": "yarn -V"
    }
    }
    QBDLBHFKTPO
    

    View Slide

20. XFCQBDL
    

    View Slide

21. XFCQBDL CBCFM
    
    QBDLBHFKTPO
    {
    "private": true,
    "scripts": {
    "webpack": "webpack"
    },
    "dependencies": {},
    "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.5"
    },
    "babel": {
    "presets": ["es2015"]
    }
    }
    w+BWB4DSJQUͷϏϧυπʔϧ
    wZBSOSVOXFCQBDL
    wCBCFMͰ&4 &4
    ରԠ
    wઃఆ͸XFCQBDLDPOpHKT
    

    View Slide

22. σΟϨΫτϦߏ੒ྫ
    ᵓBQQ
    ᴹᵋBTTFUT
    ᴹᵋKBWBTDSJQUT
    ᴹᵋBQQMJDBUJPOKT
    ᵓGSPOUFOE
    ᴹᵓTSD
    ᴹᴹᵋFOUSZKT
    ᴹᵓUFTU
    ᴹᵋXFCQBDLDPOpHKT
    ᵓQVCMJD
    ᴹᵋBTTFUT
    ᵓʜ
    ᵓQBDLBHFKTPO
    ᵋZBSOMPDL
    wGSPOUFOEʹ·ͱΊΔ
    w+4։ൃ࣌͸3BJMTXBZΛҙࣝ͠ͳ͍

    ˠ3BJMTͱ+4։ൃΛૄʹͰ͖Δ
    

    View Slide

23. Ϗϧυͨ͠ϑΝΠϧΛ
    Ͳ͜ʹग़ྗ͢Δʁ
    

    View Slide

24. 4QSPDLFUTͱͲ͏෇͖߹͏͔໰୊
    

    View Slide

25. View Slide

26. 4QSPDLFUT
    w3BJMTͷ+BWB4DSJQUɺ4UZMF4IFFUɺ*NBHFTΛ؅ཧ͢Δπʔϧ
    w"MU+T΍4BTTͳͲͷίϯύΠϧ
    wDPODBUɺNJOJGZ
    wpOHFSQSJOU
    wग़ྗϑΝΠϧͷTV⒏YʹϋογϡจࣈྻΛ෇͚ͯ͘ΕΔ
    w FYBQQMJDBUJPOFGCGEBCGKT
    wϑΝΠϧʹมߋ͕͋ͬͨͱ͖ͷΈpOHFSQSJOU͕มߋ͞ΕΔ
    wϒϥ΢βΩϟογϡʹ༗ޮ
    

    View Slide

27. 4QSPDLFUT࢖͏ʁ࢖Θͳ͍ʁ
    !XFCQBDLͱ4QSPDLFUTͰճϏϧυ͢Δ
    ӡ༻͍ͯ͠ΔϧʔϧͰͦͷ··։ൃͰ͖Δ
    ࢖͏
    !3BJMTͱ+BWB4DSJQU؅ཧ͕গ͠ີʹͳΔ
    

    View Slide

28. 4QSPDLFUT࢖͏ʁ࢖Θͳ͍ʁ
    3BJMTͱ+BWB4DSJQUͷ؅ཧ͕ૄʹͳΔ
    ࢖Θͳ͍
    !4QSPDLFUT૬౰ͷػೳΛXFCQBDLͰ༻ҙ͢Δίετ
    !3BJMTͷ7JFX͔Β+BWB4DSJQUΛಡΈࠐΉͱ͖ʹҰखؒඞཁ
    ʢ3BJMTXBZʹ৐Εͳ͍ʣ
    

    View Slide

29. 4QSPDLFUT
    ͦͷ··࢖͏͜ͱʹͨ͠
    

    View Slide

30. ཧ༝
    w+BWB4DSJQUεΩϧ3BJMTεΩϧͳνʔϜ
    wطଘͷ+BWB4DSJQUͨͪͱ৽͘͠࡞Δ΋ͷͷ؅ཧΛผʹͨ͘͠ͳ͍
    w3BJMTͷϧʔϧ͕มΘͬͯ΋+4ग़ྗઌΛม͑Ε͹ͳΜͱ͔ͳΔ
    wແཧ͗͢͠ͳ͍
    

    View Slide

31. σΟϨΫτϦߏ੒ ࠶ܝ
    
    ᵓBQQ
    ᴹᵋBTTFUT
    ᴹᵋKBWBTDSJQUT
    ᴹᵋBQQMJDBUJPOKT
    ᵓGSPOUFOE
    ᴹᵓTSD
    ᴹᴹᵋFOUSZKT
    ᴹᵓUFTU
    ᴹᵋXFCQBDLDPOpHKT
    ᵓQVCMJD
    ᴹᵋBTTFUT
    ᵓʜ
    ᵓQBDLBHFKTPO
    ᵋZBSOMPDL
    wGSPOUFOEʹ·ͱΊΔ
    w։ൃ࣌͸3BJMTXBZΛҙࣝ͠ͳ͍

    ˠ3BJMTͱ+4։ൃΛૄʹͰ͖Δ
    

    View Slide

32. XFCQBDLϏϧυ
    ᵓBQQ
    ᴹᵋBTTFUT
    ᴹᵋKBWBTDSJQUT
    ᴹᵋBQQMJDBUJPOKT
    ᴹᵋCVOEMFKT
    ᵓGSPOUFOE
    ᴹᵓTSD
    ᴹᴹᵋFOUSZKT
    ᴹᵓUFTU
    ᴹᵋXFCQBDLDPOpHKT
    ᵓQVCMJD
    ᴹᵋBTTFUT
    ᵓʜ
    ᵓQBDLBHFKTPO
    ᵋZBSOMPDL
    wϏϧυͯ͠Ξηοτର৅σΟϨΫτϦ
    ʹग़ྗ CVOEMFKT
    
    wCVOEMFKT͸HJUJHOPSF
    w։ൃ࣌͸GPSFNBO࢖ͬͯ

    SBJMTTFSWFSͱXFCQBDLXBUDIΛ

    ಉ࣌ʹىಈ
    

    View Slide

33. 4QSPDLFUTʢBTTFUTQSFDPNQJMFʣ
    ᵓBQQ
    ᴹᵋBTTFUT
    ᴹᵋKBWBTDSJQUT
    ᴹᵋBQQMJDBUJPOKT
    ᴹᵋCVOEMFKT
    ᵓGSPOUFOE
    ᴹᵓTSD
    ᴹᴹᵋFOUSZKT
    ᴹᵓUFTU
    ᴹᵋXFCQBDLDPOpHKT
    ᵓQVCMJD
    ᴹᵋBTTFUT
    ᴹᵋBQQMJDBUJPOFGCGEBCGKT
    ᵓʜ
    ᵓQBDLBHFKTPO
    ᵋZBSOMPDL
    wCVOEMFKTͷ಺༰ؚ͕·Εͨঢ়ଶͰ
    QVCMJDBTTFUTʹग़ྗ
    wpOHFUQSJOU͕ͭ͘
    

    View Slide

34. ͪΐͬͱ͚ͩෳࡶʂ
    

    View Slide

35. ։ൃ࣌͸+4ͱ3BJMTΛૄʹ
    ຊ൪ద༻࣌͸3BJMTXBZʹͷΔ
    

    View Slide

36. ͯ͞
    

    View Slide

37. 7VFKT
    ॻ͖·͔͢
    

    View Slide

38. ͜͜·Ͱ͘Ε͹
    wGSPOUFOEʹ੾Γग़͍ͯ͠ΔͷͰΨϯΨϯॻ͚Δ
    w41"Ͱͳͯ͘΋ಋೖͰ͖Δ
    w)5.-͸3BJMTͷ7JFXΛͦͷ··࢖͏
    wσβΠφʔͱฒߦ࡞ۀ͠΍͍͢
    wK2VFSZͷ୅ΘΓͷ7VFKT $PNQPOFOUͳ͠
    Ͱ΋ςετॻ͚Δ
    w΋ͪΖΜ41"Ͱ΋0,
    

    View Slide

39. 7VFΠϯελϯεͷ୯ମςετ
    

    View Slide

40. "7"
    wIUUQTHJUIVCDPNBWBKTBWB ⭐PWFS
    
    w,BSNBKBTNJOF΋ࢼ͕ͨ͠"7"ͷ΄͏͕ઃఆ͕γϯϓϧ
    wฒྻͰςετͳͷͰૣ͍
    w7VFΠϯελϯεͷςετՄೳ
    w$PNQPOFOU WVF
    Λ࢖͏ͷͰ͋Ε͹"WPSJB[͕ศརͦ͏

    7VFίϯϙʔωϯτͷϢχοτςετ

    IUUQTTQFBLFSEFDLDPNIZQFSNLUWVFLPOQPOFOUPGBMTFZVOJUVUPUFTVUP
    

    View Slide

41. ࣮૷ྫ
    GSPOUFOETSDFOUSZKT
    import Vue from 'vue';
    export default new Vue({
    el: '#vue-hello',
    data: {
    message: 'hello'
    },
    methods: {
    shout: function () {
    this.message = 'hello!!!!!!!!!!';
    }
    }
    });
    

    View Slide

42. ୯ମςετྫ
    GSPOUFOETSDFOUSZKT
    GSPOUFOEUFTUFOUSZUFTUKT
    import test from 'ava';
    import entry from '../src/entry';
    test('entry vue instance', t => {
    t.is(typeof entry, 'object');
    t.is(entry.$data.message, 'hello');
    });
    test('entry#shout', t => {
    entry.shout();
    t.is(entry.$data.message, 'hello!!!!!!!!!!');
    });
    
    

    View Slide

43. 7VFKTΑ͍ʂ
    

    View Slide

44. ·ͱΊ
    w։ൃ࣌͸3BJMTͱ+BWB4DSJQUΛૄʹ։ൃ
    w୯ମςετɺMJOU
    wແཧͤͣ3BJMTXBZʹ͏·͘ͷͤΔ
    w7VFΠϯελϯεͷςετ΋ॻ͚Δ
    

    View Slide

45. 7VFKTPO3BJMTͩʂ
    

    View Slide

46. XFCQBDLFSHFNͲ͏ͳͷʁ
    

    View Slide

47. ࠙਌ձͰ͓࿩͠·͠ΐ͏ʂ
    

    View Slide

48. ෱ԬͰҰॹʹ7VFKTॻ͖·͠ΐ͏ʂʂ
    ࠷৽ͷ࠾༻৘ใΛνΣοΫˠ !QC@SFDSVJU
    

    View Slide