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

supported by teratail
2018.04.20

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. ϋϯζΦϯʹ ਐΉલʹ
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೥ͷঢ়گ രൃతͳ੒௕
12. • ֶशίετ͕௿͍ • ίϯϙʔωϯτࢦ޲ʹΑΔUIߏ଄Խ • ϦΞΫςΟϒͳσʔλόΠϯσΟϯά ಛ௃
13. ϑϨʔϜϫʔΫ ͱͯ͠ͷ ఩ֶ
14. ϓϩάϨογϒ ϑϨʔϜϫʔΫ
15. VS ϑϨʔϜϫʔΫͷෳࡶ͞ ΞϓϦέʔγϣϯͷෳࡶ͞
16. ෆे෼ͳέʔε
18. ෆे෼ͳέʔε ͷ ϝλϑΝ
20. Φʔόʔͳέʔε
22. Φʔόʔͳέʔε ͷ ϝλϑΝ
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!