あの素晴らしい猫の本

「基礎から学ぶ Vue.js」の紹介です。
Vue.js 勉強したいけど挫折した… 勉強方法が分からない… といった多くの方のきっかけになれば幸いです。
本当に分かりやすい本なので、オススメです(・ω・)

Transcript

1. ͋ͷૉ੖Β͍͠ೣͷຊ 2018/07/12 (ɾωɾ) @mi
2. ୭ʁ
3. mi ϑϩϯτΤϯυΤϯδχΞ 5XJUUFS
   NJ@VQUP 
   גࣜձࣾ:"."1 ૿ຊ
   ඒཬ
4. 
   ෱Ԭݝࡏॅ
    ϑϩϯτΤϯυΤϯδχΞ
   
   
   
   
   ࠓ೥ଔۀ༧ఆ
   
    ίʔσΟϯά͕޷͖͗ͯ͢8FC6*σβΠφʔ͔Β

   
   δϣϒνΣϯδʂ
   
   ೑೑͏ͲΜ͕େ޷͖
 
   
   
   ͏ͪͷݘ͕Ұ൪ՄѪ͍
   ͲΜͳਓʁ
5. ೑೑͏ͲΜʂ ࠷ۙɺതଟͷι΢ϧϑʔυʹঢ֨ͨ͠Β͍͠
7. ͲΕ͘Β͍޷͖?
8. #ٕज़ॻయ4 ຊॻ͍ͨ
10. ຊ ʹࡌͤͪΌ͏ఔ େ޷͖
11. ໊ࢗަ׵ ͠·͠ΐ͏
12. ࠓ೔࿩͢͜ͱ ͋ͷૉ੖Β͍͠Vue.jsͷ ೣͷຊΛ͝঺հ͠·͢ʂ
13. Έͳ͞Μ͸
14. ஌͍ͬͯΔͩΖ͏͔
16. ஌ͬͯΔਓʁ
17. @mio ͞Μ 2018/05/29 ൃചࡁ
18. εΰΠͱ͜Ζ - ίϯϐϡʔλຊɺϥϯΩϯά1Ґ֫ಘ - ൃץ͔Β1ϱ݄଍ΒͣͰAmazon΍ָఱͳͲͷ
 ωοτγϣοϓͰࡏݿ੾ΕʢരചΕʣ - جૅ͔ΒֶͿVue.jsຊΛ࢖ͬͨษڧձ͕͋Δ - ࣾ಺ݚम༻ʹຊ԰ͷࡏݿΛऽࢄΒ͢ਓ͕ଓग़
    Πϯλʔωοτ
    
19. ΍͹͍ɻ
20. ͜ͷຊΛಡΉલͷࢲ
21. ͑ʙɻ7VFKTͷຊʁ
    ΋͏େମ෼͔Δ͠ॻ͚Δ͔Β
    ಡ·ͳͯ͘ΠΠϤʙ
    Ͳ͏ͤ஌ͬͯΔࣄͷ෮शʹ
    ͔͠ͳΒͳ͍͠ʙ
    ࣗତམ
22. ͜ͷຊΛಡΈऴΘͬͨ ޙͷࢲ
23. ஌Βͳ͍͜ͱΊͬͪΌ͋ͬͨʂʂ υοάΠϠʔ
    Օॴ΋ͨ͠
    
    ͳΜͱͳ͘ཧղ͍ͯͨ͠෦෼΋
    ͜ͷຊΛಡΜͰɺ಄ͷதͰ៉ྷ ʹ੔ཧ͞Εͨʂʂ
    ෼͔Γ΍͍͢จষͱਤɺ͔Θ͍ ͍ೣͷΠϥετͰ៉ྷʹ·ͱΊ ΒΕ͍ͯΔͷͰɺॳֶऀ΍ೖ໳ ॻʹ࠷దɻ
    ීஈ͔Β7VFKT
    ΨϦΨϦॻ͍ͯ ͍Δਓʹ΋Φεεϝɻ
24. ஌Βͳ͍͜ͱΊͬͪΌ͋ͬͨʂʂ υοάΠϠʔ
    Օॴ΋ͨ͠
    
    ͳΜͱͳ͘ཧղ͍ͯͨ͠෦෼΋
    ͜ͷຊΛಡΜͰɺ಄ͷதͰ៉ྷ ʹ੔ཧ͞Εͨʂʂ
    ෼͔Γ΍͍͢จষͱਤɺ͔Θ͍ ͍ೣͷΠϥετͰ៉ྷʹ·ͱΊ ΒΕ͍ͯΔͷͰɺॳֶऀ΍ೖ໳ ॻʹ࠷దɻ
    ීஈ͔Β7VFKT
    ΨϦΨϦॻ͍ͯ ͍Δਓʹ΋Φεεϝɻ ᷓΕΔఔͷײ૝ ※εςϚ͡Όͳ͍Αʂ
