Vue.jsによるWebアプリケーション開発

by hypermkt

Slide 1

Slide 1 text

όʔνʔ(.01&1"#0JOD :"1$)PLLBJEP 7VFKTʹΑΔ 8FCΞϓϦέʔγϣϯ։ൃ

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

ιϑτ΢ΣΞΤϯδχΞ 1)1FS1FSMνϣοτμέ όʔνʔ!IZQFSNLU IUUQCMPHIZQFSNLUKQ

Slide 4

Slide 4 text

ϗʔϜϖʔδ࡞੒αʔϏεάʔϖ IUUQTHPPQFKQ

Slide 5

Slide 5 text

࠷ۙͷൃද

Slide 6

Slide 6 text

ಥવͰ͕͢ɺ օ͞Μ೔ใ͸ॻ͍͍ͯ·͔͢ʁ

Slide 7

Slide 7 text

೔ใͷྑ͍఺ wࣗݾৼΓฦΓ͕ग़དྷΔ wࠔͬͨ͜ͱΛ౤ߘ͢Δͱ୭͔ʹॿ͚ͯ΋Β͑Δ wࣗ෼ͷ੒ՌΛΈΜͳʹ஌ͬͯ΋Β͑Δ wԕ͘ʹ཭Ε͍ͯΔਓ͕ԿΛ͍ͯ͠Δͷ͔෼͔Δ

Slide 8

Slide 8 text

೔ใ͸ॻ͍ͨํ͕͍͍Ͱ͢Αʂʂ

Slide 9

Slide 9 text

͍΍͍΍ɺ೔ใॻ͘৔ॴ͕ͳ͍͠ɾɾɾ

Slide 10

Slide 10 text

҆৺͍ͯͩ͘͠͞ ೔ใΞϓϦέʔγϣϯΛ༻ҙ͖ͯ͠·ͨ͠

Slide 11

Slide 11 text

/JQQP wࣗ෼ઐ༻ͷ೔ใ8FCΞϓϦέʔγϣϯ w೔ใͷ౤ߘɾӾཡɾ࡟আ͕ग़དྷΔ wϑϩϯτɿ7VFKTWVFSPVUFS  BYJPTͰ41" w"1*ɿ1)1-VNFO wIUUQTHJUIVCDPNIZQFSNLUOJQQP ϑϩϯτ "1* %#

Slide 12

Slide 12 text

ࠓ೔࿩͢͜ͱ

Slide 13

Slide 13 text

7VFKTͰ೔ใ΢ΣϒΞϓϦέʔγϣϯΛ։ൃ͠Α͏ʂ w։ൃ؀ڥʹ͍ͭͯ wϏϧυ w41" w೔ใҰཡͷදࣔ wڞ௨ॲཧΛ·ͱΊ͍ͨ wϢχοτςετ

Slide 14

Slide 14 text

։ൃ؀ڥʹ͍ͭͯ

Slide 15

Slide 15 text

ཁ݅ wϩʔΧϧͰ։ൃ͍ͨ͠ wίʔυΛमਖ਼ͨ͠Β͙͢ʹը໘ʹ൓өͯ͠ཉ͍͠ wೖྗ͢ΔίϚϯυ͸ۃྗ୹͍ͨ͘͠

Slide 16

Slide 16 text

ϑΝΠϧɾσΟϨΫτϦߏ੒ w QVCMJDJOEFYIUNMɾɾɾτοϓϖʔδͱͳΔςϯϓϨʔτ w TSDKTNBJOKTɾɾɾϧʔςΟϯά w TSDKTDPNQPOFOTɾɾɾ7VFKTDPNQPOFOUϑΝΠϧஔ͖৔ w BQQWVFɾɾɾτοϓϖʔδ೔ใҰཡ w OJQQPOFXWVFɾɾɾ೔ใ౤ߘ w OJQQPFEJUWVFɾɾɾ೔ใฤूɾ࡟আ w TSDKTNJYJOTɾɾɾNJYJOTσΟϨΫτϦ w BQJɾɾɾ-VNFOʹΑΔ"1*ΞϓϦέʔγϣϯ

