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

022fe97731555344992c588527848cb7?s=47 hypermkt
December 10, 2016

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

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

022fe97731555344992c588527848cb7?s=128

hypermkt

December 10, 2016
Tweet

Transcript

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

  2. ࣗݾ঺հ

  3. ιϑτ΢ΣΞΤϯδχΞ 1)1FS1FSMνϣοτμέ όʔνʔ!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ɾɾɾ7VFKTDPNQPOFOUϑΝΠϧஔ͖৔ w BQQWVFɾɾɾτοϓϖʔδ೔ใҰཡ w

    OJQQPOFXWVFɾɾɾ೔ใ౤ߘ w OJQQPFEJUWVFɾɾɾ೔ใฤूɾ࡟আ w TSDKTNJYJOTɾɾɾNJYJOTσΟϨΫτϦ w BQJɾɾɾ-VNFOʹΑΔ"1*ΞϓϦέʔγϣϯ
  17. OQNϥΠϒϥϦΛ׆༻ wIUUQTFSWFS೚ҙͷσΟϨΫτϦΛ%PDVNFOU3PPUʹͯ͠ϒϥ΢β ͰӾཡ wCSPXTFSJGZΫϥΠΞϯταΠυͷϞδϡʔϧϏϧυγεςϜ wXBUDIJGZϑΝΠϧΛ؂ࢹͯࠩ͠෼Ϗϧυ͢Δ͜ͱͰϏϧυͷखؒΛ ল͘ wOQNSVOBMMෳ਺OQNTDSJQUΛ࣮ߦͰ͖Δ

  18. QBDLBHFKTPOOQNSVO\TDSJQU^ w TUBSUIUUQαʔόʔɺCSPXTFSJGZϏϧυɺ"1*ΛฒྻͰ࣮ߦ w BQJ-VNFO੡ͷ"1*αʔόʔΛىಈ w CVJMECSPXTFSJGZϏϧυΛ࣮ߦ w TFSWFS8FCαʔόʔΛىಈɻ%PDVNFOU3PPU͸QVCMJDσΟϨΫτϦΛࢦఆ w

    UFTU6OJU5FTUΛ࣮ߦ ˞ࠓճ͸αϯϓϧΞϓϦέʔγϣϯͳͷͰɺ"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 ᶃ OQNJOTUBMMWVFJGZTBWFEFW ᶄ 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 ϓϥάΠϯΛΠϯετʔϧ͢Δ SFGIUUQTKQWVFKTPSHWBQJ7VFVTF

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

  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*͔Βऔಘͨ͠಺༰Λը໘ʹදࣔ JUFNJOJUFNTܗࣜͰ഑ྻͷத਎Λల։ͭͭ͠܁Γฦ͠ॲཧΛ ࣮ߦ͢Δ

  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. 6OJU5FTUߏ੒ 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. 4QFDJBM5IBOLT ࣾ಺೔ใαʔϏεχϙλϚ։ൃνʔϜ !+PFOPI !TIJLBLVO !IBQQZTJSP !Ԟ͞Μ

  70. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