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

Cbffd4d28c61bc35c2e9a7a5aca632c3?s=47 Hiromi Kimura
August 28, 2017
4k

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

Cbffd4d28c61bc35c2e9a7a5aca632c3?s=128

Hiromi Kimura

August 28, 2017
Tweet

Transcript

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

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

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

  4. PO

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

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

  7. IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

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

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

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

  11. 7VFKTPO3BJMT΍ʂ

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

  13. None
  14. 7VFKTPO3BJMT Ͳ͏΍Δ͔ʁ

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

  16. OQN͔͠ͳ͍ʂ

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

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

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

    } } QBDLBHFKTPO
  20. XFCQBDL

  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
  22. σΟϨΫτϦߏ੒ྫ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU ᴹᵋXFCQBDLDPOpHKT

    ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wGSPOUFOEʹ·ͱΊΔ w+4։ൃ࣌͸3BJMTXBZΛҙࣝ͠ͳ͍
 ˠ3BJMTͱ+4։ൃΛૄʹͰ͖Δ
  23. Ϗϧυͨ͠ϑΝΠϧΛ Ͳ͜ʹग़ྗ͢Δʁ

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

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

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

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

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

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

  31. σΟϨΫτϦߏ੒ ࠶ܝ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU

    ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wGSPOUFOEʹ·ͱΊΔ w։ൃ࣌͸3BJMTXBZΛҙࣝ͠ͳ͍
 ˠ3BJMTͱ+4։ൃΛૄʹͰ͖Δ
  32. XFCQBDLϏϧυ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᴹᵋCVOEMFKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU

    ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wϏϧυͯ͠Ξηοτର৅σΟϨΫτϦ ʹग़ྗ CVOEMFKT  wCVOEMFKT͸HJUJHOPSF w։ൃ࣌͸GPSFNBO࢖ͬͯ
 SBJMTTFSWFSͱXFCQBDLXBUDIΛ
 ಉ࣌ʹىಈ
  33. 4QSPDLFUTʢBTTFUTQSFDPNQJMFʣ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᴹᵋCVOEMFKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU

    ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᴹᵋBQQMJDBUJPOFGCGEBCGKT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wCVOEMFKTͷ಺༰ؚ͕·Εͨঢ়ଶͰ QVCMJDBTTFUTʹग़ྗ wpOHFUQSJOU͕ͭ͘
  34. ͪΐͬͱ͚ͩෳࡶʂ

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

  36. ͯ͞

  37. 7VFKT ॻ͖·͔͢

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

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

  40. "7" wIUUQTHJUIVCDPNBWBKTBWB ⭐PWFS  w,BSNB KBTNJOF΋ࢼ͕ͨ͠"7"ͷ΄͏͕ઃఆ͕γϯϓϧ wฒྻͰςετͳͷͰૣ͍ w7VFΠϯελϯεͷςετՄೳ w$PNQPOFOU WVF

    Λ࢖͏ͷͰ͋Ε͹"WPSJB[͕ศརͦ͏
 7VFίϯϙʔωϯτͷϢχοτςετ
 IUUQTTQFBLFSEFDLDPNIZQFSNLUWVFLPOQPOFOUPGBMTFZVOJUVUPUFTVUP
  41. ࣮૷ྫ GSPOUFOETSDFOUSZKT import Vue from 'vue'; export default new Vue({

    el: '#vue-hello', data: { message: 'hello' }, methods: { shout: function () { this.message = 'hello!!!!!!!!!!'; } } });
  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!!!!!!!!!!'); });
  43. 7VFKTΑ͍ʂ

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

  45. 7VFKTPO3BJMTͩʂ

  46. XFCQBDLFSHFNͲ͏ͳͷʁ

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

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