Vue.js 3 に向けた Vue.js 入門

by kazupon

Slide 1

Slide 1 text

Vue.js 3 ʹ޲͚ͨ Vue.js ೖ໳ Microsoft Ignite The Tour 2019.12.06 @kazupon

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

PLAID, inc.  Vue.js Core Team Member Vue.js Japan User Group Organizer Vue I18n Author WebAssembly Love ❤ @kazu_pon kazupon kazupon

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

͸͡Ίʹ

Slide 6

Slide 6 text

2019೥10݄

Slide 7

Slide 7 text

Vue.js 3 pre-alpha ެ։ʂ https://twitter.com/vuejs/status/1180159603507638274

Slide 8

Slide 8 text

vuejs/vue-next Ͱެ։ https://github.com/vuejs/vue-next

Slide 9

Slide 9 text

2020೥Q1ʹ޲͚ͯ։ൃத • RFCͰ࢓༷ΛݻΊͭͭ։ൃ https://github.com/vuejs/rfcs

Slide 10

Slide 10 text

Vue.js 3 Ͱͷ৽ػೳ • ίϯϙδγϣϯ API • ϑϥάϝϯτ / ϙʔλϧ • TypeScript ϑϧαϙʔτ • … ͳͲͳͲ https://github.com/vuejs/rfcs

Slide 11

Slide 11 text

v2 → v3

Slide 12

Slide 12 text

͍Ζ͍Ζͱ ػೳ͕૿͑ͯ

Slide 13

Slide 13 text

ഁյతมߋ ΋͋Δͱ

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

͜ͷ࣌ظʹೖ໳ ͢Δͱେมͦ͏…

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

ͦ͏ ݟ͑ͦ͏Ͱ͕͢

Slide 18

Slide 18 text

৺഑͠ͳͯ͘΋ େৎ෉Ͱ͢ʂ

Slide 19

Slide 19 text

ओཁػೳ͸

Slide 20

Slide 20 text

΄΅ͦͷ··Ͱ

Slide 21

Slide 21 text

ಈ͖·͢ʂ

Slide 22

Slide 22 text

ͱ͍͏Θ͚Ͱ

Slide 23

Slide 23 text

ࠓ೔࿩͢͜ͱ

Slide 24

Slide 24 text

• Vue.js ͷಛ௃ͱઃܭࢥ૝ • Vue.js 3 Ͱ΋௨༻͢Δߏจɾػೳͷ঺հ • ࠷৽҆ఆόʔδϣϯ v2.6.10 Ͱઆ໌ • Vue.js 3 ͷ໨ۄػೳ ίϯϙδγϣϯAPIʹ ͍ͭͯ΋ܰ͘঺հ ࠓ೔࿩͢͜ͱ

Slide 25

Slide 25 text

Vue.js ʹ͍ͭͯ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

2015.04.20 Laravel Ͱ࠾༻ܾఆ 2015.10.26 v1.0 Evangelion 2016.10.01 v2.0 Ghost in the Shell 2019.02.05 v2.6 Macross 2019.12.06 ݱࡏ ࠷৽: v2.6.10 ྺ࢙

Slide 28

Slide 28 text

• ߴ౓ͳٕज़εΩϧ͕ແͯ͘΋࢖͑Δ • ίϯϙʔωϯτࢦ޲ʹΑΔUIߏ଄Խ • ϦΞΫςΟϒͳσʔλόΠϯσΟϯά ಛ௃

Slide 29

Slide 29 text

• HTML / JavaScript / CSS ͷجຊ஌͕ࣝ͋ Ε͹͙͢ʹ࢖͑Δ • index.html ͷ script λά͔Β࢖͏͜ͱ͕Ͱ ͖Δ ߴ౓ͳٕज़εΩϧ͕ͳͯ͘΋࢖͑Δ

Slide 30

Slide 30 text

• ίϯϙʔωϯτͱ͍͏෦඼Λ૊Έཱͯͯɺ UI Λ૊ΈͨͯΔ ίϯϙʔωϯτࢦ޲ʹΑΔUIߏ଄Խ

Slide 31

Slide 31 text

• DOM ্ͷσʔλͱJavaScript͕࣋ͭσʔλ ؒͰόΠϯυͯ͠ಉظΛऔΔ͜ͱ͕Ͱ͖Δ ϦΞΫςΟϒͳσʔλόΠϯσΟϯά

Slide 32

Slide 32 text

ϑϨʔϜϫʔΫ ͱͯ͠ͷ ઃܭࢥ૝

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ෆे෼ͳέʔε

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