25. ຊͷ಺༰Λ؆୯ʹ঺հ ※࡞ऀ͞Μɺग़൛ࣾ͞Μɺ૒ํྃঝࡁ
26. ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 01 ͦͷ
27. ෳ਺ଐੑͷσʔλ όΠϯσΟϯά
28. ෳ਺ଐੑͷσʔλόΠϯσΟϯά dataʹఆٛ͞ΕͨେྔͷϓϩύςΟΛimgλάʹ ͦΕͧΕόΠϯυ͠Α͏ͱ͢Δͱ….
29. dataʹఆٛ͞ΕͨେྔͷϓϩύςΟΛimgλάʹ ͦΕͧΕόΠϯυ͠Α͏ͱ͢Δͱ…. ෳ਺ଐੑͷσʔλόΠϯσΟϯά ͜͏ͳΔʂ
30. dataʹఆٛ͞ΕͨେྔͷϓϩύςΟΛimgλάʹ ͦΕͧΕόΠϯυ͠Α͏ͱ͢Δͱ…. อक͕ਏ͍ / मਖ਼͕େม ෳ਺ଐੑͷσʔλόΠϯσΟϯά
31. v-bindσΟϨΫςΟϒͷҾ਺෦෼Λলུͯ͠ɺ ΦϒδΣΫτΛ౉͢ͱҰׅόΠϯυͰ͖Δʂ ෳ਺ଐੑͷσʔλόΠϯσΟϯά
32. v-bindσΟϨΫςΟϒͷҾ਺෦෼Λলུͯ͠ɺ ΦϒδΣΫτΛ౉͢ͱҰׅόΠϯυͰ͖Δʂ ҰׅόΠϯυ ෳ਺ଐੑͷσʔλόΠϯσΟϯά
33. Ҿ਺෦෼Λ࣋ͬͨv-bindΛซ༻͢Ε͹ɺಛఆͷଐ ੑ஋ͷΈʹมߋΛՃ͑Δ͜ͱ΋Մೳɻʢ߹Θٕͤ idଐੑͷΈมߋΛՃ͑Δྫ ෳ਺ଐੑͷσʔλόΠϯσΟϯά
34. Ҿ਺෦෼Λ࣋ͬͨv-bindΛซ༻͢Ε͹ɺಛఆͷଐ ੑ஋ͷΈʹมߋΛՃ͑Δ͜ͱ΋Մೳɻʢ߹Θٕͤ idଐੑͷΈมߋΛՃ͑Δྫ ศར ෳ਺ଐੑͷσʔλόΠϯσΟϯά
35. ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 02 ͦͷ
36. v-if ͱ v-for ͷ ߹Θٕͤ
37. v-ifͱv-forͷ߹Θٕͤ ܁Γฦ͠Λ͍ͯ͠Δཁૉʹ௚઀ v-if Λ෇༩͢Δ ͜ͱͰɺཁૉࣗମͷඳըΛૢ࡞Ͱ͖Δɻ 1. v-for͕࣮ߦ͞ΕΔ 2. v-if͕ධՁ͞ΕΔ
38. ܁Γฦ͠Λ͍ͯ͠Δཁૉʹ௚઀ v-if Λ෇༩͢Δ ͜ͱͰɺཁૉࣗମͷඳըΛૢ࡞Ͱ͖Δɻ 1. v-for͕࣮ߦ͞ΕΔ 2. v-if͕ධՁ͞ΕΔ ஌Βͳ͔ͬͨ ( v-forͱv-ifͬͯಉ࣌ʹॻ͚ΔΜ΍ ) v-ifͱv-forͷ߹Θٕͤ
39. ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 03 ͦͷ
40. isͷ༻్
41. isͷ༻్ Ұ෦ͷHTMLͷཁૉ͸ɺ಺෦ʹ࣋ͯΔཁૉ͕ ੍ݶ͞Ε͍ͯΔɻ ྫ: <table>, <select> ΧελϜλάͷ <MyRow />͸ɺ HTMLղੳ࣌ʹແޮͳίϯςϯπͱͯ͠ ࡟আ͞Εͯ͠·͏… ղܾࡦͱͯ͠ɺಛผͳଐੑ isΛ࢖༻ isଐੑ͸ɺ෇༩͞ΕͨཁૉΛ ίϯϙʔωϯτʹஔ͖׵͑ͯ͘ΕΔʂ
42. isͷ༻్ Ұ෦ͷHTMLͷཁૉ͸ɺ಺෦ʹ࣋ͯΔཁૉ͕ ੍ݶ͞Ε͍ͯΔɻ ྫ: <table>, <select> ΧελϜλάͷ <MyRow />͸ɺ HTMLղੳ࣌ʹແޮͳίϯςϯπͱͯ͠ ࡟আ͞Εͯ͠·͏… ղܾࡦͱͯ͠ɺಛผͳଐੑ isΛ࢖༻ isଐੑ͸ɺ෇༩͞ΕͨཁૉΛ ίϯϙʔωϯτʹஔ͖׵͑ͯ͘ΕΔʂ ͦΜͳ࢓༷͋ͬͨͷ JTͷ໾ׂཧղʂ
43. ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 04 ͦͷ
44. είʔϓΛ·͙ͨελΠϧࢦఆ
45. ࣮͸Մೳͩͬͨ… (;
    ƅшƅ) ŚŚŚŚŚŚ
