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

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

Transcript

1. όʔνʔ
   
   (.0
   1&1"#0
   JOD
   
   ୈճϖύϘςοΫΧϯϑΝϨϯε
   ʙ
   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
    EFWJDF
    
    bQD`
    \
    
    
    
    
     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νʔϜͷٕྔʹ߹Θͤͨษڧձͷ࣮ࢪ͕Φεεϝ