ෆे෼ͳέʔε ͷ ൺᄻ

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Φʔόʔͳέʔε

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Φʔόʔͳέʔε ͷ ൺᄻ

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

ن໛͕େ͖͘ͳ͖ͬͯͨͱ͖ view૚ίΞ ʴ ϧʔςΟϯάɺঢ়ଶ؅ཧ ͕ඞཁʂ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

ϑϩϯτΤϯυ։ൃ ਏ͍…

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Vue.jsຊମ Vue Router Vuex Vue CLI

Slide 55

Slide 55 text

Vue.jsͰ WebΞϓϦΛ ࡞ͬͯΈΔ

Slide 56

Slide 56 text

• Vue ΠϯελϯεΛ࡞੒ • UIදࣔʹඞཁͳσʔλ(ঢ়ଶ)Λఆٛ • ςϯϓϨʔτͰ UI Λએݴ • Vue ΠϯελϯεΛDOM ʹϚ΢ϯτ WebΞϓϦΛ࡞ΔྲྀΕ

Slide 57

Slide 57 text

ϝοηʔδΛ දࣔͤ͞ΔΞϓϦ

Slide 58

Slide 58 text

• Vue ίϯετϥΫλ Ͱ new ͢Δ VueΠϯελϯεΛ࡞੒

Slide 59

Slide 59 text

• data ΦϓγϣϯʹσʔλΛఆٛ UIදࣔʹඞཁͳσʔλΛఆٛ

Slide 60

Slide 60 text

• template Φϓγϣϯʹ HTML Λهड़ ςϯϓϨʔτʹUIΛએݴ

Slide 61

Slide 61 text

• $mount ϝιουͰର৅ DOM ʹϚ΢ϯτ VueΠϯελϯεΛDOMʹϚ΢ϯτ

Slide 62

Slide 62 text

࣮ߦ͢Δͱ…

Slide 63

Slide 63 text

͍͔͕Ͱͨ͠Ͱ ͠ΐ͏͔ʁ

Slide 64

Slide 64 text

ςϯϓϨʔτ ߏจ

Slide 65

Slide 65 text

• ΠϯλʔϙϨʔγϣϯ (Interpolation) • σΟϨΫςΟϒ (Directive) ςϯϓϨʔτߏจ

Slide 66

Slide 66 text

ΠϯλʔϙϨʔγϣϯ ʹ͍ͭͯ

Slide 67

Slide 67 text

• ϓϩάϥϜʹ͓͍ͯ͸ɺ͋Δม਺ͱҰॹʹ ߏ੒͞Εͨσʔλʹ͓͍ͯɺίϯύΠϧ ࣌ɺ·ͨ͸࣮ߦ࣌ʹม਺͕ల։͞ΕΔ͜ͱ • ྫ: JavaScript ςϯϓϨʔτϦςϥϧ ΠϯλʔϙϨʔγϣϯͱ͸ʁ

Slide 68

Slide 68 text

• JavaScript Ҏ֎ʹ΋ςϯϓϨʔτ΋ଘࡏ͢Δ • ςϯϓϨʔτͰ͸ҎԼΛαϙʔτ • ςΩετ • HTMLͷଐੑ • JavaScript ͷࣜ Vue.jsʹ͓͚ΔΠϯλʔϙϨʔγϣϯͱ͸ʁ

Slide 69

Slide 69 text

σΟϨΫςΟϒ ʹ͍ͭͯ

Slide 70

Slide 70 text

• ϓϩάϥϛϯάݴޠɺιϑτ΢ΣΞͷจ຺ ʹ͓͍ͯ͸ɺ໋ྩ΍ίϚϯυΛ࣮ߦ͢Δͨ Ίʹࢦࣔߏจ • ྫ: nginx (Webαʔό)ͷઃఆϑΝΠϧ σΟϨΫςΟϒͱ͸ʁ

Slide 71

Slide 71 text

• ςϯϓϨʔτʹ͓͍ͯɺWebඪ४࢓༷ʹ͸ͳ͍ಛผͳ໋ྩΛ༩ ͑ΔͨΊͷߏจ • v-if / v-show: ཁૉͷදࣔɾඇදࣔͷͨΊͷ৚݅൑ఆ • v-for: ཁૉʹର͢Δ܁Γฦ͠ॲཧ • v-bind: ཁૉʹର͢ΔσʔλͷόΠϯυ(ଋറ) • v-on: ཁૉͷΠϕϯτϋϯυϦϯά • v-model: ೖྗड෇Մೳͳཁૉͱσʔλؒ૒ํ޲ʹόΠϯυ Vue.jsʹ͓͚ΔσΟϨΫςΟϒͱ͸ʁ