46. είʔϓΛ·͙ͨελΠϧࢦఆ ਌ ࢠ
47. είʔϓΛ·͙ͨελΠϧࢦఆ /deep/ ΦϖϨʔλΛ͔·͢͜ͱͰɺࢠͷηϨ Ϋλ .MonsterItem__Heading ΛࢦఆͰ͖Δ ˞$44ͷ৔߹͸
    B
    
    C
    \^
    ͷΑ͏ʹॻ͘ ˞
    TDTTͷ৔߹
    
    B
    EFFQ
    C
    \^ͷΑ͏ʹॻ͘
48. είʔϓΛ·͙ͨελΠϧࢦఆ /deep/ ΦϖϨʔλΛ͔·͢͜ͱͰɺࢠͷηϨ Ϋλ .MonsterItem__Heading ΛࢦఆͰ͖Δ ˞$44ͷ৔߹͸
    B
    
    C
    \^
    ͷΑ͏ʹॻ͘ ˞
    TDTTͷ৔߹
    
    B
    EFFQ
    C
    \^ͷΑ͏ʹॻ͘ είʔϓͷҙຯͱ͸ ( ཚ༻͢ΔͱCSSઃܭతʹࢮ๢ϑϥά ) ஌ͬͯͯ΋࢖Θͳ͍͚ͲͶʂʂʂ
49. ͦΜͳࣄͰ͖ͨͷʂʁ ஌Βͳ͔ͬͨू 05 ͦͷ
50. Vuexͷgettersʹ Ҿ਺ΛࢦఆͰ͖Δ
51. ·͔͡ʂ
52. ͦͷ05. VuexͷgettersʹҾ਺ΛࢦఆͰ͖Δ Ҿ਺Λ࢖༻͢ΔͨΊ ؔ਺Λฦ͢ return id => { // } ˞ Ҿ਺෇͖ͷHFUUFST͸Ωϟογϡ͞Εͳ͍
    ˞ Կ౓΋ΞΫηε͢ΔHFUUFST͸DPNQVUFEʹొ࿥͢Δͱྑ͍
53. ͦͷ05. VuexͷgettersʹҾ਺ΛࢦఆͰ͖Δ Ҿ਺Λ࢖༻͢ΔͨΊ Ξϩʔؔ਺Λฦ͢ return id => { // } ˞ DPNQVUFE
    Ͱ͸Ҿ਺͸࢖͑ͳ͍͕ɺHFUUFSTͰ͸Մೳ
    ˞ Ҿ਺෇͖ͷHFUUFST͸Ωϟογϡ͞Εͳ͍
    ˞ Կ౓΋ΞΫηε͢ΔHFUUFST͸DPNQVUFEʹొ࿥͢Δͱྑ͍ ษڧʹͳΔʙ
54. ·ͱΊ
55. ·ͱΊ جૅ͔ΒֶͿVue.js͸εΰΠ Χόʔൣғ͕޿͍ / ௒෼͔Γ΍͍͢ / ϓϩμΫτʹ໾ཱͭ৘ใ͕ຬࡌ / Vue.jsͷυΩϡϝϯτʹࡌ͍ͬͯͳ͍৘ใ·Ͱॻ͔Ε͍ͯΔ / Ͷ͜ՄѪ͍ / αϯϓϧσʔλ๛෋ / ਤղ͕๛෋ / αΫαΫಡΊΔ / Vue.jsͷ࣮ྗΛ͞ΒʹҾ͖ग़͍ͨ͠ख़࿅ऀʹ΋Φεεϝ / ॻళͰݚम༻ʹങ͍઎Ίඞਢ / VuePressͰ࡞ΒΕͨαϙʔταΠτ༗Γ
57. ͍͞͝ʹ Vue.js ษڧ͍͚ͨ͠Ͳ࠳ંͨ͠… ษڧํ๏͕෼͔Βͳ͍… ͱ͍ͬͨ ଟ͘ͷํͷ͖͔͚ͬʹͳΕ͹޾͍Ͱ͢ɻ
 ຊ౰ʹ෼͔Γ΍͍͢ຊͳͷͰɺ ΦεεϝͰ͢(ɾωɾ)
58. ͋ͷૉ੖Β͍͠ೣͷຊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠mm