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

by Hiromi Kimura

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Ͳ͛Μ͔ͤΜͱ͍͔Μ

Slide 10

Slide 10 text

+BWB4DSJQU ͳΜͱ͔͢Δͧʂ

Slide 11

Slide 11 text

7VFKTPO3BJMT΍ʂ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

7VFKTPO3BJMT Ͳ͏΍Δ͔ʁ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

OQN͔͠ͳ͍ʂ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

XFCQBDL

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ͪΐͬͱ͚ͩෳࡶʂ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ͯ͞

Slide 37

Slide 37 text

7VFKT ॻ͖·͔͢

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

7VFKTΑ͍ʂ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

7VFKTPO3BJMTͩʂ

Slide 46

Slide 46 text

XFCQBDLFSHFNͲ͏ͳͷʁ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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