Slide 17

Slide 17 text

OQNϥΠϒϥϦΛ׆༻ wIUUQTFSWFS೚ҙͷσΟϨΫτϦΛ%PDVNFOU3PPUʹͯ͠ϒϥ΢β ͰӾཡ wCSPXTFSJGZΫϥΠΞϯταΠυͷϞδϡʔϧϏϧυγεςϜ wXBUDIJGZϑΝΠϧΛ؂ࢹͯࠩ͠෼Ϗϧυ͢Δ͜ͱͰϏϧυͷखؒΛ ল͘ wOQNSVOBMMෳ਺OQNTDSJQUΛ࣮ߦͰ͖Δ

Slide 18

Slide 18 text

QBDLBHFKTPOOQNSVO\TDSJQU^ w TUBSUIUUQαʔόʔɺCSPXTFSJGZϏϧυɺ"1*ΛฒྻͰ࣮ߦ w BQJ-VNFO੡ͷ"1*αʔόʔΛىಈ w CVJMECSPXTFSJGZϏϧυΛ࣮ߦ w TFSWFS8FCαʔόʔΛىಈɻ%PDVNFOU3PPU͸QVCMJDσΟϨΫτϦΛࢦఆ w UFTU6OJU5FTUΛ࣮ߦ ˞ࠓճ͸αϯϓϧΞϓϦέʔγϣϯͳͷͰɺ"1*'SPOU͕ಉϦϙδτϦ಺ʹͳ͍ͬͯ·͢ɻ

Slide 19

Slide 19 text

͜Μͳײ͡ ˞എܠ͸ඒӯͷ੨͍஑Ͱ͢ɻײಈ͠·ͨ͠ɻ

Slide 20

Slide 20 text

Ϗϧυ

Slide 21

Slide 21 text

ཁ݅ wCSPXTFSJGZͰ7VFKTΛϏϧυ͍ͨ͠ w&4 ͰίʔυΛॻ͖͍ͨ wίϯϙʔωϯτຖʹϑΝΠϧ෼ׂ͍ͨ͠

Slide 22

Slide 22 text

஫ҙ఺

Slide 23

Slide 23 text

ϏϧυϑΝΠϧ͕̎ͭ͋Δ w7VFKT͔Β̎ͭʹ෼͔Εͨ wελϯυΞϩϯ൛ɿ)5.-ίϯύΠϥ಺ଂɺ7VFYܥͱಉ͡ɻ wϥϯλΠϜݶఆϏϧυ൛ɿ)5.-ίϯύΠϥແ͠ɻOQNͰ͸σϑΥ ϧτͰͪ͜ΒΛग़ྗɻ

Slide 24

Slide 24 text

ελϯυΞϩϯ൛ͷ࢖͍ํ

Slide 25

Slide 25 text

BMJBTJGZͰSFRVJSF࣌ʹελϯυΞϩϯ൛Λ࢖༻͢ΔΑ͏ʹௐ੔ { "scripts": { "build": "browserify -e src/js/main.js -o public/app.js" }, "browserify": { "transform": [ "aliasify" ] }, "aliasify": { "aliases": { "vue": "vue/dist/vue.js" } }, "dependencies": { "vue": "^2.0.3" }, "devDependencies": { "aliasify": "^2.0.0" } } ͕͜͜ϙΠϯτʂ

Slide 26

Slide 26 text

ίϯϙʔωϯτผ։ൃ

Slide 27

Slide 27 text

ίϯϙʔωϯτຖʹϑΝΠϧ෼ׂͯ͠։ൃɿWVFJGZ ᶃ OQNJOTUBMMWVFJGZTBWFEFW ᶄ CSPXTFSJGZͷUSBOTGPSNઃఆʹ௥Ճ

