Upgrade to Pro — share decks privately, control downloads, hide ads and more …

あの素晴らしい猫の本

E045b8ca5da3e15aae93989d878f626a?s=47 mi
July 13, 2018
890

 あの素晴らしい猫の本

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

E045b8ca5da3e15aae93989d878f626a?s=128

mi

July 13, 2018
Tweet

Transcript

  1. ͋ͷૉ੖Β͍͠ೣͷຊ 2018/07/12 (ɾωɾ) @mi

  2. ୭ʁ

  3. mi ϑϩϯτΤϯυΤϯδχΞ 5XJUUFSNJ@VQUP גࣜձࣾ:"."1 ૿ຊඒཬ

  4. ෱Ԭݝࡏॅ  ϑϩϯτΤϯυΤϯδχΞ  ࠓ೥ଔۀ༧ఆ  ίʔσΟϯά͕޷͖͗ͯ͢8FC6*σβΠφʔ͔Β
 δϣϒνΣϯδʂ ೑೑͏ͲΜ͕େ޷͖
 

    ͏ͪͷݘ͕Ұ൪ՄѪ͍ ͲΜͳਓʁ
  5. ೑೑͏ͲΜʂ ࠷ۙɺതଟͷι΢ϧϑʔυʹঢ֨ͨ͠Β͍͠

  6. None
  7. ͲΕ͘Β͍޷͖?

  8. #ٕज़ॻయ4 ຊॻ͍ͨ

  9. None
  10. ຊ ʹࡌͤͪΌ͏ఔ େ޷͖

  11. ໊ࢗަ׵ ͠·͠ΐ͏

  12. ࠓ೔࿩͢͜ͱ ͋ͷૉ੖Β͍͠Vue.jsͷ ೣͷຊΛ͝঺հ͠·͢ʂ

  13. Έͳ͞Μ͸

  14. ஌͍ͬͯΔͩΖ͏͔

  15. None
  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ͷ৔߹͸BC\^ͷΑ͏ʹॻ͘ ˞TDTTͷ৔߹ BEFFQC\^ͷΑ͏ʹॻ͘

  48. είʔϓΛ·͙ͨελΠϧࢦఆ /deep/ ΦϖϨʔλΛ͔·͢͜ͱͰɺࢠͷηϨ Ϋλ .MonsterItem__Heading ΛࢦఆͰ͖Δ ˞$44ͷ৔߹͸BC\^ͷΑ͏ʹॻ͘ ˞TDTTͷ৔߹ BEFFQC\^ͷΑ͏ʹॻ͘ είʔϓͷҙຯͱ͸

    ( ཚ༻͢Δͱ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Ͱ࡞ΒΕͨαϙʔταΠτ༗Γ
  56. None
  57. ͍͞͝ʹ Vue.js ษڧ͍͚ͨ͠Ͳ࠳ંͨ͠… ษڧํ๏͕෼͔Βͳ͍… ͱ͍ͬͨ ଟ͘ͷํͷ͖͔͚ͬʹͳΕ͹޾͍Ͱ͢ɻ
 ຊ౰ʹ෼͔Γ΍͍͢ຊͳͷͰɺ ΦεεϝͰ͢(ɾωɾ)

  58. ͋ͷૉ੖Β͍͠ೣͷຊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠mm