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

Vue.js初心者向けハンズオン

kazupon
April 20, 2018

 Vue.js初心者向けハンズオン

supported by teratail
2018.04.20

kazupon

April 20, 2018
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue.js ॳ৺ऀ޲͚ϋϯζΦϯ supported by teratail 2018.04.20 @kazupon

  2. ࣗݾ঺հ

  3. kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n,

    vuejs/jp.vuejs.org maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
  4. ࠓ೔ͷΰʔϧ

  5. ࠓ೔ͷΰʔϧ • Vue.jsͷجຊʹֶ͍ͭͯͿ • ϋϯζΦϯ޲͚ͷࢿྉͱެࣜυΩϡ ϝϯτΛݩʹֶश͍ͯ͘͠ • ࠓճͷֶशΛػձʹɺVue.js΁ͷڵ ຯΛ࣋ͪɺ࢖͍͖ͬͯ·͠ΐ͏ʂ

  6. ϋϯζΦϯʹ ਐΉલʹ

  7. None
  8. Vue.js • ࡞ऀ: Evan You • Ϗϡʔ૚ͷϥΠϒϥ Ϧ • 2013೥ݸਓϓϩδΣ

    Ϋτͱͯ͠։࢝ • 2014೥2݄ʹv0.8ެࣜ ϦϦʔε
  9. 2015.04.20 Laravel Ͱ࠾༻ܾఆ 2015.10.26 v1.0 Evangelion 2016.10.01 v2.0 Ghost in

    the Shell 2017.10.13 v2.5 Level E 2018.04.20 ݱࡏ ࠷৽: v2.5.16 ྺ࢙
  10. 2017೥ͷঢ়گ രൃతͳ੒௕

  11. None
  12. • ֶशίετ͕௿͍ • ίϯϙʔωϯτࢦ޲ʹΑΔUIߏ଄Խ • ϦΞΫςΟϒͳσʔλόΠϯσΟϯά ಛ௃

  13. ϑϨʔϜϫʔΫ ͱͯ͠ͷ ఩ֶ

  14. ϓϩάϨογϒ ϑϨʔϜϫʔΫ

  15. VS ϑϨʔϜϫʔΫͷෳࡶ͞ ΞϓϦέʔγϣϯͷෳࡶ͞

  16. ෆे෼ͳέʔε

  17. None
  18. ෆे෼ͳέʔε ͷ ϝλϑΝ

  19. None
  20. Φʔόʔͳέʔε

  21. None
  22. Φʔόʔͳέʔε ͷ ϝλϑΝ

  23. None
  24. ϑϨʔϜϫʔΫͷෳࡶੑ͸ ΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠े෼ͳί ετΛPayͰ͖Δ΋ͷͰͳ͚Ε͹ͳΒͳ͍

  25. ͔͠͠ͳ͕Β ࣮ࡍͷݱ৔͸…

  26. Ϗδωεཁ݅͸ ઈ͑ͣม׵͢Δ

  27. ϑϨʔϜϫʔΫ΋ ͜ΕʹରԠͰ͖ͳ͚Ε͹ ͳΒͳ͍

  28. ͜Μͳײ͡Ͱελʔτͯ͠ Ϗϡʔ૚ίΞ

  29. ن໛͕େ͖͘ͳ͖ͬͯͨͱ͖ Ϗϡʔ૚ίΞ ʴ Φϓγϣϯతͳ ΞϓϦέʔγϣϯ։ൃαϙʔτϥΠϒϥϦ

  30. αϙʔτͰ͖Δ ϥΠϒϥϦͳ͚Ε͹…

  31. ϑϩϯτΤϯυ ਏ͘ͳΔ

  32. ϓϩάϨογϒ ϑϨʔϜϫʔΫ

  33. http://ejje.weblio.jp/content/progressive

  34. ΞϓϦέʔγϣϯͷ ஈ֊తͳมԽཁٻʹԠͯ͡ ໰୊ղܾͰ͖Δํ๏Λఏڙ͢Δ

  35. Vue.jsຊମ Vue Router Vuex Vue CLI https://speakerdeck.com/kazupon/the-progressive-framework#40 ͜ΕΒྖҬͷৄࡉ͸Ҏલൃදͨ͠ԼهURLͷεϥΠυͰ

  36. ຊ೔ͷֶशͰ ΧόʔͰ͖ΔྖҬ

  37. Vue.jsຊମ Vue Router Vuex Vue CLI ͜͜ʂ

  38. • એݴతϨϯμϦϯά
 (Declarative Rendering) • ίϯϙʔωϯτγεςϜ
 (Component System) ࠓ೔ͷϋϯζΦϯ

  39. ϋϯζΦϯ͕ऴΘͬͨΒʁ ✅

  40. Vue.jsʹ͍ͭͯ΋ͬͱཧղ͍ͯ͜͠͏ʂ ॻ੶΋େखग़൛ࣾ΍ಉਓࢽ ٕज़ॻయ ͳͲͰ ग़࢝Ί͍ͯΔ

  41. ίϛϡχςΟʹࢀՃ͠Α͏ʂ • Vue.js೔ຊϢʔβʔάϧʔϓӡӦ • Slack
 https://vuejs-jp-slackin.herokuapp.com • Vuejs೔ຊޠެࣜαΠτܦ༝Ͱ΋δϣΠϯͰ͖·͢
 http://jp.vuejs.org •

    Vue.js Meetup (connpass)
 https://vuejs-meetup.connpass.com
  42. ೔ຊॳΧϯϑΝϨϯε΋։࠵༧ఆʂ https://vuefes.jp

  43. Thank you!