Slide 28

Slide 28 text

&4 &4

Slide 29

Slide 29 text

ඞཁύοέʔδ wCBCFMDPSF w#BCFMίϯύΠϥʔ wCBCFMQSFTFUFT w#BCFM༻&4ϓϥάΠϯ wCBCFMSDͰQSFTFUTΛઃఆ wCBCFMJGZ wCSPXTFSJGZ༻CBCFMม׵

Slide 30

Slide 30 text

ϑΝΠϧ؂ࢹ͠ͳ͕Β7VFKTWVFJGZ&4ͰϏϧυ QBDLBHFKTPO CBCFMSD

Slide 31

Slide 31 text

41"

Slide 32

Slide 32 text

ཁ݅ w41"Λ͍ͨ͠ w41"ͰϦϯΫͯ͠ը໘ભҠ͍ͨ͠ wը໘ભҠ࣌ʹύϥϝʔλʔ΋Ҿ͖ܧ͍͗ͨ

Slide 33

Slide 33 text

7VFKTͰ41"͢Δʹ͸ w7VFKTެࣜͷWVFSPVUFSΛར༻͢Δͷ͕Φεεϝ w7VFKTͰར༻͢Δ৔߹͸WVFSPVUFSܥΛར༻͢Δ wIUUQTHJUIVCDPNWVFKTWVFSPVUFS w೔ຊޠυΩϡϝϯτ͋Γ nam install vue-router —-save

Slide 34

Slide 34 text

εςοϓᶃɿϓϥάΠϯΛΠϯετʔϧ TSDKTNBJOKT 7VFVTF QMVHJO Ͱ7VFKT ϓϥάΠϯΛΠϯετʔϧ͢Δ SFGIUUQTKQWVFKTPSHWBQJ7VFVTF

Slide 35

Slide 35 text

εςοϓᶄɿϚοϐϯά TSDKTNBJOKT ϧʔτͱίϯϙʔωϯτΛ Ϛοϐϯά SFGIUUQTSPVUFSWVFKTPSHKBFTTFOUJBMTHFUUJOHTUBSUFEIUNM

Slide 36

Slide 36 text

εςοϓᶅɿϧʔλʔ஫ೖ TSDKTNBJOKT SPPUͱͳΔ7VFͷΠϯελϯεΛ࡞੒͠ɺ ΞϓϦέʔγϣϯશମͰϧʔλʔ͕ೝࣝͰ͖ΔΑ͏ʹ ϧʔλʔΛ஫ೖɻ

Slide 37

Slide 37 text

εςοϓᶆɿSPVUFSWJFXλάΛ഑ஔ ϧʔςΟϯάͱϚονͨ͠ίϯϙʔωϯτ͕͜͜΁ϨϯμϦϯά͞ΕΔ

Slide 38

Slide 38 text

SPVUFSMJOLͰ"λάʹม׵͞ΕΔ ύϥϝʔλʔࢦఆ ύεࢦఆ

Slide 39

Slide 39 text

͜Μͳ෩ʹ63-͕ͳΓ·͢

Slide 40

Slide 40 text

೔ใҰཡͷදࣔ

Slide 41

Slide 41 text

ཁ݅ w"1*͔ΒσʔλΛऔಘ͍ͨ͠ wऔಘͨ͠಺༰Λը໘ʹද͍ࣔͨ͠

Slide 42

Slide 42 text

7VFKTͰ"1*Λୟ͘ʹ͸ϥΠϒϥϦ͕ඞཁ wϧʔςΟϯάಉ༷ʹ7VFKTຊମʹ͸)551$MJFOU͸ಉ ࠝ͞Ε͍ͯ·ͤΜ w)UUQ$MJFOUͷBYJPTΛ࢖༻͠·͢ wWVFSFTPVSDFͱ͍͏ެࣜ)UUQ$MJFOUϥΠϒϥϦ΋͋ Γ·͕ͨ͠ɺʹެ͔ࣜΒ֎Εͨ

