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

Vue.jsによるWebアプリケーション開発
バーチー / GMO PEPABO inc.
2016.12.10 YAPC::Hokkaido
Sample Code: https://github.com/hypermkt/nippo

Transcript

1. όʔνʔ
   
   (.0
   1&1"#0
   JOD
   
   :"1$)PLLBJEP 7VFKTʹΑΔ
   8FCΞϓϦέʔγϣϯ։ൃ
2. ࣗݾ঺հ
3. ιϑτ΢ΣΞΤϯδχΞ
   1)1FS
   
   1FSMνϣοτμέ όʔνʔ
   
   !IZQFSNLU IUUQCMPHIZQFSNLUKQ
4. ϗʔϜϖʔδ࡞੒αʔϏεάʔϖ IUUQTHPPQFKQ
5. ࠷ۙͷൃද
6. ಥવͰ͕͢ɺ
   օ͞Μ೔ใ͸ॻ͍͍ͯ·͔͢ʁ
7. ೔ใͷྑ͍఺ wࣗݾৼΓฦΓ͕ग़དྷΔ
   wࠔͬͨ͜ͱΛ౤ߘ͢Δͱ୭͔ʹॿ͚ͯ΋Β͑Δ
   wࣗ෼ͷ੒ՌΛΈΜͳʹ஌ͬͯ΋Β͑Δ
   wԕ͘ʹ཭Ε͍ͯΔਓ͕ԿΛ͍ͯ͠Δͷ͔෼͔Δ
8. ೔ใ͸ॻ͍ͨํ͕͍͍Ͱ͢Αʂʂ
9. ͍΍͍΍ɺ೔ใॻ͘৔ॴ͕ͳ͍͠ɾɾɾ
10. ҆৺͍ͯͩ͘͠͞
    ೔ใΞϓϦέʔγϣϯΛ༻ҙ͖ͯ͠·ͨ͠
11. /JQQP wࣗ෼ઐ༻ͷ೔ใ8FCΞϓϦέʔγϣϯ
    w೔ใͷ౤ߘɾӾཡɾ࡟আ͕ग़དྷΔ
    wϑϩϯτɿ7VFKT
    
    
    WVFSPVUFS
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    BYJPT
    Ͱ41"
    w"1*ɿ1)1
    
    -VNFO
    wIUUQTHJUIVCDPNIZQFSNLUOJQQP ϑϩϯτ "1* %#
12. ࠓ೔࿩͢͜ͱ
13. 7VFKTͰ೔ใ΢ΣϒΞϓϦέʔγϣϯΛ։ൃ͠Α͏ʂ w։ൃ؀ڥʹ͍ͭͯ
    wϏϧυ
    w41"
    w೔ใҰཡͷදࣔ
    wڞ௨ॲཧΛ·ͱΊ͍ͨ
    wϢχοτςετ
14. ։ൃ؀ڥʹ͍ͭͯ
15. ཁ݅ wϩʔΧϧͰ։ൃ͍ͨ͠
    wίʔυΛमਖ਼ͨ͠Β͙͢ʹը໘ʹ൓өͯ͠ཉ͍͠
    wೖྗ͢ΔίϚϯυ͸ۃྗ୹͍ͨ͘͠
16. ϑΝΠϧɾσΟϨΫτϦߏ੒ w QVCMJDJOEFYIUNM
    
    
    
    
    
    
    
    ɾɾɾ
    τοϓϖʔδͱͳΔςϯϓϨʔτ
    w TSDKTNBJOKT
    
    
    
    
    
    
    
    
    
    
    
    
    ɾɾɾ
    ϧʔςΟϯά
    w TSDKTDPNQPOFOT
    
    
    
    ɾɾɾ
    7VFKT
    DPNQPOFOUϑΝΠϧஔ͖৔
    w BQQWVF
    
    
    
    
    
    
    
    
    
    
    
    
    ɾɾɾτοϓϖʔδ೔ใҰཡ
    w OJQQPOFXWVF
    
    
    ɾɾɾ೔ใ౤ߘ
    w OJQQPFEJUWVF
    
    
    ɾɾɾ೔ใฤूɾ࡟আ
    w TSDKTNJYJOT
    
    
    
    
    
    
    
    
    
    
    
    ɾɾɾNJYJOTσΟϨΫτϦ
    w BQJ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ɾɾɾ-VNFOʹΑΔ"1*ΞϓϦέʔγϣϯ
