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

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

Hiromi Kimura
August 28, 2017
4.4k

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

Hiromi Kimura

August 28, 2017
Tweet

More Decks by Hiromi Kimura

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