Slide 72

Slide 72 text

• v-if • v-show v-if / v-show

Slide 73

Slide 73 text

v-for

Slide 74

Slide 74 text

v-bind

Slide 75

Slide 75 text

v-on

Slide 76

Slide 76 text

v-model

Slide 77

Slide 77 text

• v-slot • v-text • v-once • v-pre • v-cloak ͦͷଞͷσΟϨΫςΟϒ

Slide 78

Slide 78 text

ࢉग़ϓϩύςΟ

Slide 79

Slide 79 text

• Ұൠతʹ͸ɺఆٛ͞Εͨσʔλ(ঢ়ଶ)ͷ஋ ΛݩʹɺͦΕΒσʔλͷࢉग़͞Εͨσʔλ ͷ͜ͱ  ྫ: JavaScript ͷ getter ࢉग़ϓϩύςΟͱ͸ʁ

Slide 80

Slide 80 text

• ͨͩ୯ʹܭࢉ ͯ͠ฦ͢σʔ λ͚ͩͰ͸ͳ ͘ɺσʔλͷ ஋ͷมߋΛಈ తʹݕ஌ͯ͠ දࣔʹ൓өͰ ͖ΔΑ͏ʹ͠ ͍ͯΔ Vue.jsʹ͓͚Δࢉग़ϓϩύςΟͱ͸ʁ

Slide 81

Slide 81 text

• ςϯϓϨʔτʹΠϯλʔϙϨʔγϣϯ͕ෳ ࡶʹͳ͖ͬͯͨͱ͖ ࢉग़ϓϩύςΟͷϢʔεέʔε ࢉग़ϓϩύςΟ͸ ಺෦ͰΩϟογϡ΋͢ΔͷͰ ύϑΥʔϚϯε΋޲্͢Δʂ

Slide 82

Slide 82 text

΢Υονϟ

Slide 83

Slide 83 text

• Vue.jsͰఆٛ͞ΕͨσʔλΛ؂ࢹͯ͠ɺม ߋ௨஌Λఏڙ͢Δ ΢Υονϟͱ͸ʁ

Slide 84

Slide 84 text

• ࢉग़ϓϩύ ςΟ͸ɺ ΢Υονϟ ͰػೳΛఏ ڙ͍ͯ͠Δ ΢Υονϟͱ͸ʁ

Slide 85

Slide 85 text

΢ΥονϟΛ࢖ͬͨίʔυྫ

Slide 86

Slide 86 text

• ࢉग़ϓϩύςΟͷܭࢉෛՙ͕ߴ͍ • ྫ: ڊେͳσʔλ͔Βࢉग़͢Δ஋͕ຖճҟͳͬ ͯ͠·͏ • ࢉग़ϓϩύςΟͰ͸Ͱ͖ͳ͍͜ͱΛ΍Γ͍ͨͱ͖ • ྫ: αʔό͔Βඇಉظʹऔಘͨ͠σʔλΛݩʹ ࢉग़ͯ͠࢖͍͍ͨͱ͖ ΢ΥονϟͷϢʔεέʔε

Slide 87

Slide 87 text

ίϯϙʔωϯτ

Slide 88

Slide 88 text

• Ұൠతͳιϑτ΢ΣΞͷ จ຺ʹ͓͍ͯ͸ɺϓϩά ϥϜΛ࠶ར༻ʹ͢ΔͨΊ Ϟδϡʔϧͱͯ͠෦඼Խ ͞Εͨ΋ͷ • ϒϩοΫͷΑ͏ʹίϯ ϙʔωϯτΛ૊Έཱͯͯ ߏ੒͍ͯ͘͠ ίϯϙʔωϯτͱ͸ʁ

Slide 89

Slide 89 text

• UI Λػೳ΍৘ใߏ ଄ʹैͬͯϞδϡʔ ϧԽͨ͠΋ͷ • ίϯϙʔωϯτΛ ૊Έ߹ΘΔ͜ͱͰ ࣗવͱπϦʔ্ʹ ߏ੒͞ΕΔ Vue.jsʹ͓͚Δίϯϙʔωϯτͱ͸ʁ

Slide 90

Slide 90 text

Vue.jsಠࣗͷίϯϙʔωϯτ֓೦ • ୯ҰϑΝΠϧί ϯϙʔωϯτ   (Single-ﬁle components) • Vue ίϯϙʔω ϯτͱ΋ݺͿ͜ ͱ΋ {CSS} ({JS})

Slide 91

Slide 91 text