17. OQNϥΠϒϥϦΛ׆༻ wIUUQTFSWFS
    
    ೚ҙͷσΟϨΫτϦΛ%PDVNFOU3PPUʹͯ͠ϒϥ΢β ͰӾཡ
    wCSPXTFSJGZ
    
    ΫϥΠΞϯταΠυͷϞδϡʔϧϏϧυγεςϜ
    wXBUDIJGZ
    
    ϑΝΠϧΛ؂ࢹͯࠩ͠෼Ϗϧυ͢Δ͜ͱͰϏϧυͷखؒΛ ল͘
    wOQNSVOBMM
    
    ෳ਺
    OQNTDSJQU
    Λ࣮ߦͰ͖Δ
18. QBDLBHFKTPO
    
    OQN
    SVO
    \TDSJQU^ w TUBSU
    
    
    IUUQαʔόʔɺCSPXTFSJGZϏϧυɺ"1*ΛฒྻͰ࣮ߦ
    w BQJ
    
    
    
    
    -VNFO੡ͷ"1*αʔόʔΛىಈ
    w CVJME
    
    CSPXTFSJGZϏϧυΛ࣮ߦ
    w TFSWFS
    
    8FCαʔόʔΛىಈɻ%PDVNFOU3PPU͸
    QVCMJD
    σΟϨΫτϦΛࢦఆ
    w UFTU
    
    
    
    6OJU
    5FTUΛ࣮ߦ
    
    ˞ࠓճ͸αϯϓϧΞϓϦέʔγϣϯͳͷͰɺ"1*'SPOU͕ಉϦϙδτϦ಺ʹͳ͍ͬͯ·͢ɻ
19. ͜Μͳײ͡ ˞എܠ͸ඒӯͷ੨͍஑Ͱ͢ɻײಈ͠·ͨ͠ɻ
20. Ϗϧυ
21. ཁ݅ wCSPXTFSJGZͰ7VFKTΛϏϧυ͍ͨ͠
    w&4  ͰίʔυΛॻ͖͍ͨ
    wίϯϙʔωϯτຖʹϑΝΠϧ෼ׂ͍ͨ͠
22. ஫ҙ఺
23. ϏϧυϑΝΠϧ͕̎ͭ͋Δ w7VFKT
    ͔Β̎ͭʹ෼͔Εͨ
    wελϯυΞϩϯ൛ɿ)5.-ίϯύΠϥ಺ଂɺ7VFYܥͱಉ͡ɻ
    wϥϯλΠϜݶఆϏϧυ൛ɿ)5.-ίϯύΠϥແ͠ɻOQNͰ͸σϑΥ ϧτͰͪ͜ΒΛग़ྗɻ
24. ελϯυΞϩϯ൛ͷ࢖͍ํ
25. 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" } } ͕͜͜ϙΠϯτʂ
26. ίϯϙʔωϯτผ։ൃ
27. ίϯϙʔωϯτຖʹϑΝΠϧ෼ׂͯ͠։ൃɿWVFJGZ ᶃ OQN
    JOTUBMM
    WVFJGZ
    TBWFEFW
    ᶄ CSPXTFSJGZͷUSBOTGPSNઃఆʹ௥Ճ
28. &4
    &4
29. ඞཁύοέʔδ wCBCFMDPSF
    w#BCFMίϯύΠϥʔ
    wCBCFMQSFTFUFT
    w#BCFM༻&4ϓϥάΠϯ
    wCBCFMSDͰQSFTFUTΛઃఆ
    wCBCFMJGZ
    wCSPXTFSJGZ༻CBCFMม׵
30. ϑΝΠϧ؂ࢹ͠ͳ͕Β7VFKT
    
    WVFJGZ
    
    &4ͰϏϧυ QBDLBHFKTPO CBCFMSD
31. 41"
32. ཁ݅ w41"Λ͍ͨ͠
    w41"ͰϦϯΫͯ͠ը໘ભҠ͍ͨ͠
    wը໘ભҠ࣌ʹύϥϝʔλʔ΋Ҿ͖ܧ͍͗ͨ