Slide 43

Slide 43 text

"1*͔Β೔ใҰཡΛऔಘ BYJPTHFUͰ(&5ϦΫΤετ͕ग़དྷ +40/ύʔε͞ΕͨΦϒδΣΫτ͕ฦΔɻ TSDKTBQQWVF

Slide 44

Slide 44 text

BQJOJQQPFTͷϨεϙϯε [ { "id": 23, "content": "ϥʔϝϯ৯΂͍ͨʂʂ", "created_at": "2016-11-26 06:40:51", "updated_at": "2016-11-26 06:44:03" }, { "id": 24, "content": "͓ण࢘৯΂͍ͨʂʂ", "created_at": "2016-11-26 06:42:20", "updated_at": "2016-11-26 06:43:49" } ]

Slide 45

Slide 45 text

"1*͔Βऔಘͨ͠಺༰Λը໘ʹදࣔ JUFNJOJUFNTܗࣜͰ഑ྻͷத਎Λల։ͭͭ͠܁Γฦ͠ॲཧΛ ࣮ߦ͢Δ

Slide 46

Slide 46 text

͜ͷΑ͏ʹදࣔ͞Ε·͢

Slide 47

Slide 47 text

ڞ௨ॲཧΛ·ͱΊ͍ͨ

Slide 48

Slide 48 text

ཁ݅ wEBUFUJNF͔Β೔ຊޠ೔෇͚ܗࣜʹม׵͢ΔॲཧΛ֤ ίϯϙʔωϯτʹॻ͖ͨ͘ͳ͍ TSDKTBQQWVF TSDKTOJQQPFEJUWVF

Slide 49

Slide 49 text

ϛοΫεΠϯ NJYJO Λ࢖͑͹ղܾͰ͖Δ

Slide 50

Slide 50 text

ϛοΫεΠϯͱ͸ w7VFίϯϙʔωϯτͰ࠶ར༻ՄೳͳػೳΛ࣋ͨͤΔํ ๏

Slide 51

Slide 51 text

ϛοΫεΠϯ༻ͷϑΝΠϧΛ༻ҙ wNJYJOTσΟϨΫτϦΛ࡞ͬͯϑΝΠϧΛ഑ஔ͢Δͱ෼͔Γ΍͢ ͍ wϑΝΠϧ಺͸7VFKTͷจ๏ʹԊͬͯॻ͘͜ͱ͕ग़དྷ·͢

Slide 52

Slide 52 text

ϛοΫεΠϯΛಡΈࠐΜͰ࢖༻͢Δ ϛοΫεΠϯϑΝΠϧΛJNQPSU͢Δ NJYJOTΦϓγϣϯͰ഑ྻͰࢦఆ

Slide 53

Slide 53 text

ϛοΫεΠϯΛಡΈࠐΜͰ࢖༻͢Δ ϛοΫεΠϯ಺ͷϝιου͕NFUIPET Ͱఆ͔ٛͨ͠ͷΑ͏ʹݺ΂Δ

Slide 54

Slide 54 text

Ϣχοτςετ

Slide 55

Slide 55 text

ཁ݅ wࠓճ͸̎ύλʔϯ wγϯϓϧͳϝιου w"1*ݺͼग़͕͋͠Δϝιου

Slide 56

Slide 56 text

6OJU5FTUߏ੒ wLBSNBɾɾɾςετϥϯφʔ wNPDIBɾɾɾςετϑϨʔϜϫʔΫ wDIBJɾɾɾΞαʔγϣϯϥΠϒϥϦ w1IBOUPN+4ɾɾɾϔουϨεϒϥ΢β wLBSNBTQFDSFQPSUFSɾɾɾςετ݁ՌͷϨϙʔτ

Slide 57

Slide 57 text

ύλʔϯ̍ɿγϯϓϧͳϝιου TSDKTNJYJOTOJQQPEBUFKT

