Pro Yearly is on sale from $80 to $50! »

小さな課題解決から始めるVue.js / Getting started Vue.js for small improvement

小さな課題解決から始めるVue.js / Getting started Vue.js for small improvement

バーチー / GMO PEPABO inc.
2017.08.28 第9回ペパボテックカンファレンス ~ Vue.js 特集 ~
https://pepabo.connpass.com/event/63559/

022fe97731555344992c588527848cb7?s=128

hypermkt

August 28, 2017
Tweet

Transcript

  1. όʔνʔ(.01&1"#0JOD ୈճϖύϘςοΫΧϯϑΝϨϯεʙ7VFKTಛूʙ  খ͞ͳ՝୊ղܾ͔Β࢝ΊΔ7VFKT

  2. ιϑτ΢ΣΞΤϯδχΞ 4)ࣄۀ෦άʔϖάϧʔϓ όʔνʔ!IZQFSNLU IUUQCMPHIZQFSNLUKQ ࡛ۄݝग़਎Ͱ͢

  3. άʔϖ  ॳ৺ऀ޲͚ϗʔϜϖʔδ࡞੒αʔϏε ඒ༰ࣨɺҿ৯ళͳͲ༷ʑͳۀछ͕ར༻ αʔϏε։͔࢝Β̔೥໨ ϩʔε͓͡͞Μ  ϛϯνʔ  IUUQTHPPQFKQ

  4. ͸͡Ίʹ̏ͭ 

  5. ର৅ऀ w7VFKTͷಋೖΛݕ౼͍ͯ͠ΔΤϯδχΞɾσβΠφʔ޲͚ wνʔϜͷΤϯδχΞɾσβΠφʔڞʹ7VFKT͕΄΅ະܦݧ wԿΛ͖͔͚ͬͰಋೖ͠Α͏͔໎͍ͬͯΔ 

  6. ࠓ೔͓࿩͢Δ಺༰  ՝୊ ՝୊ղܾ 7VFKTಋೖʹ޲͚ͯͷ४උ άʔϖͰͷಋೖࣄྫ ·ͱΊ w,1*ɺ+4ίʔυվળͷͨΊʹ7VFKTΛಋೖɾར༻ͨ͠࿩

  7. ΰʔϧ wάʔϖͷখ͞ͳಋೖࣄྫ͕ڞ༗͞ΕΔ w7VFKTͷಋೖΛݕ౼͍ͯ͠Δํʑ͕ɺ
 ·ͣ͸খ͞ͳ՝୊ղܾ͔ΒνʔϜʹఏҊ͢Δ 

  8. ՝୊͕̏ͭ 

  9. ՝୊ νʔϜશһͰ,1*վળ 

  10. νʔϜશһͰ,1*վળ w೥લظ͔Β࢝·Δ w൒ظ͝ͱʹ஫ྗ͢Δ,1* ͓ਃ͠ࠐΈ਺ɺୀձ཰ɺܖ໿ ཰౳ʣΛܾΊΔ wνʔϜશһͰ,1*վળʹऔΓ૊Ή 

  11. ೥͸͓ਃ͠ࠐΈ਺ʹ஫ྗ wνʔϜશһͰ͓ਃ͠ࠐΈ਺͚ͩʹ஫ྗ wୀձ਺ɺܖ໿཰ͳͲͷଞ,1*͸ແࢹ w୹ظతվળͷΈͰத௕ظతͳ։ൃ͸جຊ͠ͳ͍ 

  12. νʔϜશһͰ͓ਃ͠ࠐΈ਺Λഒʹͨ͠࿩  IUUQTTQFBLFSEFDLDPNIZQFSNLUUJNVRVBOZVBOEFPTIFOTJJQNJTIVXPCFJOJTJUBIVB

  13. ՝୊ +BWB4DSJQU 

  14. ։ൃελΠϧ wK2VFSZ ϓϥάΠϯͷΈΛ࢖༻ wύοέʔδ؅ཧແ͠ wجຊతʹ͸֤ϖʔδ͝ͱʹɺ+4ϑΝΠϧΛ༻ҙ 

  15. νʔϜߏ੒ wΤϯδχΞ໊ wશһK2VFSZΛར༻࣮ͨ͠૷Մೳ w ݸਓతʹ 7VFKTܦݧऀ໊ wσβΠφʔ໊ wK2VFSZΛར༻ͨ͠ίʔσΟϯά͕ಘҙ໊ w+BWB4DSJQUͷίʔσΟϯά͕ෆಘҙ໊ 

  16. ར༻༻్ wσβΠϯௐ੔ɾϨεϙϯγϒԽʹ൐͏$44Ϋϥεͷ੾Γ ସ͑ wόϦσʔγϣϯ w"1*ݺͼग़͠  JG EFWJDFbQD` \ 

    bKTCMPDL` BEE$MBTT QD  ^FMTF\  bKTCMPDL` BEE$MBTT TNBSUQIPOF  ^
  17. ՝୊ wάϩʔόϧԚછ w࢖༻͞Ε͍ͯΔ͔෼͔Βͳ͍ଟ਺ͷK2VFSZϓϥάΠϯ w7JFXͱϩδοΫ͕ࠞࡏͯ͠ϝϯςφϯεੑ͕ѱ͍ w༷ʑͳΠϕϯτ৚݅ʹΑΓݺͼग़͞ΕΔ$44Ϋϥεͷ੾Γ ସ͑ॲཧ͕େଟ਺ 

  18. Өڹ wόά͕ൃੜ͠΍͍͢ wίʔυϨϏϡʔࠔ೉ w։ൃεϐʔυ௿Լ 

  19. ՝୊̏ ڝ߹αʔϏεʹෛ͚ͳ͍6*։ൃ 

  20. ผϖʔδͰ׬੒඼Λ֬ೝ͢ΔελΠϧ 

  21. ผϖʔδͰ׬੒඼Λ֬ೝ͢ΔελΠϧ  σβΠϯ͕มΘ͔ͬͨ෼͔Βͳ͍ Ͳ͏දࣔ͞ΕΔͷ͔෼͔Βͳ͍

  22. ϦΞϧλΠϜϓϨϏϡʔ

  23. Πϝʔδͱͯ͠͸

  24. ·ͱΊ wϏδωεత՝୊ɿ
 ɹ,1*վળ
 ڝ߹αʔϏεʹෛ͚ͳ͍6*։ൃ wٕज़త՝୊
 νʔϜͰͷϑϩϯτΤϯυ։ൃೳྗ 

  25. ՝୊ղܾ 

  26. ཁ݅ wΠϕϯτʹԠͨ͡$44Ϋϥεͷ੾Γସ͑ wσʔλόΠϯσΟϯά wখن໛ʹར༻Ͱ͖Δ wن໛ͷେ͖ͳΞϓϦέʔγϣϯ։ൃʹ΋ରԠ 

  27. ݕ౼ͨ݁͠Ռ

  28. 7VFKT͕࠷ద

  29. ͳͥ7VFKT͔  wϏϡʔͷมߋʹಛԽ͍ͯ͠Δ wֶशίετ͕௿͍ w೔ຊޠυΩϡϝϯτ͕͋Δ wγϯϓϧͳߏจ wطଘίʔυʹಋೖ͠΍͍͢ wσβΠφʔͱڠۀ͠΍͍͢

  30. ͱ͸͍͑૬ஊ΋ͳ͘
 ͍͖ͳΓಋೖ͸Ͱ͖ͳ͍

  31. 7VFKTಋೖʹ޲͚ͯͷ४උ 

  32. આ໌ձɾษڧձΛ࣮ࢪ w7VFKTಋೖઆ໌ձ w+BWB4DSJQUษڧձ w7VFKTϋϯζΦϯ 

  33. 7VFKTಋೖઆ໌ձ wର৅ wνʔϜͷ։ൃऀɺσβΠφʔ޲͚ w಺༰ wڝ߹αʔϏεͷڧΈɺզʑͷऑΈΛൺֱ wڝ߹αʔϏεʹෛ͚ͳ͍ػೳΛఏڙ͢ΔͨΊɺ
 7VFKTಋೖͷඞཁੑΛઆ໌ 

  34. 7VFKTಋೖઆ໌ձ  ͔֬ʹݱঢ়ͷ··Ͱ͸ ڝ߹αʔϏεʹউͯͳ͍ طଘػೳʹಋೖ͢Δͱ ݹ͍ϒϥ΢βͷར༻ऀʹӨڹ͕ग़Δ ৽نػೳ։ൃ࣌͸ྑ͍ ·ͣ͸খن໛ʹ
 ࢖ͬͯΈͯ͸ +BWB4DSJQUෆಘҙͳͷͰ


    ৺഑ʢσβΠφʔ
  35. +BWB4DSJQUษڧձ wର৅ w+4ίʔσΟϯά͕ෆಘҙͳσβΠφʔ޲͚ w಺༰ w+BWB4DSJQUͷجຊతͳจ๏ wK2VFSZΛར༻ͨ͠σβΠϯௐ੔ w+4͕ಘҙͳσβΠφʔʹΑΓि෼աڈճ࣮ࢪ 

  36. +BWB4DSJQUษڧձ  Ͳ͏ͯ͠ಈ͍͍ͯΔͷ͔
 ෼͔ͬͨ ෼͔Βͳ͍ॴ
 ૬ஊͰ͖ͯॿ͔Δ ۀ຿ʹ׆͔͍ͤͯͳ͍ͷͰɺ
 ੒௕Ͱ͖͍ͯΔ͔ෆ҆ ษڧͷ࢓ํ͕෼͔ͬͨ

  37. 7VFKTϋϯζΦϯ  wର৅ wνʔϜ಺֎ͷ։ൃऀɺσβΠφʔ޲͚ w಺༰ w7VFKTͷجຊతͳ࢖͍ํΛϋϯζΦϯܗࣜͰߨٛ w7VFΠϯελϯεͷߏ੒ɺWJG WGPS WCJOE WNPEFMͷ࢖͍ํ

    wճ࣌ؒ w IUUQTHJUIVCDPNIZQFSNLUIZQFSNLUUSFFNBTUFSKBWBTDSJQUWVFKTIBOETPO
  38. 7VFKTϋϯζΦϯ  7VFKTͷجૅ͸෼͔ͬͨʂ ϚχϡΞϧΛݟͳ͕Βग़དྷͦ͏ ૒ํ޲όΠϯσΟϯά͢͝ʔ͍ʂ
 ʢσβΠφʔʣ "1*͔Βσʔλऔಘ͸
 Ͳ͏΍ͬͯ΍Δͷʁ

  39. άʔϖͰͷಋೖࣄྫ 

  40. ςϯϓϨʔτҰཡը໘  w͓ਃ͠ࠐΈ਺վળͷࢪࡦ wߜΓࠐΈɾฒͼସ͑Λ෇͚Δ
 ͜ͱͰɺϢʔβʔͱςϯϓϨʔ τͷϚονϯά཰্͕͕Ε͹
 ͓ਃ͠ࠐΈ਺͕૿͑ΔͷͰ͸ʁ

  41. γϯϓϧߏ੒ w$%/ܦ༝ͷ7VFKTΛར༻ w؆қͳ࣮૷ͳͷͰίϯϙʔωϯτ΋ແ͠ wWVFSPVUFS 7VFY΋ෆཁ w"KBY͸K2VFSZ wߜΓࠐΈ͸pMUFS#Z ฒͼସ͑͸PSEFS#ZΛར༻ ౰࣌͸7VFܥʣ 

    <template v-for="theme in themes | filterBy priceBy | orderBy sortKey sortOrder"> </template>
  42. ࣮૷࣌ʹؾΛ͚ͭͨ͜ͱ w୲౰σβΠφʔʹ͸7VFKTͷσΟϨΫςΟϒɾ
 Πϯελϯε಺ͷߏ੒Λஸೡʹઆ໌ wσβΠφʔ͕ࣗ෼ͰௐࠪͰ͖ΔΑ͏ʹ೔ຊޠυΩϡϝϯτ ʹ͍ͭͯҊ಺ 

  43. ฒͼସ͑ɺߜΓࠐΈΛ௥Ճ 

  44. ݁Ռ

  45. ݁Ռ wςϯϓϨʔτ໊ͷΫϦοΫ਺૿ w཭୤཰ݮ wϢʔβʔͱ঎඼ͷϚονϯάʹ੒ޭ 

  46. ςϯϓϨʔτҰཡܦ༝ͷ͓ਃ͠ࠐΈ w$7਺૿ w$73૿ 

  47. ʲ஫ҙʳ ࢪࡦͷಡΈ͕౰͚ͨͬͨͩͰɺ 7VFKTΛ࢖͔ͬͨΒ,1*͕
 ޲্ͨ͠Θ͚Ͱ͸ͳ͍Ͱ͢ɻ

  48. ͜ͷఔ౓ͷػೳͰ͋Ε͹ K2VFSZͰ΋ྑ͍ͷͰ͸ʁ

  49. 7VFKTͱK2VFSZͰൺֱͯ͠Έͨ 

  50. ؆୯ͳߜΓࠐΈɺฒͼସ͑ͷαϯϓϧίʔυ  7VFKT൛IUUQTDPEFQFOJPBOPOQFOPF([H& K2VFSZ൛IUUQTDPEFQFOJPBOPOQFOZP[B2C

  51. ൺֱϙΠϯτᶃ ϏϡʔͱϩδοΫ͕෼ׂͰ͖Δ 

  52. K2VFSZ w+BWB4DSJQUͱ)5.-͕ີ݁߹ʹͳΔ ڽͬͨσβΠϯͷ৔߹ɺ+BWB4DSJQUଆͰͷमਖ਼͕खؒʹͳΔ

  53. 7VFKT w+BWB4DSJQUͱ)5.-͕ࠞ͟Βͳ͍ wςϯϓϨʔτΤϯδϯͷΑ͏ʹѻ͑Δ

  54. ൺֱϙΠϯτᶄ )5.-ͷࣗಈඳը 

  55. K2VFSZ wฒͼସ͑ɾߜΓࠐΈͨ͠Βɺ౎౓)5.-ͷඳըॲཧ͕ ඞཁ

  56. 7VFKT wWGPSσΟϨΫςΟϒΛ࢖͏͜ͱͰฒͼସ͑ɾߜΓࠐΈΛ
 ͨ͠Βɺ஋ͷมԽΛݕ஌͠)5.-͕ࣗಈతʹඳը͞ΕΔ ಉظ͢Δ

  57. 7VFKTΛ࢖ͬͯྑ͔ͬͨ͜ͱ wϏϡʔͱϩδοΫͷॲཧΛ෼ׂग़དྷͨ wςϯϓϨʔτΤϯδϯͷΑ͏ʹ࢖͑ͨ w)5.-ΛݟΕ͹Կ͕ى͖Δ͔෼͔Δ wσβΠφʔͱڠۀ͠΍͍͢ w։ൃɾσβΠφʔڞʹগ͠ͷ࢖͍ํͷڞ༗ͷΈͰɺ
 ܧଓతͳमਖ਼͕Ͱ͖ΔΑ͏ʹͳͬͨ 

  58. ·ͱΊ 

  59. ·ͱΊ w7VFKT͸,1*վળͳͲখ͞ͳ՝୊ղܾʹར༻Ͱ͖Δ wখن໛ͳमਖ਼Ͱ΋ϏϡʔͱϩδοΫΛ෼ׂ͢Δ͜ͱͰ Մಡੑ΋্͕Γ։ൃεϐʔυͷ޲্΁ w৽ٕज़ͷಋೖ࣌ʹ͸՝୊ɺ໨తΛνʔϜʹ૬ஊ wνʔϜͷٕྔʹ߹Θͤͨษڧձͷ࣮ࢪ͕Φεεϝ