33. 7VFKTͰ41"͢Δʹ͸ w7VFKTެࣜͷWVFSPVUFSΛར༻͢Δͷ͕Φεεϝ
    w7VFKT
    Ͱར༻͢Δ৔߹͸WVFSPVUFS
    ܥΛར༻͢Δ
    wIUUQTHJUIVCDPNWVFKTWVFSPVUFS
    w೔ຊޠυΩϡϝϯτ͋Γ nam install vue-router —-save
34. εςοϓᶃɿϓϥάΠϯΛΠϯετʔϧ TSDKTNBJOKT 7VFVTF
    QMVHJO
    Ͱ
    7VFKT
    
    ϓϥάΠϯΛΠϯετʔϧ͢Δ SFG
    IUUQTKQWVFKTPSHWBQJ7VFVTF
35. εςοϓᶄɿϚοϐϯά TSDKTNBJOKT ϧʔτͱίϯϙʔωϯτΛ
    Ϛοϐϯά SFG
    IUUQTSPVUFSWVFKTPSHKBFTTFOUJBMTHFUUJOHTUBSUFEIUNM
36. εςοϓᶅɿϧʔλʔ஫ೖ TSDKTNBJOKT SPPUͱͳΔ7VFͷΠϯελϯεΛ࡞੒͠ɺ
    ΞϓϦέʔγϣϯશମͰϧʔλʔ͕ೝࣝͰ͖ΔΑ͏ʹ
    ϧʔλʔΛ஫ೖɻ
37. εςοϓᶆɿSPVUFSWJFXλάΛ഑ஔ ϧʔςΟϯάͱϚονͨ͠ίϯϙʔωϯτ͕͜͜΁ϨϯμϦϯά͞ΕΔ
38. SPVUFSMJOLͰ"λάʹม׵͞ΕΔ ύϥϝʔλʔࢦఆ ύεࢦఆ
39. ͜Μͳ෩ʹ63-͕ͳΓ·͢
40. ೔ใҰཡͷදࣔ
41. ཁ݅ w"1*͔ΒσʔλΛऔಘ͍ͨ͠
    wऔಘͨ͠಺༰Λը໘ʹද͍ࣔͨ͠
42. 7VFKTͰ"1*Λୟ͘ʹ͸ϥΠϒϥϦ͕ඞཁ wϧʔςΟϯάಉ༷ʹ7VFKTຊମʹ͸)551
    $MJFOU͸ಉ ࠝ͞Ε͍ͯ·ͤΜ
    w)UUQ$MJFOUͷBYJPTΛ࢖༻͠·͢
    wWVFSFTPVSDFͱ͍͏ެࣜ)UUQ$MJFOUϥΠϒϥϦ΋͋ Γ·͕ͨ͠ɺʹެ͔ࣜΒ֎Εͨ
43. "1*͔Β೔ใҰཡΛऔಘ BYJPTHFUͰ(&5ϦΫΤετ͕ग़དྷ
    +40/ύʔε͞ΕͨΦϒδΣΫτ͕ฦΔɻ TSDKTBQQWVF
44. 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" } ]
45. "1*͔Βऔಘͨ͠಺༰Λը໘ʹදࣔ JUFN
    JO
    JUFNTܗࣜͰ഑ྻͷத਎Λల։ͭͭ͠܁Γฦ͠ॲཧΛ ࣮ߦ͢Δ
46. ͜ͷΑ͏ʹදࣔ͞Ε·͢
47. ڞ௨ॲཧΛ·ͱΊ͍ͨ
48. ཁ݅ wEBUFUJNF͔Β೔ຊޠ೔෇͚ܗࣜʹม׵͢ΔॲཧΛ֤ ίϯϙʔωϯτʹॻ͖ͨ͘ͳ͍ TSDKTBQQWVF TSDKTOJQQPFEJUWVF
49. ϛοΫεΠϯ NJYJO Λ࢖͑͹ղܾͰ͖Δ
50. ϛοΫεΠϯͱ͸ w7VFίϯϙʔωϯτͰ࠶ར༻ՄೳͳػೳΛ࣋ͨͤΔํ ๏
51. ϛοΫεΠϯ༻ͷϑΝΠϧΛ༻ҙ wNJYJOTσΟϨΫτϦΛ࡞ͬͯϑΝΠϧΛ഑ஔ͢Δͱ෼͔Γ΍͢ ͍
    wϑΝΠϧ಺͸7VFKTͷจ๏ʹԊͬͯॻ͘͜ͱ͕ग़དྷ·͢
