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

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

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

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

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

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

IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

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

Ͳ͛Μ͔ͤΜͱ͍͔Μ

+BWB4DSJQU ͳΜͱ͔͢Δͧʂ

7VFKTPO3BJMT΍ʂ

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

7VFKTPO3BJMT Ͳ͏΍Δ͔ʁ

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

OQN͔͠ͳ͍ʂ

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

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

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

XFCQBDL

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

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

Ϗϧυͨ͠ϑΝΠϧΛ Ͳ͜ʹग़ྗ͢Δʁ

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

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

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

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

4QSPDLFUT ͦͷ··࢖͏͜ͱʹͨ͠

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

σΟϨΫτϦߏ੒ ࠶ܝ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU
ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wGSPOUFOEʹ·ͱΊΔ w։ൃ࣌͸3BJMTXBZΛҙࣝ͠ͳ͍  ˠ3BJMTͱ+4։ൃΛૄʹͰ͖Δ

XFCQBDLϏϧυ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᴹᵋCVOEMFKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU
ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wϏϧυͯ͠Ξηοτର৅σΟϨΫτϦ ʹग़ྗ CVOEMFKT wCVOEMFKT͸HJUJHOPSF w։ൃ࣌͸GPSFNBO࢖ͬͯ  SBJMTTFSWFSͱXFCQBDLXBUDIΛ  ಉ࣌ʹىಈ

4QSPDLFUTʢBTTFUTQSFDPNQJMFʣ ᵓBQQ ᴹᵋBTTFUT ᴹᵋKBWBTDSJQUT ᴹᵋBQQMJDBUJPOKT ᴹᵋCVOEMFKT ᵓGSPOUFOE ᴹᵓTSD ᴹᴹᵋFOUSZKT ᴹᵓUFTU
ᴹᵋXFCQBDLDPOpHKT ᵓQVCMJD ᴹᵋBTTFUT ᴹᵋBQQMJDBUJPOFGCGEBCGKT ᵓʜ ᵓQBDLBHFKTPO ᵋZBSOMPDL wCVOEMFKTͷ಺༰ؚ͕·Εͨঢ়ଶͰ QVCMJDBTTFUTʹग़ྗ wpOHFUQSJOU͕ͭ͘

ͪΐͬͱ͚ͩෳࡶʂ

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

7VFKT ॻ͖·͔͢

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

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

"7" wIUUQTHJUIVCDPNBWBKTBWB ⭐PWFS w,BSNB KBTNJOF΋ࢼ͕ͨ͠"7"ͷ΄͏͕ઃఆ͕γϯϓϧ wฒྻͰςετͳͷͰૣ͍ w7VFΠϯελϯεͷςετՄೳ w$PNQPOFOU WVF
Λ࢖͏ͷͰ͋Ε͹"WPSJB[͕ศརͦ͏  7VFίϯϙʔωϯτͷϢχοτςετ  IUUQTTQFBLFSEFDLDPNIZQFSNLUWVFLPOQPOFOUPGBMTFZVOJUVUPUFTVUP

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

୯ମςετྫ 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!!!!!!!!!!'); });

7VFKTΑ͍ʂ

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

7VFKTPO3BJMTͩʂ

XFCQBDLFSHFNͲ͏ͳͷʁ

࠙਌ձͰ͓࿩͠·͠ΐ͏ʂ

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

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

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

More Decks by Hiromi Kimura

Featured

Transcript