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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔ͷΰʔϧ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ϋϯζΦϯʹ ਐΉલʹ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Vue.js • ࡞ऀ: Evan You • Ϗϡʔ૚ͷϥΠϒϥ Ϧ • 2013೥ݸਓϓϩδΣ Ϋτͱͯ͠։࢝ • 2014೥2݄ʹv0.8ެࣜ ϦϦʔε

Slide 9

Slide 9 text

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 ྺ࢙

Slide 10

Slide 10 text

2017೥ͷঢ়گ രൃతͳ੒௕

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ෆे෼ͳέʔε

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

ෆे෼ͳέʔε ͷ ϝλϑΝ

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Φʔόʔͳέʔε

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Φʔόʔͳέʔε ͷ ϝλϑΝ

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ϑϩϯτΤϯυ ਏ͘ͳΔ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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