52. ϛοΫεΠϯΛಡΈࠐΜͰ࢖༻͢Δ ϛοΫεΠϯϑΝΠϧΛJNQPSU͢Δ
    NJYJOT
    ΦϓγϣϯͰ഑ྻͰࢦఆ
53. ϛοΫεΠϯΛಡΈࠐΜͰ࢖༻͢Δ ϛοΫεΠϯ಺ͷϝιου͕NFUIPET
    Ͱఆ͔ٛͨ͠ͷΑ͏ʹݺ΂Δ
54. Ϣχοτςετ
55. ཁ݅ wࠓճ͸̎ύλʔϯ
    wγϯϓϧͳϝιου
    w"1*ݺͼग़͕͋͠Δϝιου
56. 6OJU
    5FTUߏ੒ wLBSNB
    
    
    
    
    
    
    
    
    ɾɾɾ
    ςετϥϯφʔ
    wNPDIB
    
    
    
    
    
    
    
    ɾɾɾ
    ςετϑϨʔϜϫʔΫ
    wDIBJ
    
    
    
    
    
    
    
    
    
    
    
    ɾɾɾ
    ΞαʔγϣϯϥΠϒϥϦ
    w1IBOUPN+4
    
    ɾɾɾ
    ϔουϨεϒϥ΢β
    wLBSNBTQFDSFQPSUFS
    ɾɾɾςετ݁ՌͷϨϙʔτ
57. ύλʔϯ̍ɿγϯϓϧͳϝιου TSDKTNJYJOTOJQQPEBUFKT
58. ύλʔϯ̍ɿςετ wJNQPSUͰςετର৅ͱͳΔDPNQPOFOUϑΝΠϧΛಡ ΈࠐΉ
    w7VFͷNFUIPETΛ௨ͯ͡ϝιουʹΞΫηεग़དྷΔ
59. ύλʔϯ̎"1*ݺͼग़͕͋͠Δϝιου TSDKTBQQWVF
60. ᶃ7VFFYUFOEͰ
    αϒΫϥεΛ࡞੒
61. ᶄඇಉظςετΛ࣮ࢪ͢Δ
    ͨΊԾҾ਺໊ΛೖΕΔ
62. ᶅ"1*Λ࣮ߦ͠ͳ͍Α͏ʹ
 TJOPOͰTUVCԽ
    ᶆฦΓ஋ʹ੒ޭ͢Δ
    1SPNJTFΦϒδΣΫτ
    Λࢦఆ
63. ᶇΠϯελϯεԽ
    ᶈϝιουΛ࣮ߦ
    ᶉ੒ޭॲཧʹڧ੍తʹ
    
    
    
    ೖͬͯΞαʔγϣϯ
    ᶊEPOF ͰNPDIBʹ
    ςετऴྃΛ௨஌
64. ςετͷ࣮ߦ # 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
65. /JQQPͰվળ͍ͨ͠ࣄ wςετ͕଍Γͳ͍
    w݄ผ͔Ұఆ݅਺Ͱͷϖʔδωʔγϣϯ͍ͨ͠
    wෳ਺ਓ͕೔ใ౤ߘͰ͖ΔΑ͏ʹ͍ͨ͠
    wBQJ͔ΒͲͳ̓ SZ
66. ˣˣˣ
    13͓଴͍ͪͯ͠·͢ʂ
    ˣˣˣ
    IUUQTHJUIVCDPNIZQFSNLUOJQQP
67. ࠷ޙʹ·ͱΊͰ͢
68. ·ͱΊ w7VFKT
    
    WVFSPVUFS
    
    BYJPTͰ"1*ͱ࿈ܞͨ͠41"α Πτ͕؆୯ʹߏஙͰ͖Δɻ
    wܧଓతͳ։ൃͷͨΊʹ6OJU5FTUΛॻ͘ͷ͕େࣄɻ
    wୠ͠7VFKTͷ6OJU5FTUʹؔ͢Δࢿྉ͕ѹ౗తʹগͳ͍ ͷͰɺΞ΢τϓοτΛٻΈ·͢ʂ
69. 4QFDJBM
    5IBOLT ࣾ಺೔ใαʔϏε
    χϙλϚ։ൃνʔϜ !+PFOPI !TIJLBLVO !IBQQZTJSP !Ԟ͞Μ
70. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