Slide 58

Slide 58 text

ύλʔϯ̍ɿςετ wJNQPSUͰςετର৅ͱͳΔDPNQPOFOUϑΝΠϧΛಡ ΈࠐΉ w7VFͷNFUIPETΛ௨ͯ͡ϝιουʹΞΫηεग़དྷΔ

Slide 59

Slide 59 text

ύλʔϯ̎"1*ݺͼग़͕͋͠Δϝιου TSDKTBQQWVF

Slide 60

Slide 60 text

ᶃ7VFFYUFOEͰ αϒΫϥεΛ࡞੒

Slide 61

Slide 61 text

ᶄඇಉظςετΛ࣮ࢪ͢Δ ͨΊԾҾ਺໊ΛೖΕΔ

Slide 62

Slide 62 text

ᶅ"1*Λ࣮ߦ͠ͳ͍Α͏ʹ  TJOPOͰTUVCԽ ᶆฦΓ஋ʹ੒ޭ͢Δ 1SPNJTFΦϒδΣΫτ Λࢦఆ

Slide 63

Slide 63 text

ᶇΠϯελϯεԽ ᶈϝιουΛ࣮ߦ ᶉ੒ޭॲཧʹڧ੍తʹ ೖͬͯΞαʔγϣϯ ᶊEPOF ͰNPDIBʹ ςετऴྃΛ௨஌

Slide 64

Slide 64 text

ςετͷ࣮ߦ # karma start karma.conf.js  $ npm run test > nippo@ test > karma start karma.conf.js 26 11 2016 17:58:52.420:INFO [framework.browserify]: bundle built 26 11 2016 17:58:52.433:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 26 11 2016 17:58:52.433:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 26 11 2016 17:58:52.447:INFO [launcher]: Starting browser PhantomJS 26 11 2016 17:58:53.340:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket / #GmFgwD2k7lgyHVGsAAAA with id 76777246 Appίϯϙʔωϯτ ✓ ϝιου͕ଘࡏ͢Δ ✓ datetimeܗࣜΛ೔ຊޠදهʹม׵͢Δ LOG LOG: 'success' ✓ fetchNippoesͰ೔ใҰཡ͕औಘͰ͖Δ PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 3 of 3 SUCCESS (0.025 secs / 0.017 secs) TOTAL: 3 SUCCESS

Slide 65

Slide 65 text

/JQQPͰվળ͍ͨ͠ࣄ wςετ͕଍Γͳ͍ w݄ผ͔Ұఆ݅਺Ͱͷϖʔδωʔγϣϯ͍ͨ͠ wෳ਺ਓ͕೔ใ౤ߘͰ͖ΔΑ͏ʹ͍ͨ͠ wBQJ͔ΒͲͳ̓ SZ

Slide 66

Slide 66 text

ˣˣˣ13͓଴͍ͪͯ͠·͢ʂˣˣˣ IUUQTHJUIVCDPNIZQFSNLUOJQQP

Slide 67

Slide 67 text

࠷ޙʹ·ͱΊͰ͢

Slide 68

Slide 68 text

·ͱΊ w7VFKTWVFSPVUFSBYJPTͰ"1*ͱ࿈ܞͨ͠41"α Πτ͕؆୯ʹߏஙͰ͖Δɻ wܧଓతͳ։ൃͷͨΊʹ6OJU5FTUΛॻ͘ͷ͕େࣄɻ wୠ͠7VFKTͷ6OJU5FTUʹؔ͢Δࢿྉ͕ѹ౗తʹগͳ͍ ͷͰɺΞ΢τϓοτΛٻΈ·͢ʂ

Slide 69

Slide 69 text

4QFDJBM5IBOLT ࣾ಺೔ใαʔϏεχϙλϚ։ൃνʔϜ !+PFOPI !TIJLBLVO !IBQQZTJSP !Ԟ͞Μ

Slide 70

Slide 70 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