• ଞͷίϯϙʔωϯτͱ΍ΓऔΓ͢ΔͨΊʹ ΠϯλʔϑΣʔεΛఏڙ͢Δ • ϓϩύςΟ (props) • Πϕϯτ (emits) • εϩοτ (slots) ίϯϙʔωϯτ͸I/FΛఏڙ͢Δ

Slide 92

Slide 92 text

ϓϩύςΟ(Props) • ଞͷίϯϙʔωϯτ͔ΒσʔλΛड͚औΔ ͨΊͷΠϯλʔϑΣʔε Child ίϯϙʔωϯτ Parent ίϯϙʔωϯτ Props ܦ༝Ͱ౉͢

Slide 93

Slide 93 text

Πϕϯτ (emits) • ίϯϙʔωϯτΛ࢖͏ଆ(਌)ʹσʔλΛ౉ ͨ͢ΊͷΠϯλʔϑΣʔε Child ίϯϙʔωϯτ Parent ίϯϙʔωϯτ $emitͰ Πϕϯτ Λൃߦ

Slide 94

Slide 94 text

εϩοτ (slots) • ίϯϙʔωϯτʹ࢖͏ଆ(਌)͔Βίϯςϯ πΛࠩ͠ࠐ·ͤΔͨΊͷΠϯλʔϑΣʔε Child ίϯϙʔωϯτ Parent ίϯϙʔωϯτ ʹ ࠩ͠ࠐ·ΕΔ

Slide 95

Slide 95 text

ίϯϙʔωϯτؒσʔλͷ΍ΓऔΓͷϧʔϧ • σʔλ͕ྲྀΕΔํ޲Λن໿Λઃ͚Δ͜ͱͰ ෳࡶʹͳΔͷΛආ͚Δ

Slide 96

Slide 96 text

ଞʹ΋৭ʑ ͋Γ·͕͢

Slide 97

Slide 97 text

͜ͷล͸͓͑ͯ͞ ͓͍͍ͯͩ͘͞ʂ

Slide 98

Slide 98 text

Vue.js 3 ίϯϙδγϣϯ API

Slide 99

Slide 99 text

ίϯϙδγϣϯAPIͱ͸ʁ • ؔ਺ϕʔεͰఏڙ͞ΕΔ API • ίϯϙʔωϯτΛϩδοΫΛࣗ༝౓ߴ͘ ૊Έ߹Θ࣮ͤ૷͢Δ͜ͱ͕Ͱ͖Δ

Slide 100

Slide 100 text

ੜ·Εͨഎܠ • Vue.js Ͱେن໛։ൃ͸Ͱ͖Δ͕໰୊͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡ Έʹ͘͘ͳΔ • ίʔυ࠶ར༻ͷύλʔϯԽ͠ʹ͍͘ • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͘ ͍

Slide 101

Slide 101 text

ίϯϙδγϣϯAPIΛ࢖͏ͱ… • ίϯϙʔωϯτ ͷϩδοΫ͕៉ ྷʹͳΓɺ໰୊ Λղܾ͢Δʂ

Slide 102

Slide 102 text

ྫ: Χ΢ϯτΞοϓ

Slide 103

Slide 103 text

ৄࡉ͕ؾʹͳΔํ͸RFCΛ͝ཡ͍ͩ͘͞ʂ • υΩϡϝϯτ  https://vue-composition-api-rfc.netlify.com/

Slide 104

Slide 104 text

Vue.js v2 Ͱ͓ࢼ͠Ͱ࢖͑Δ • vuejs/composition-api  https://github.com/vuejs/composition-api

Slide 105

Slide 105 text

ऴΘΓʹ

Slide 106

Slide 106 text

• ͖ͨΔ Vue.js 3 ʹ޲͚ͯ • Vue.js ͷಛ௃ͱઃܭࢥ૝ • Vue.js 3 Ͱ΋௨༻͢Δߏจɾػೳ • Vue.js 3 ͷ໨ۄػೳ ίϯϙδγϣϯAPI ࠓ೔࿩ͨ͜͠ͱ

Slide 107

Slide 107 text

• ΦϯϥΠϯ:  Vue.js ެࣜυΩϡϝϯτ  https://jp.vuejs.org • ॻ੶:  Vue.js ೖ໳ (ٕज़ධ࿦ࣾ) ͞Βʹ Vue.js ೖ໳͍ͯ͘͠ʹ͸ʁ

Slide 108

Slide 108 text

࠷ޙʹ

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

དྷ೥ 2/1 ʹ Vue.js 3 ʹ͍ͭͯ࿩͠·͢ • 2020-02-01 PWA Night CONFERENCE 2020  https://conf2020.pwanight.jp/

Slide 111

Slide 111 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